" android:id="@+
Werbung
Mobile App
Development
- Grafische Oberflächen -
Mittwoch, 23. Oktober 13
Inhalt
• Ressourcen
• Allgemeines
• Views
• Layouting
Mobile App Development
Mittwoch, 23. Oktober 13
Ressourcen
Mittwoch, 23. Oktober 13
Android Ressourcen
• Ressourcen sind Dateien
und Objekte, wie Layouts,
Bilder, Farben und IDs
• Zu jeder Ressource wird
ein Eintrag in R.java
generiert
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
public final class R {
public static final class color {
public static final int black=0x7f040000;
}
public static final class drawable {
public static final int ic_launcher=0x7f020000;
}
public static final class id {
public static final int LinearLayout1=0x7f080000;
public static final int btnSayHello=0x7f080004;
public static final int edtName=0x7f080003;
public static final int imageView1=0x7f080001;
public static final int menu_settings=0x7f080005;
public static final int txtEnterName=0x7f080002;
}
public static final class layout {
public static final int activity_main=0x7f030000;
public static final int test_activity=0x7f030001;
}
public static final class menu {
public static final int activity_main=0x7f070000;
}
public static final class string {
public static final int app_name=0x7f050000;
public static final int hello_world=0x7f050001;
}
}
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
• Farben
res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#00000000</color>
<color name="green">#0000FF00</color>
</resources>
public final class R {
public static final class color {
public static final int black=0x7f040000;
public static final int green=0x7f040001;
}
}
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
• Strings
res/values/strings.xml
<resources>
<string name="app_name">Hello World</string>
<string name="hello_world">Hello world!</string>
</resources>
public static final class string {
public static final int app_name=0x7f050000;
public static final int hello_world=0x7f050001;
}
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
• Layouts
public static final class layout {
public static final int
! ! ! activity_main=0x7f030000;
public static final int
! ! ! test_activity=0x7f030001;
}
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
• Bilder
public static final class drawable {
public static final int
! ! ! ! ! ic_launcher=0x7f020000;
}
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
• IDs
res/layout/activity_main.xml
<LinearLayout xmlns:android="..."
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1" >
<TextView
android:id="@+id/txtEnterName"
android:text="@string/name"
android:textColor="@color/black"
/>
<Button
android:id="@+id/btnSayHello"
android:text="@string/say" />
</LinearLayout>
public final class R {
public static final class id {
public static final int LinearLayout1=0x7f080000;
public static final int btnSayHello=0x7f080004;
public static final int name=0x7f080002;
}
Mobile App Development
Mittwoch, 23. Oktober 13
Android Ressourcen
• Verwendung im Quelltext
• Die Attribute, die in der R.java angelegt
wurden, können vom Quelltext aus als
Referenz-ID verwendet werden
• Beispiel:
Button btn = (Button) findViewById(R.id.btnSayHello);
btn.setText(R.string.sayHello);
btn.setBackgroundColor(R.color.green);
Mobile App Development
Mittwoch, 23. Oktober 13
GUIs
Mittwoch, 23. Oktober 13
Grafische Oberflächen
• Grafische Oberflächen können in Android
auf zwei Arten erstellt werden
• in Form von XML-Layout-Dateien, aus
denen zur Laufzeit Views erstellt werden
(LayoutInflater)
• oder programmatisch wie z.B. in Swing
• Wenn möglich sollten Layout-Dateien
verwendet werden (res/layout)
Mobile App Development
Mittwoch, 23. Oktober 13
View
• View (Widget)
• zeichnet etwas auf dem Screen
• grafisches Element, mit dem der Benutzer
interagieren kann
• Oberklasse von allen Standard Controls
• Button, TextField, ProgressBar,
ImageView
Mobile App Development
Mittwoch, 23. Oktober 13
ViewGroup
• ViewGroup
• unsichtbarer Container, der andere Views
oder ViewGroups aufnimmt
• ... und diese positioniert
• Oberklasse von Containern
• LinearLayout, GridLayout, ListView
Mobile App Development
Mittwoch, 23. Oktober 13
View Hierarchie
• View und ViewGroups bilden eine
Hierarchie, d.h. einen Baum von Views
Mobile App Development
Mittwoch, 23. Oktober 13
Beispiel Hello World
<LinearLayout
!
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
!
... >
<ImageView
android:id="@+id/imageView1"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/txtEnterName"
android:text="@string/name" />
<EditText
android:id="@+id/edtName"
android:inputType="textCapWords" />
</LinearLayout>
<Button
android:id="@+id/btnSayHello"
android:layout_gravity="center_horizontal"
android:text="@string/say" />
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Views
Mittwoch, 23. Oktober 13
Bu?on View
• Button besteht aus einem Text und/oder
einem Icon
• Bei Klick wird irgendeine Aktion ausgeführt
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Button besteht aus einem Text
und/oder einem Icon
• Bei Klick wird irgendeine
Aktion ausgeführt
• XML
<Button
android:id="@+id/btnMyButton"
android:text="@string/btnText"
android:drawableLeft="@drawable/ic_launcher" />
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• auf Klicks reagieren
• Möglichkeit 1:
• in der Activity einen OnClickListener
erstellen und am Button registrieren
• Möglichkeit 2:
• Angabe einer aufzurufenden Methode
während GUI Design
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 1
• programmatische Zuweisung einer
OnClickListener-Implementierung
Button btn = (Button) findViewById(R.id.btnSayHello);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
! ! ! /*
! ! !
* Button action code
! ! !
*/
! ! }
! });
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
• Angabe einer Methode, die in der Activity
ausgeführt werden soll, wenn der Button
geklickt wurde
• Achtung: die Methode muss in der
Activity auch implementiert sein
<Button
android:id="@+id/btnSayHello"
android:onClick="clickAction"
android:text="@string/say" />
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
• Implementierung der Methode
• gleicher Name,
wie in XML
<Button
android:id="@+id/btnSayHello"
android:onClick="clickAction"
android:text="@string/say" />
• public-Zugriff
• void return Wert
• genau 1 Parameter:View
public void clickAction(View view) {
// do Button action
}
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
• Implementierung der Methode
• gleicher Name,
wie in XML
<Button
android:id="@+id/btnSayHello"
android:onClick="clickAction"
android:text="@string/say" />
• public-Zugriff
• void return Wert
• genau 1 Parameter:View
public void clickAction(View view) {
// do Button action
}
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
• Implementierung der Methode
• gleicher Name,
wie in XML
<Button
android:id="@+id/btnSayHello"
android:onClick="clickAction"
android:text="@string/say" />
• public-Zugriff
• void return Wert
• genau 1 Parameter:View
public void clickAction(View view) {
// do Button action
}
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
• Implementierung der Methode
• gleicher Name,
wie in XML
<Button
android:id="@+id/btnSayHello"
android:onClick="clickAction"
android:text="@string/say" />
• public-Zugriff
• void return Wert
• genau 1 Parameter:View
public void clickAction(View view) {
// do Button action
}
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 2
• Implementierung der Methode
• gleicher Name,
wie in XML
<Button
android:id="@+id/btnSayHello"
android:onClick="clickAction"
android:text="@string/say" />
• public-Zugriff
• void return Wert
• genau 1 Parameter:View
public void clickAction(View view) {
// do Button action
}
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• EditText Views ermöglichen
dem Benutzer die Eingabe
von Text
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• EditText Views ermöglichen
dem Benutzer die Eingabe
von Text
• Tastatur öffnet sich
automatisch nach Touch
• XML
<EditText
android:id="@+id/edtName"
android:inputType="textCapWords"
android:imeOptions="actionSend">
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• Input type
• gibt an, welche Art von Text eingegeben
werden soll, z. B. Plain, EMail, Password
• Textarten werden in Klassen eingeteilt
• Variation von Textklassen
• beeinflusst das Keyboard-Verhalten, z. B.
erster Buchstabe groß, multi line
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• Input type Beispiele
Klasse
Text
Variation CapSentence
Mobile App Development
Mittwoch, 23. Oktober 13
Number
Text
Decimal
Password
EditText View
• Input type setzen
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• Input type setzen
• XML
<EditText
! android:id="@+id/edtName"
! android:inputType="textCapWords|textNoSuggestions" />
• programmatisch
EditText edtName = (EditText) findViewById(R.id.edtName);
edtName.setInputType(InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
! ! | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• Keyboard action
• gibt an, welcher Button an Stelle des
Return-Buttons in der Tastatur angezeigt
werden soll
• XML
<EditText
android:id="@+id/myEditText"
android:imeOptions="actionNone"
android:singleLine="true" />
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
actionNext
Mobile App Development
Mittwoch, 23. Oktober 13
actionDone
actionSend
EditText View
actionNone
Mobile App Development
Mittwoch, 23. Oktober 13
actionGo
actionSearch
EditText View
• Auf Keyboard action reagieren
EditText txt = (EditText) findViewById(R.id.EditText01);
txt.setOnEditorActionListener(new TextView.OnEditorActionListener() {
! ! @Override
! ! public boolean onEditorAction(
TextView v, int actionId, KeyEvent event) {
! ! ! boolean handled = false;
! ! ! !
! !
! !
});
!
}
return handled;
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• Weitere Eigenschaften
• Hint text
<EditText ...
android:hint="Hint Text">
• Lines
<EditText ...
android:lines="3">
• Bilder
<EditText ...
android:drawableLeft
! ! ="@drawable/ic_launcher">
Mobile App Development
Mittwoch, 23. Oktober 13
EditText View
• ... und noch mehr Eigenschaften
• Text style, typeface, size
• Line spacing
• Text color, hint color
• ...
Mobile App Development
Mittwoch, 23. Oktober 13
CheckBox View
• Eine CheckBox ermöglicht
dem Benutzer eine mit ihr
verknüpfte Eigenschaft auf
true oder false zu setzen.
Mobile App Development
Mittwoch, 23. Oktober 13
CheckBox View
• Eine CheckBox ermöglicht
dem Benutzer eine mit ihr
verknüpfte Eigenschaft auf
true oder false zu setzen.
• XML
<CheckBox
android:id="@+id/chbBeer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/beer" />
Mobile App Development
Mittwoch, 23. Oktober 13
CheckBox View
• auf CheckBox Klicks reagieren
• Möglichkeit 1
• Angabe einer Methode die in der
Activity ausgeführt werden soll, wenn
der Button geklickt wurde
• Möglichkeit 2
• programmatische Zuweisung eines
OnClickListeners
Mobile App Development
Mittwoch, 23. Oktober 13
CheckBox View
• Möglichkeit 1
• Angabe einer Methode, die in der Activity
ausgeführt werden soll, wenn die
CheckBox geklickt wurde
<CheckBox
android:id="@+id/checkBox1"
android:checked="true"
android:onClick="onBeerBoxClicked"
android:text="@string/beer" />
Mobile App Development
Mittwoch, 23. Oktober 13
CheckBox View
• Möglichkeit 1
Mobile App Development
Mittwoch, 23. Oktober 13
Bu?on View
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name,
wie in XML
• public-Zugriff
• void return Wert
• genau ein
Parameter:View
Mobile App Development
Mittwoch, 23. Oktober 13
<CheckBox
android:id="@+id/checkBox1"
android:checked="true"
android:onClick="onBeerBoxClicked"
android:text="@string/beer" />
public void onBeerBoxClicked(View view) {
! CheckBox cb = (CheckBox)
! ! findViewById(R.id.checkBox1);
! if (cb.isSelected()) {
! ! /* do something */
! } else {
! ! /* do the other things */
! }
}
Bu?on View
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name,
wie in XML
• public-Zugriff
• void return Wert
• genau ein
Parameter:View
Mobile App Development
Mittwoch, 23. Oktober 13
<CheckBox
android:id="@+id/checkBox1"
android:checked="true"
android:onClick="onBeerBoxClicked"
android:text="@string/beer" />
public void onBeerBoxClicked(View view) {
! CheckBox cb = (CheckBox)
! ! findViewById(R.id.checkBox1);
! if (cb.isSelected()) {
! ! /* do something */
! } else {
! ! /* do the other things */
! }
}
Bu?on View
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name,
wie in XML
• public-Zugriff
• void return Wert
• genau ein
Parameter:View
Mobile App Development
Mittwoch, 23. Oktober 13
<CheckBox
android:id="@+id/checkBox1"
android:checked="true"
android:onClick="onBeerBoxClicked"
android:text="@string/beer" />
public void onBeerBoxClicked(View view) {
! CheckBox cb = (CheckBox)
! ! findViewById(R.id.checkBox1);
! if (cb.isSelected()) {
! ! /* do something */
! } else {
! ! /* do the other things */
! }
}
Bu?on View
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name,
wie in XML
• public-Zugriff
• void return Wert
• genau ein
Parameter:View
Mobile App Development
Mittwoch, 23. Oktober 13
<CheckBox
android:id="@+id/checkBox1"
android:checked="true"
android:onClick="onBeerBoxClicked"
android:text="@string/beer" />
public void onBeerBoxClicked(View view) {
! CheckBox cb = (CheckBox)
! ! findViewById(R.id.checkBox1);
! if (cb.isSelected()) {
! ! /* do something */
! } else {
! ! /* do the other things */
! }
}
Bu?on View
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name,
wie in XML
• public-Zugriff
• void return Wert
• genau ein
Parameter:View
Mobile App Development
Mittwoch, 23. Oktober 13
<CheckBox
android:id="@+id/checkBox1"
android:checked="true"
android:onClick="onBeerBoxClicked"
android:text="@string/beer" />
public void onBeerBoxClicked(View view) {
! CheckBox cb = (CheckBox)
! ! findViewById(R.id.checkBox1);
! if (cb.isSelected()) {
! ! /* do something */
! } else {
! ! /* do the other things */
! }
}
CheckBox View
• Möglichkeit 2
• programmatische Zuweisung eines
OnClickListeners
CheckBox cbBeer = (CheckBox) findViewById(R.id.cbBeer);
cbBeer.setOnClickListener(new View.OnClickListener() {
! ! @Override
! ! public void onClick(View v) {
! ! ! CheckBox cb = (CheckBox) v;
! ! ! if (cb.isChecked()) {
! ! ! ! /* do something */
! ! ! ! Toast.makeText(MainActivity.this,
! ! ! ! ! ! "Beer clicked", Toast.LENGTH_LONG).show();
! ! ! } else {
! ! ! ! /* do the other things */
! ! ! }
! ! }
! });
Mobile App Development
Mittwoch, 23. Oktober 13
CheckBox View
• Möglichkeit 2
• Alternative: programmatische Zuweisung
eines OnCheckedChangeListener
cbBeer.setOnCheckedChangeListener(new OnCheckedChangeListener() {
! @Override
! public void onCheckedChanged(
! ! CompoundButton buttonView, boolean isChecked) {
! ! ! /* do your stuff */
! ! }
});
Mobile App Development
Mittwoch, 23. Oktober 13
RadioBu?on View
• RadioButtons ermöglichen
dem Benutzer die Auswahl
einer Option aus mehreren
verschiedenen.
Mobile App Development
Mittwoch, 23. Oktober 13
RadioBu?on View
• Optionen, die durch RadioButton
repräsentiert werden, schließen sich
gegenseitig aus (mutually exclusiv)
• RadioButtons werden in RadioGroups
zusammengefasst
Mobile App Development
Mittwoch, 23. Oktober 13
RadioBu?on View
• XML
<RadioGroup
android:id="@+id/radioGroup1"
android:orientation="vertical" >
<RadioButton
android:id="@+id/radio0"
android:checked="true"
android:text="@string/mada"/>
<RadioButton
android:id="@+id/radio1"
android:text="@string/ikonzepte" />
<RadioButton
android:id="@+id/radio2"
android:text="@string/prakSchalt" />
</RadioGroup>
Mobile App Development
Mittwoch, 23. Oktober 13
RadioBu?on View
<RadioGroup
android:id="@+id/radioGroup1"
android:orientation="vertical" >
• auf Auswahl
<RadioButton
android:id="@+id/radio0"
android:checked="true"
android:text="@string/mada"
android:onClick="onSelect"/>
• Angabe der
<RadioButton
android:id="@+id/radio1"
android:text="@string/ikonzepte"
android:onClick="onSelect" />
reagieren
Activity-Methode
<RadioButton
android:id="@+id/radio2"
android:text="@string/prakSchalt"
android:onClick="onSelect"/>
</RadioGroup>
Mobile App Development
Mittwoch, 23. Oktober 13
RadioBu?on View
• Implementierung in Activity
• Regeln für Signatur analog zu Button und
CheckBox
public void onSelect(View view) {
! switch (view.getId()) {
! ! case R.id.radio0:
! ! ! /* MADA selected */
! ! ! break;
! ! case R.id.radio1:
! ! ! /* IKZ selected */
! ! ! break;
! ! case R.id.radio2:
! ! ! /* prakt. Schalt. selected */
! ! ! break;
! }
}
Mobile App Development
Mittwoch, 23. Oktober 13
ProgressBar View
• ProgressBars werden
verwendet, um den
Fortschritt einer
Operation anzuzeigen
Mobile App Development
Mittwoch, 23. Oktober 13
ProgressBar View
• ProgressBars werden
verwendet, um den
Fortschritt einer
Operation anzuzeigen
<ProgressBar
android:id="@+id/progressBar1"
style=
! "@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="70" />
Mobile App Development
Mittwoch, 23. Oktober 13
ProgressBar View
• style Attribute bestimmt
die Form der ProgressBar
<ProgressBar
android:id="@+id/progressBar1"
style=
! "@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="70" />
Mobile App Development
Mittwoch, 23. Oktober 13
ProgressBar View
• max = Anzahl Ticks
• progress = aktuelle Ticks
<ProgressBar
android:id="@+id/progressBar1"
style=
! "@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:progress="70" />
Mobile App Development
Mittwoch, 23. Oktober 13
ProgressBar View
• Spezielle ProgressBars
• RatingBar
• Verwendung zur Dar-
stellung einer Bewertung
• SeekBar
• Verwendung zum Setzen
eines Wertes
(z. B. Lautstärke)
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Eine Spinner View erlaubt
dem Benutzer die Auswahl
eines einzelnen Elements
aus einer Menge.
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Eine Spinner View erlaubt
dem Benutzer die Auswahl
eines einzelnen Elements
aus einer Menge.
• XML
<Spinner
android:id="@+id/mySpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
... />
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Wo kommen die Superhelden her und wie
wird der Spinner gefüllt?
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Wo kommen die Superhelden her und wie
wird der Spinner gefüllt?
• 1. Situation:
Elemente sind zur Compile-Zeit bekannt
• 2. Situation:
Elemente sind zur Compile-Zeit noch
nicht bekannt
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Sind die Elemente zur Compile-Zeit
bekannt, können sie in einer ArrayResource eingetragen und verwendet
werden.
• Was sind Array-Resourcen?
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Definition eines String arrays
• res/values/strings.xml
<resources>
<string name="app_name">Test</string>
<string name="hello_world">Hello world!</string>
... ...
<string-array name="spinner_values">
<item >Superman</item>
<item >Batman</item>
<item >Spiderman</item>
<item >Flash</item>
</string-array>
</resources>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Zuweisung des
String arrays an
den Spinner
res/values/strings.xml
<resources>
...
<string-array name="spinner_values">
<item >Superman</item>
<item >Batman</item>
<item >Spiderman</item>
<item >Flash</item>
</string-array>
</resources>
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="..."
! ...
! <Spinner
! ! android:id="@+id/mySpinner"
! ! android:entries="@array/spinner_values"/>
! ...
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Zuweisung des
String arrays an
den Spinner
res/values/strings.xml
<resources>
...
<string-array name="spinner_values">
<item >Superman</item>
<item >Batman</item>
<item >Spiderman</item>
<item >Flash</item>
</string-array>
</resources>
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="..."
! ...
! <Spinner
! ! android:id="@+id/mySpinner"
! ! android:entries="@array/spinner_values"/>
! ...
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Zuweisung des
String arrays an
den Spinner
res/values/strings.xml
<resources>
...
<string-array name="spinner_values">
<item >Superman</item>
<item >Batman</item>
<item >Spiderman</item>
<item >Flash</item>
</string-array>
</resources>
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="..."
! ...
! <Spinner
! ! android:id="@+id/mySpinner"
! ! android:entries="@array/spinner_values"/>
! ...
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• 2. Situation:
Elemente erst zur Laufzeit bekannt
• Verwendung von Adaptern
• Adapter bilden Brücke zwischen sog.
AdapterViews und den darzustellenden
Daten
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Verwendung eines ArrayAdapters
/* Erstellung eines Adapters */
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
! ! ! ! this, android.R.layout.simple_spinner_item);
/* Datenelemente hinzufügen */
adapter.add("Superman");
adapter.add("Batman");
adapter.add("Spiderman");
adapter.add("Flash");
/* Spinner Instanz holen */
Spinner s = (Spinner) findViewById(R.id.mySpinner);
/* Adapter für den Spinner festlegen */
s.setAdapter(adapter);
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Auf eine Auswahl reagieren
Spinner spinner =
! (Spinner) findViewById(R.id.mySpinner);
spinner.setOnItemSelectedListener(
! new AdapterView.OnItemSelectedListener() {
!
!
!
!
!
!
!
!
@Override
public void onItemSelected(
! ! AdapterView<?> parent,
! ! View view, int pos, long id) {
! // TODO: implement me
! String str = (String) ! ! !
! ! parent.getItemAtPosition(pos);
}
! @Override
! public void onNothingSelected(
! ! ! AdapterView<?> parent) {
! ! // TODO: implement me
! }!
});
Mobile App Development
Mittwoch, 23. Oktober 13
List View
• ListViews werden
verwendet, um mehrere
Elemente in einer
vertikalen Liste
darzustellen
Mobile App Development
Mittwoch, 23. Oktober 13
List View
• ListViews werden
verwendet, um mehrere
Elemente in einer
vertikalen Liste
darzustellen
• XML
<ListView
android:id="@+id/listView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:entries="@array/list_values" >
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Wie wird die Liste befüllt? analog zur
SpinnerView
• 1. Situation:
Elemente sind zur Compile-Zeit bekannt
• 2. Situation:
Elemente sind zur Compile-Zeit noch
nicht bekannt
Mobile App Development
Mittwoch, 23. Oktober 13
List View
• Definition eines String arrays
• res/values/strings.xml
<resources>
<string name="app_name">Test</string>
<string name="hello_world">Hello world!</string>
... ...
<string-array name="list_values">
<item >Brot</item>
<item >Schinken</item>
<item >Käse</item>
<item >Butter</item>
<item >Bier</item>
</string-array>
</resources>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
•
Zuweisung des
String arrays an
die Liste
res/layout/activity_main.xml
res/values/strings.xml
<resources>
...
<string-array name="list_values">
<item >Brot</item>
<item >Schinken</item>
<item >Käse</item>
<item >Butter</item>
<item >Bier</item>
</string-array>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="..."
! ...
! <ListView
! ! android:id="@+id/myList"
! ! android:entries="@array/list_values"/>
! ...
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
•
Zuweisung des
String arrays an
die Liste
res/layout/activity_main.xml
res/values/strings.xml
<resources>
...
<string-array name="list_values">
<item >Brot</item>
<item >Schinken</item>
<item >Käse</item>
<item >Butter</item>
<item >Bier</item>
</string-array>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="..."
! ...
! <ListView
! ! android:id="@+id/myList"
! ! android:entries="@array/list_values"/>
! ...
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
•
Zuweisung des
String arrays an
die Liste
res/layout/activity_main.xml
res/values/strings.xml
<resources>
...
<string-array name="list_values">
<item >Brot</item>
<item >Schinken</item>
<item >Käse</item>
<item >Butter</item>
<item >Bier</item>
</string-array>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="..."
! ...
! <ListView
! ! android:id="@+id/myList"
! ! android:entries="@array/list_values"/>
! ...
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• 2. Situation:
Elemente erst zur Laufzeit bekannt
• Verwendung eines Adapters, um die Liste
zur Laufzeit zu befüllen
Mobile App Development
Mittwoch, 23. Oktober 13
Spinner View
• Verwendung eines Adapters, um die Liste
zur Laufzeit zu befüllen
ArrayAdapter<String> adapter =
! ! ! new ArrayAdapter<String>(this,
! ! ! ! ! android.R.layout.simple_list_item_1);
adapter.add("Brot");
adapter.add("Schinken");
adapter.add("Käse");
! !
ListView lv = (ListView) findViewById(R.id.listView1);
lv.setAdapter(adapter);
Mobile App Development
Mittwoch, 23. Oktober 13
List View
• Auf Element Klicks reagieren
ListView lv = (ListView) findViewById(
! ! R.id.myListView);
! !
lv.setOnItemClickListener(
! new AdapterView.OnItemClickListener() {
! ! @Override
! ! public void onItemClick(
! ! ! AdapterView<?> list,
! ! ! View view, int pos, long id) {
! ! ! ! /* do your stuff here */
! ! }
});
Mobile App Development
Mittwoch, 23. Oktober 13
LayouJng
Mittwoch, 23. Oktober 13
Layouts
• Layouts ...
• sind ViewGroups (Container)
• können andere ViewGroups und Views
aufnehmen
• werden verwendet, um ihre
Kindelemente auf dem Screen zu
positionieren
Mobile App Development
Mittwoch, 23. Oktober 13
Layout Parameter
• Jede View besitzt Layout-Parameter, die der
umgebenden ViewGroup mitteilen, wie die
View in Position und Größe dargestellt
werden soll.
• Je nach umgebender View werden
verschiedene Layout-Parameter verwendet.
Mobile App Development
Mittwoch, 23. Oktober 13
Layout Parameter
• Beispiel
<Button
! android:id="@+id/myButton"
! android:layout_width="wrap_content"
! android:layout_height="wrap_content"
! android:text="Button" />
<Button
! android:id="@+id/myButton"
! android:layout_width="wrap_content"
! android:layout_height="fill_parent"
! android:text="Button" />
<Button
! android:id="@+id/myButton"
! android:layout_width="fill_parent"
! android:layout_height="fill_parent"
! android:text="Button" />
Mobile App Development
Mittwoch, 23. Oktober 13
FrameLayout
• wird in der Regel verwendet,
um ein Element darzustellen
• Layout-Attribut gravity
<FrameLayout xmlns:android=
! ! "http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="@+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/mybutton" />
</FrameLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
FrameLayout
auch mehrere, gestapelte Views
• kann
enthalten
• Darstellung nach Einfügereihenfolge
<FrameLayout xmlns:android=
! ! "http://schemas.android.com/apk/res/android"
! android:layout_width="fill_parent"
! android:layout_height="fill_parent" >
! <TextView android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/lorem" />
<Button android:id="@+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button" />
</FrameLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
LinearLayout
• Ein LinearLayout richtet seine
Kindelemente entlang einer bestimmt
Richtung aus
• Diese Richtung (Orientierung) kann
horizontal und vertikal sein
Mobile App Development
Mittwoch, 23. Oktober 13
LinearLayout
• Orientierung
<LinearLayout xmlns:android="..."
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:text="@string/enter"/>
<EditText
android:id="@+id/editText1"
android:layout_width="0dip"
android:layout_height="wrap_content"/ >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/mybutton" />
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
LinearLayout
• Orientierung
<LinearLayout xmlns:android="..."
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:text="@string/enter"/>
<EditText
android:id="@+id/editText1"
android:layout_width="0dip"
android:layout_height="wrap_content"/ >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/mybutton" />
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
LinearLayout
• Orientierung
<LinearLayout xmlns:android="..."
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:text="@string/enter"/>
<EditText
android:id="@+id/editText1"
android:layout_width="0dip"
android:layout_height="wrap_content"/ >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/mybutton" />
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
LinearLayout
• Layout-Parameter weight
• gibt an, wie groß eine View im Verhältnis
zu anderen Views dargestellt werden soll
• nicht ausgefüllter Platz im parent wird
zwischen den Views gemäß dem
Verhältnis ihrer weight Werte verteilt
<EditText
android:id="@+id/myEditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2" >
Mobile App Development
Mittwoch, 23. Oktober 13
LinearLayout
• Beispiel Layout-Parameter weight
weight
weight
weight
TextField
-
-
1
EditText
-
1
2
Button
-
-
3
Mobile App Development
Mittwoch, 23. Oktober 13
TableLayout
• Das TableLayout richtet seine Kindelemente
in Form einer Tabelle aus, d. h. in Form von
Spalten und Zeilen
• Aufbau des Layouts ist sehr ähnlich zu
HTML-Tabellen (<tr>, <td>)
• Kindelemente werden in Zeilen und Zellen
gruppiert
Mobile App Development
Mittwoch, 23. Oktober 13
TableLayout
• Beispiel
!
<TableLayout android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1" >
<TextView
android:id="@+id/textView1"
android:text="Text1" />
<TextView
android:id="@+id/textView2"
android:text="Text2" />
</TableRow>
<TableRow android:id="@+id/tableRow2">
<Button
android:id="@+id/button1"
android:text="Button1" />
<Button
android:id="@+id/button2"
android:text="Button2" />
</TableRow>
</TableLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
TableLayout
• Shrink-Attribut
• gibt an, welche Spalten verkleinert
werden sollen, wenn der Platz nicht für
alle reicht
• mögliche Werte:
• Liste von Spaltenindizes
• * für alle Spalten
Mobile App Development
Mittwoch, 23. Oktober 13
TableLayout
• Shrink-Attribut
<TableLayout ...
android:shrinkColumns="*">
!
!
<TableRow
android:id="@+id/tableRow1">
! ...
</TableRow>
....
Mobile App Development
Mittwoch, 23. Oktober 13
TableLayout
• Stretch-Attribut
• gibt an, welche Spalten vergrößert
werden sollen, wenn mehr Platz als
benötigt zur Verfügung steht
• mögliche Werte:
• Liste von Spaltenindizes
• * für alle Spalten
Mobile App Development
Mittwoch, 23. Oktober 13
TableLayout
• Stretch-Attribut
<TableLayout ...
android:stretchColumns="0"
android:stretchColumns="1,2"
android:stretchColumns="*"
>
<TableRow ...>
...
</TableRow>
</TableLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
RelaJveLayout
• RelativeLayout wird verwendet, um Views
relativ zu einander auszurichten
• Nachteil: kompliziertes Layout
• Vorteil: sehr flache View-Hierarchie und
dadurch bessere Performance
Mobile App Development
Mittwoch, 23. Oktober 13
RelaJveLayout
<RelativeLayout xmlns:android="..."
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/textView1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<EditText
android:id="@+id/editText1"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/textView1"/ >
<Button
android:id="@+id/button1"
android:layout_alignRight="@+id/editText1"
android:layout_below="@+id/editText1"
android:text="@string/mybutton" />
</RelativeLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
RelaJveLayout
• RelativeLayout.LayoutParams
http://developer.android.com/reference/android/widget/
RelativeLayout.LayoutParams.html
Mobile App Development
Mittwoch, 23. Oktober 13
RelaJveLayout
• RelativeLayout.LayoutParams
http://developer.android.com/reference/android/widget/
RelativeLayout.LayoutParams.html
Mobile App Development
Mittwoch, 23. Oktober 13
<include/>
• Wiederverwendung von Layouts
• Oft ist es sinnvoll bestimmte Layouts
wieder zu verwenden, um Mehrarbeit zu
vermeiden
• Hierfür bietet Android das <include/>
Element
Mobile App Development
Mittwoch, 23. Oktober 13
<include/>
• Beispiel
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<Button
android:id="@+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/ok" />
<Button
android:id="@+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/cancel" />
</LinearLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
<include/>
• Beispiel
<RelativeLayout ... >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name"/>
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/textView1"/>
<include
android:id="@+id/include1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/ok_cancel" />
</RelativeLayout>
Mobile App Development
Mittwoch, 23. Oktober 13
PrakJkum
Mittwoch, 23. Oktober 13
Übung
Übung 01 - Taschenrechner
Es soll eine Taschenrechner-App erstellt werden, mit der einfache Berechnungen durchgeführt werden können.
Die App soll mindestens die Grundrechenarten Addition, Subtraktion, Multiplikation und Division unterstützen. Außerdem soll es möglich sein, mehr
als zwei Operanden und mehr als einen Operator einzugeben, sowie das
Ergebnis der Berechnung als Operand für die nächste Berechnung zu verwenden.
Für die Entwicklung der App sollen die in der Vorlesung vorgestellten Viewund ViewGroup-Elemente verwendet werden.
Hinweis:
Der Fokus dieser Übung liegt nicht auf der Auswertung mathematischer
Ausdrücke, sondern auf der Entwicklung einer funktionsfähigen Oberfläche.
Aus diesem Grund kann für die Auswertung und Berechnung der Ausdrücke
eine externe Bibliothek, wie bspw. http://www.objecthunter.net/exp4j
verwendet werden.
Die Abgabe der Übung findet nach der nächsten Veranstaltung statt.
Die Übungen werden werden in Gruppen von mindestens zwei Studierenden durchgeführt.
Mobile App Development
Mittwoch, 23. Oktober 13
Literatur
I. Sven Haiges: Android Schnelleinstieg
entwickler.press, 2011
II. Thomas Künneth: Android 3 - Apps
entwickeln mit dem Android SDK
Galileo Press, 2011
III. http://developer.android.com
IV. http://www.androidpit.de/de/android/wiki
Mittwoch, 23. Oktober 13
