Lab 1 - FHNW
Werbung
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
4. Hier muss noch folgendes eingefüllt werden:
3
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
5. Dann, “Finish” anklicken.
Bemerkung: Sie können den ersten Teil der Android Selbstlerneinheit „Building Your First App“
auf http://developer.android.com/training/basics/firstapp/index.html konsultieren, um mehr über
die verschiedenen Einstellungen zu erfahren.
4
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
@Override
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/.
2.1. 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 Zeichen @
zeigt an, dass es sich um eine Ressource-ID handelt.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/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>
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
<string
<string
<string
.
name="app_name">Hello, Android</string>
name="hello_world">Hello world!</string>
name="menu_settings">Settings</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="http://schemas.android.com/apk/res/android"
package="ch.fhnw.android.hello"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="15"/>
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".HelloAndroidActivity"
android:label="@string/title_activity_hello_android" >
<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-APILevel 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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/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" />
...
</LinearLayout>
3. 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="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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.
android:id="@+id/text". Das @-Symbol 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",
"textEmailAddress",
"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:
http://android-developers.blogspot.ch/2009/04/updating-applications-for-on-screen.html
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="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dip" >
<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>
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
<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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
/* 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 http://developer.android.com/guide/topics/ui/declaring-layout.html
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
package ch.fhnw.android.hello;
import
import
import
import
import
import
android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.View;
android.widget.Button;
android.widget.EditText;
public class HelloAndroidActivity extends Activity {
private EditText editText;
private Button button;
@Override
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 werden.
@Override
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
MAS Embedded Software HS12
Prof. Dr. Carlo Nicola
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
http://developer.android.com/resources/tutorials/localization/index.html und mehr Informationen
über Language Localization hier:
http://developer.android.com/guide/topics/resources/localization.html.
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
