Labor 1 : Hello, World

Transkript

1 Labor 1 : Hello, World Ziel Sie sollten eine neue Applikation Hello, Android erstellen, dessen Startseite, wie folgt, aussieht (siehe Abbildung): 1. Der Name der Applikation ist Hello, Android. (Er wird vom System in der oberen Leiste gemäss Ihren Angaben automatisch angezeigt.) 2. Die Oberfläche enthält zwei Komponenten, einen Knopf (Button) Click me! und eine Texteingabe ( ). Sobald Sie auf den Knopf drücken, soll der Text Hello, World! in der Texteingabe erscheinen.. Ein neues Android Projekt erstellen Zuerst müssen Sie ein neues Android Projekt in Eclipse erstellen: 1. Man wähle in der oberen Leiste File > New > Android Application Project. 1

2 2. Hier muss das neue Projekt definiert werden. Application Name: Project Name: Package Name: Hello, Android HelloAndroidPrj ch.fhnw.android.hello Build SDK: Android 4.1 Min Required SDK: API 10 Klicken Sie Create custom launcher icon Option weg und drücken Sie auf Next. 3. Wählen Sie hier Blank Activity und drücken Sie auf Next. 2

3 4. Hier muss noch folgendes eingefüllt werden: 3

4 5. Dann, Finish anklicken. Bemerkung: Sie können den ersten Teil der Android Selbstlerneinheit Building Your First App auf konsultieren, um mehr über die verschiedenen Einstellungen zu erfahren. 4

5 Das Gerüst des HelloAndroidPrj Projekts Wenn Sie jetzt das vom System erstellte Projekt anschauen, werden Sie eine Verzeichnisstruktur wie diese sehen, (freilich mit dem von Ihnen gewählten Paket-Namen): Schauen Sie sich jetzt die vom Android System automatisch erstellten Dateien an. 1. Das Gerüst der Klasse HelloAndroidActivity in der Datei HelloAndroidActivity.java. 5

6 package ch.fhnw.android.hello; import android.app.activity; import android.os.bundle; import android.view.menu; public class HelloAndroidActivity extends Activity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.main, menu); return true; Beachten Sie, dass Ihre Anwendung nur eine Klasse HelloAndroidActivity enthält, die von der Basisklasse Activity abgeleitet ist. Die Activities implementieren die sichtbaren Bestandteile einer Anwendung und interagieren mit dem Benutzer. Eine Anwendung kann mehr als eine Activity enthalten, der Benutzer interagiert aber nur mit einer einzigen Activity auf einmal. Sie sehen, dass das Android System bereits ein Template für die Methode oncreate() implementiert hat. Diese Methode wird vom Android System aufgerufen, wenn die Activity startet. Hierin sollte die Initialisierung und der UI Aufbau erfolgen. Mit setcontentview(r.layout.main) wird die UI Oberfläche gemäss dem Code in der main.xml Datei (siehe 2.1) ausgelegt. 2. Die Ressourcen im Verzeichnis /res/ Die Layout Resource-Datei main.xml im Verzeichnis /res/layout/. Diese Datei wird automatisch in Eclipse gezeigt, sobald das Projekt kreiert wird. Im Tab GraphicalLayout sehen Sie die vom Android System automatisch erstellte graphische Oberfläche: in der Mitte des Bildschirms erscheint Hello world!. Im Tab main.xml können Sie sich die XML-Datei ansehen, die diese Oberfläche definiert. Es wurde vom System automatisch ein RelativeLayout gewählt, worin die einzelnen UI-Komponenten relativ zueinander positioniert werden können. Das XML-Element TextView (in rot) definiert die Darstellung eines Textes auf der Oberfläche. Das Attribut android:text verweist auf eine Zeichenkettendefinition ("@string/hello_world"), die sich in der Datei strings.xml unter dem Namen "hello_world" befindet (siehe 2.2). Das zeigt an, dass es sich um eine Ressource-ID handelt. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView Android:layout_width="wrap_content" Android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:text="@string/hello_world" tools:context=".helloandroidactivity" /> 6 </RelativeLayout>

7 2.2. Die String Resource-Datei strings.xml im Verzeichnis /res/strings/. Hier sind der Name der Applikation (in rot) und die obengenannte Zeichenkette definiert. <resources>. <string name="app_name">hello, Android</string> <string name="hello_world">hello world!</string> <string name="menu_settings">settings</string> <string name="title_activity_hello_android">hello, Android</string> </resources> 3. Die AndroidManifest.xml Datei. Hier ist die Applikation mit all ihren Aktivitäten definiert. <manifest xmlns:android=" package="ch.fhnw.android.hello" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="10" android:targetsdkversion="15"/> <application > <activity android:name=".helloandroidactivity" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> </manifest> Die AndroidManifest.xml Datei teilt der Android-Laufzeitumgebung mit, aus welchen Komponenten sich eine Anwendung zusammensetzt. Beachten Sie hier den Paketnamen (in rot). Es muss immer der vollständige Paketname angegeben werden. Die Activity-Klasse im android:name Attribut wird dann immer relativ zu diesem Paket angegeben (".HelloAndroidActivity"). Beachten Sie weiter, dass hier auch der minimale Android-API- Level angegeben wird, den Sie beim Erstellen des Projektes festgelegt haben. Dies ist die minimale API-Version, unter der die Anwendung lauffähig ist. Alle anderen Angaben werden Sie später verstehen. 7

8 4. Die Datei /gen/ch/fhnw/android/hello/r.java. Diese Datei wird laufend vom Android System angepasst und sollte nie vom Programmierer geändert werden. Das Ergebnis ist eine Java-Klasse R. Diese Klasse enthält nur statische innere Klassen und Attribute. Sie liefert den Index oder ID (als integer-wert) der verschiedenen Ressourcen, sodass man vom Java Code aus auf die Ressourcen zugreifen kann. Sie erkennen hier sicher wieder main, app_name und hello_world. /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package ch.fhnw.android.hello; public final class R { public static final class attr { public static final class drawable { public static final int ic_action_search=0x7f020000; public static final int ic_launcher=0x7f020001; public static final class id { public static final int menu_settings=0x7f070000; public static final class layout { public static final int main=0x7f030000; public static final class menu { public static final int main=0x7f060000; public static final class string { public static final int app_name=0x7f040000; public static final int hello_world=0x7f040001; public static final int menu_settings=0x7f040002; public static final int title_activity_hello_android=0x7f040003; public static final class style { public static final int AppTheme=0x7f050000; 8

9 Anpassen der UI Oberfläche Die Komponenten der Oberfläche werden in Android in der Layout-Datei main.xml definiert. 1. Ändern Sie hier das RelativeLayout zu LinearLayout, und zwar in horizontaler Orientierung. Dies ordnet die verschiedenen UI-Komponenten auf dem Bildschirm von links nach rechts. 2. Definieren Sie den Knopf (Button), samt Breite, Höhe und dem Text, der auf dem Knopf stehen soll (in rot). Die Breite und Höhe ist mit "wrap_content" so definiert, sodass der Knopf nur so gross wird wie es nötig ist, um den gewünschten Text darauf darzustellen. Den eigentlichen Text werden Sie später spezifizieren. <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> Löschen Sie die automatisch-erstellte TextView und definieren Sie wie folgt (siehe rote und blaue Zeilen im Listing) eine Texteingabe (EditText). Beachten Sie, dass in diesem Beispiel die Breite der Texteingabe zwar gleich null ( 0dip ; dip=density-independet Pixel) gesetzt wird, der Wert (= 1 ) des Attributs android:layout_weight definiert aber, dass die Texteingabe im Endeffekt so breit wird, dass sie den ganzen restlichen Platz füllt. <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button" android:text="@string/button" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:id="@+id/text" android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" android:inputtype="textshortmessage" /> </LinearLayout> Was bedeutet das Attribut android:id="@+id/text"? Jedes View-Objekt in der XML-Datei (wie z.b. EditText oder Button), auf das wir im Code zugreifen wollen, muss mit einer integer-id verknüpft werden, damit es eindeutig identifizierbar ist. Wenn die Anwendung kompiliert wird, wird 9

10 dieser ID ein integer-wert zugewiesen. In der Layout XML-Datei wird sie aber normalerweise in Form einer Zeichenkette, als ein id Attribut, angegeben, wie z. B. bedeutet, dass der XML Parser den Rest der Zeichenkette parsen und expandieren soll und als eine ID resource identifizieren soll. Das (+)-Symbol deutet darauf hin, dass dies ein neuer Ressourcenname ist, der erstellt und in die resource Datei R.java eingetragen werden soll. Die ID-Zeichenkette der neu erstellten Texteingabe EditText lautet somit R.id.text. Sie haben vielleicht bemerkt, dass die automatisch-erstellte TextView kein android:id Attribut trug. Der Grund dafür ist, dass wenn man im Java Code auf eine Komponente nicht zugreifen will, muss sie im R.java nicht indexiert werden. Beachten Sie das Attribut in blau: android:inputtype="textshortmessage". Es ist wichtig für jede Texteingabe das Attribut android:inputtype genau zu definieren, welches Information über den Textinhalt, wie z. B. "text", "number", "text address", "textpassword", usw. liefert. Dies soll den verschiedenen möglichen Eingabemethoden, wie z. B. soft keyboard, Handschrift-Dekodierer usw., bei ihrer Arbeit helfen. Für mehr Information über die verschiedenen Eingabe Möglichkeiten, können Sie die Links: konsultieren. 4. Man kann direkt im main.xml das Layout anpassen. Z.B. fügen Sie einen Leerplatz von 10dip-Grösse rund um die Oberfläche zu (rot im Listing): <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dip" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" android:inputtype="textshortmessage" /> </LinearLayout> 5. Sie müssen noch den Knopftext spezifizieren. Sie haben sicher bemerkt, dass Eclipse einen Fehler in der main.xml Datei anzeigt. Das ist deswegen, da Sie die Zeichenkette, auf die in android:text = "@string/button" referiert wird, noch nicht definiert haben. Die Zeichenkette mit dem Namen button muss noch in die Datei strings.xml eingetragen werden (rot im Listing). 10

11 <resources> <string name="app_name">hello, Android</string> <string name="hello">hello, World!</string> <string name="button">click me!</string> <string name="menu_settings">settings</string> <string name="title_activity_hello_android">hello, Android</string> </resources> 6. Noch eine kleine Änderung in der strings.xml Datei. Ändern Sie den Namen der Zeichenkette hello_world in hello und ordnen Sie ihr den Text zu, den Sie in der Texteingabe sehen möchten, sobald Sie auf den Knopf drücken (in blau). 7. Schauen Sie sich jetzt Ihr Layout an. Wenn Sie den Tab Graphical Layout in der main.xml Datei anklicken, können Sie Ihr Layout betrachten, wie es auf dem Gerät, bzw. Emulator aussehen wird. 8. Schauen Sie sich noch einmal die automatisch-generierte Datei /gen/ch/fhnw/android/hello/r.java an. Sie werden neue Einträge, ähnlich wie die in rot markiert, sehen. 11

12 /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package ch.fhnw.android.hello; public final class R { public static final class attr { public static final class drawable { public static final int ic_action_search=0x7f020000; public static final int ic_launcher=0x7f020001; public static final class id { public static final int button=0x7f070000; public static final int menu_settings=0x7f070002; public static final int text=0x7f070001; public static final class layout { public static final int main=0x7f030000; public static final class menu { public static final int main=0x7f060000; public static final class string { public static final int app_name=0x7f040000; public static final int button=0x7f040002; public static final int hello=0x7f040001; public static final int menu_settings=0x7f040003; public static final int title_activity_hello_android=0x7f040004; public static final class style { public static final int AppTheme=0x7f050000; Schauen Sie sich die Webseite an, wenn Sie mehr über Layouts erfahren möchten. Anpassen der HelloAndroidActivity Klasse 1. Erstellen des Knopf- und Texteingabeobjekts in der Aktivität HelloAndroidActivity. Der Code setcontentview(r.layout.main) erstellt die Oberfläche mit all ihren Komponenten gemäss der Layout-Datei main.xml. Wenn man aber im Code auf einzelne Komponentenobjekte zugreifen will, muss man die entsprechenden Objekte mittels findviewbyid() finden und definieren. Darum müssen Sie zuerst die Objekte der Klasse Button und EditText finden, wobei Sie ihre R.id s benützen (in rot). 12

13 package ch.fhnw.android.hello; import android.app.activity; import android.os.bundle; import android.view.menu; import android.view.view; import android.widget.button; import android.widget.edittext; public class HelloAndroidActivity extends Activity { private EditText edittext; private Button public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); button = (Button) findviewbyid(r.id.button); edittext = (EditText)findViewById(R.id.text);... Bemerkung: Je nach Komplexität der Layout ist das Suchen der View via ID eine langatmige Angelegenheit, darum sollte bei wiederholten Zugriffen das Ergebnis der Suche in einer lokalen Variable gespeichert werden. 2. OnClickListener setzen. Setzen Sie einen OnClickListener auf den Knopf Click me!, sodass die Zeichenkette mit resource ID R.string.hello in der Texteingabe erscheint, sobald man auf den Knopf drückt. Damit die Anwendung auf das Anklicken des Knopfes reagiert, muss die onclick()-methode des View.OnClickListener implementiert public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); button = (Button) findviewbyid(r.id.button); edittext = (EditText)findViewById(R.id.text); button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { edittext.settext(r.string.hello); ); 13

14 Testen Sie die Applikation Jetzt können Sie Ihre este Anwendung laufen lassen. Klicken Sie in Eclipse mit dem rechten Mausknopf auf das Projekt HelloAndroidPrj. Wählen Sie Run As > Android Application. Bemerkung: In dieser kleinen Anwendung müssen Sie die AndroidManifest.xml Datei nicht verändern. 14

15 Sprachanpassung mit Hilfe von Ressourcen Je nach der gewählten Oberflächensprache oder der Hardware-Konfiguration des Geräts kann der Text, der auf der Oberfläche erscheint, einfach angepasst werden. Wie in diesem Beispiel gezeigt, genügt es zusätzliche res/values-verzeichnisse anzulegen, die mit einem speziellen Vermerk auf die entsprechende Sprache gekennzeichnet sind (z.b. valuesen, values-fr, values-it). Das Projekt in diesem Beispiel enthält somit je eine string resource Datei (string.xml) für Englisch, Französisch, Italienisch und eine Standard-Datei, die im values-verzeichnis abgelegt ist.. Eine Anleitung, wie die verschiedenen Verzeichnisse am besten anzulegen sind, finden Sie unter und mehr Informationen über Language Localization hier: Um die Sprache auf dem Emulator zu ändern, öffnen Sie die Anwendung Custom Locale, wählen Sie die entsprechende Locale und drücken Sie Select. 15