Mobile App Development

Mobile App
Development
- Grafische Oberflächen -
Inhalt
• Ressourcen
• Allgemeines
• Views
• Layouting
Mobile App Development
Ressourcen
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
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
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
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
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
Android Ressourcen
• Bilder
public static final class drawable {!
public static final int ! ! ! ! ! ic_launcher=0x7f020000;!
}
Mobile App Development
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
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
GUIs
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
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
ViewGroup
• ViewGroup
• unsichtbarer Container, der andere Views
oder ViewGroups aufnimmt
• ... und diese positioniert
• Oberklasse von Containern
• LinearLayout, GridLayout, ListView
Mobile App Development
View Hierarchie
• View und ViewGroups bilden eine
Hierarchie, d.h. einen Baum von Views
Mobile App Development
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
Views
Bu?on View
• Button besteht aus einem Text und/oder
einem Icon
• Bei Klick wird irgendeine Aktion ausgeführt
Mobile App Development
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
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
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
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
Bu?on View
• Möglichkeit 2
Mobile App Development
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
EditText View
• EditText Views ermöglichen dem Benutzer die Eingabe von Text
Mobile App Development
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
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
EditText View
• Input type Beispiele
Klasse
Text
Variation CapSentence
Mobile App Development
Number
Text
Decimal
Password
EditText View
• Input type setzen
Mobile App Development
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
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
EditText View
actionNext
Mobile App Development
actionDone
actionSend
EditText View
actionNone
Mobile App Development
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
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
EditText View
• ... und noch mehr Eigenschaften
• Text style, typeface, size
• Line spacing
• Text color, hint color
• ...
Mobile App Development
CheckBox View
• Eine CheckBox ermöglicht dem Benutzer eine mit ihr verknüpfte Eigenschaft auf true oder false zu setzen.
Mobile App Development
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
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
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
CheckBox View
• Möglichkeit 1
Mobile App Development
Bu?on View
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name, wie in XML <CheckBox"
android:id="@+id/checkBox1""
android:checked="true""
android:onClick="onBeerBoxClicked""
android:text="@string/beer" />
• public-Zugriff
• void return Wert
• genau ein Parameter:View
Mobile App Development
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
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
RadioBu?on View
• RadioButtons ermöglichen dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.
Mobile App Development
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
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
RadioBu?on View
<RadioGroup"
android:id="@+id/radioGroup1""
android:orientation="vertical" >"
!
• auf Auswahl reagieren
!
• Angabe der
Activity-Methode!
!
<RadioButton"
android:id="@+id/radio0""
android:checked="true""
android:text="@string/mada"
android:onClick="onSelect"/>"
<RadioButton"
android:id="@+id/radio1""
android:text="@string/ikonzepte""
android:onClick="onSelect" />"
<RadioButton"
android:id="@+id/radio2""
android:text="@string/prakSchalt"
android:onClick="onSelect"/>"
</RadioGroup>
Mobile App Development
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
ProgressBar View
• ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen
Mobile App Development
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
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
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
ProgressBar View
• Spezielle ProgressBars
• RatingBar
• Verwendung zur Dar-
stellung einer Bewertung
• SeekBar
• Verwendung zum Setzen eines Wertes (z. B. Lautstärke)
Mobile App Development
Spinner View
• Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.
Mobile App Development
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
Spinner View
• Wo kommen die Superhelden her und wie
wird der Spinner gefüllt?
Mobile App Development
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
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
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
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
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
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
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
List View
• ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen
Mobile App Development
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
List 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
String-­‐Array
• 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
String-­‐Array
•
!
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
List View • 2. Situation: Elemente erst zur Laufzeit bekannt
• Verwendung eines Adapters, um die Liste
zur Laufzeit zu befüllen
Mobile App Development
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
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
LayouKng
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
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
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
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
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
LinearLayout
• Ein LinearLayout richtet seine
Kindelemente entlang einer bestimmt
Richtung aus
• Diese Richtung (Orientierung) kann
horizontal und vertikal sein
Mobile App Development
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
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
LinearLayout
• Beispiel Layout-Parameter weight
weight
weight
weight
TextField
-
-
1
EditText
-
1
2
Button
-
-
3
Mobile App Development
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
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
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
TableLayout
• Shrink-Attribut
<TableLayout ..."
android:shrinkColumns="*">"
!
"
!
"
<TableRow"
android:id="@+id/tableRow1">"
" ..."
</TableRow>"
....
Mobile App Development
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
TableLayout
• Stretch-Attribut
<TableLayout ..."
android:stretchColumns="0""
android:stretchColumns="1,2""
android:stretchColumns="*" "
>"
!
<TableRow ...>"
..."
</TableRow>"
</TableLayout>
Mobile App Development
RelaKveLayout
• RelativeLayout wird verwendet, um Views
relativ zu einander auszurichten
• Nachteil: kompliziertes Layout • Vorteil: sehr flache View-Hierarchie und
dadurch bessere Performance
Mobile App Development
RelaKveLayout
<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
RelaKveLayout
• RelativeLayout.LayoutParams
http://developer.android.com/reference/android/widget/
RelativeLayout.LayoutParams.html
Mobile App Development
RelaKveLayout
• RelativeLayout.LayoutParams
http://developer.android.com/reference/android/widget/
RelativeLayout.LayoutParams.html
Mobile App Development
<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
<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
<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
PrakKkum
Übung
Übung 01 - Taschenrechner
Es soll eine Taschenrechner-App erstellt werden, mit der einfache Berech-
nungen durchgeführt werden können. !
Die App soll mindestens die Grundrechenarten Addition, Subtraktion, Mul-
tiplikation 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 ver-
wenden.!
Für die Entwicklung der App sollen die in der Vorlesung vorgestellten View- !
und 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.!
!
Mobile App Development
Literatur
I.
II.
III.
Arno Becker, Marcus Pant, Android 4.4, 3.Auflage,
dpunkt.verlag, ISBN: 978-89864-809-7
Thomas Künneth: Android 3 - Apps entwickeln mit dem
Android SDK
Galileo Press, 2011
Mark L. Murphy, Commonsware, The Busy Coder’s Guide
to Android Development
IV. http://developer.android.com
V. http://www.androidpit.de/de/android/wiki