Grafische Oberflächen
Werbung
Mobile App
Development
- Grafische Oberflächen -
Inhalt
• Ressourcen
• Allgemeines
• Views
• Layouting
Mobile App Development
ChristophKarls
Ressourcen
AndroidRessourcen
Mobile App Development
ChristophKarls
AndroidRessourcen
• Ressourcen sind Dateien und Objekte, wie Layouts, Bilder, Farben und IDs
• Zu jeder Ressource wird
ein Eintrag in R.java
generiert
Mobile App Development
ChristophKarls
AndroidRessourcen
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
ChristophKarls
AndroidRessourcen
• 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
ChristophKarls
AndroidRessourcen
• 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
ChristophKarls
AndroidRessourcen
• Layouts
public static final class layout {
public static final int activity_main=0x7f030000;
public static final int
content_main=0x7f030001;
}
Mobile App Development
ChristophKarls
AndroidRessourcen
• Bilder
public static final class drawable {
public static final int ic_launcher=0x7f020000;
}
Mobile App Development
ChristophKarls
AndroidRessourcen
• 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
ChristophKarls
AndroidRessourcen
• 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.button);
btn.setText(R.string.app_name);
Mobile App Development
ChristophKarls
GUIs
GrafischeOberflä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
ChristophKarls
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
ChristophKarls
ViewGroup
• ViewGroup
• unsichtbarer Container, der andere Views
oder ViewGroups aufnimmt
• ... und diese positioniert
• Oberklasse von Containern
• LinearLayout, GridLayout, ListView
Mobile App Development
ChristophKarls
ViewHierarchie
• View und ViewGroups bilden eine
Hierarchie, d.h. einen Baum von Views
Mobile App Development
ChristophKarls
BeispielHelloWorld
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Example Application 1"
android:id="@+id/tvHeadline" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
. . .
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/etName"
android:layout_weight="1" />
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Say Hello?"
android:id="@+id/btnSayHello" />
</LinearLayout>
Mobile App Development
ChristophKarls
Views
BuAonView
• Button besteht aus einem Text und/oder
einem Icon
• Bei Klick wird irgendeine Aktion ausgeführt
Mobile App Development
ChristophKarls
BuAonView
• 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
ChristophKarls
BuAonView
• 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
ChristophKarls
BuAonView
• Möglichkeit 1
• programmatische Zuweisung einer
OnClickListener-Implementierung
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener(){
public void onClick(View v) {
/* IMPLEMENT ACTION */
}
});
Mobile App Development
ChristophKarls
BuAonView
• 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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say Hallo"
android:id="@+id/button"
android:onClick="btnClick" />
Mobile App Development
ChristophKarls
BuAonView
• Möglichkeit 2
Mobile App Development
ChristophKarls
BuAonView
• Möglichkeit 2
• Implementierung der Methode
• gleicher Name, wie in XML
<Button
android:text="Say Hallo"
android:id="@+id/button"
android:onClick="btnClick" />
• public-Zugriff
• void return Wert
• genau 1 Parameter:View
public void btnClick(View view) {
// do magic ...
}
Mobile App Development
ChristophKarls
EditTextView
• EditText Views ermöglichen dem Benutzer die Eingabe von Text
Mobile App Development
ChristophKarls
EditTextView
• EditText Views ermöglichen dem Benutzer die Eingabe von Text
• Tastatur öffnet sich automatisch nach Touch
• XML
<EditText
android:inputType="textPersonName"
android:text="Name"
android:id=„@+id/editText" />
Mobile App Development
ChristophKarls
EditTextView
• Input type
• gibt an, welche Art von Text eingegeben
werden soll, z. B. Plain, E-Mail, Password
• Textarten werden in Klassen eingeteilt
• Variation von Textklassen
• beeinflusst das Keyboard-Verhalten, z. B.
erster Buchstabe groß, multi line
Mobile App Development
ChristophKarls
EditTextView
• InputType Beispiele
Klasse
Variation
Text
Number
Text
textCapSentences
numberDecimal
textPassword
Mobile App Development
ChristophKarls
EditTextView
• Input type setzen
Mobile App Development
ChristophKarls
EditTextView
• Input type setzen
• XML
<EditText
android:inputType="textCapWords|textAutoComplete"
android:text="Name"
android:id=„@+id/editText" />
• programmatisch
editText = (EditText) findViewById(R.id.editText);
editText.setInputType(InputType.TYPE_TEXT_FLAG_CAP_WORDS
| InputType.TYPE_TEXT_FLAG_AUTO_COMPLETE);
Mobile App Development
ChristophKarls
EditTextView
• 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
ChristophKarls
EditTextView
actionNone
Mobile App Development
actionDone
ChristophKarls
actionSend
EditTextView
actionNext
Mobile App Development
actionGo
ChristophKarls
actionSearch
EditTextView
• Auf Keyboard action reagieren
editText.setOnEditorActionListener(new
EditText.OnEditorActionListener() {
@Override
public boolean onEditorAction(
TextView v, int actionId, KeyEvent event) {
boolean handled = false;
}
return handled;
});
Mobile App Development
ChristophKarls
EditTextView
• Weitere Eigenschaften
• Hint text
...
<EditText
android:hint="Guess your Name ...“ />
• Bilder
<EditText ...
android:text=""
android:hint="Guess your Name ..."
android:drawableRight=„@mipmap/ic_launcher" />
Mobile App Development
ChristophKarls
EditTextView
• ... und noch mehr Eigenschaften
• Text style, typeface, size
• Line spacing
• Text color, hint color
• ...
Mobile App Development
ChristophKarls
CheckBoxView
• Eine CheckBox ermöglicht dem Benutzer eine mit ihr verknüpfte Eigenschaft auf true oder false zu setzen.
Mobile App Development
ChristophKarls
CheckBoxView
• Eine CheckBox ermöglicht dem Benutzer eine mit ihr verknüpfte Eigenschaft auf true oder false zu setzen.
• XML
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Beer"
android:id="@+id/chkBeer"
android:checked="true" />
Mobile App Development
ChristophKarls
CheckBoxView
• 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
ChristophKarls
CheckBoxView
• Möglichkeit 1
• Angabe einer Methode, die in der Activity
ausgeführt werden soll, wenn die
CheckBox geklickt wurde
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Beer"
android:id="@+id/chkBeer"
android:onClick="onBeerBoxClicked"
android:checked="true" />
Mobile App Development
ChristophKarls
CheckBoxView
• Möglichkeit 1
Mobile App Development
ChristophKarls
BuAonView
• Möglichkeit 1
• Implementierung der Methode
• gleicher Name, <CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Beer"
android:id="@+id/chkBeer"
android:onClick="onBeerBoxClicked"
android:checked="true" />
wie in XML
• public-Zugriff
• void return Wert
• genau ein Parameter:View
Mobile App Development
public void onBeerBoxClicked(View view) {
CheckBox cb = (CheckBox) findViewById(R.id.chkBeer);
if (cb.isSelected()) {
/* do something */
} else {
/* do it not ... */
}
}
ChristophKarls
CheckBoxView
• 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
ChristophKarls
CheckBoxView
• Möglichkeit 2
• Alternative: programmatische Zuweisung
eines OnCheckedChangeListener
CheckBox cb = (CheckBox) findViewById(R.id.chkBeer);
cb.setOnCheckedChangeListener
(new CompoundButton.OnCheckedChangeListener() {
});
@Override
public void onCheckedChanged(
CompoundButton buttonView, boolean isChecked) {
/* state = !state */
}
Mobile App Development
ChristophKarls
RadioBuAonView
• RadioButtons ermöglichen dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.
Mobile App Development
ChristophKarls
RadioBuAonView
• Optionen, die durch RadioButton
repräsentiert werden, schließen sich
gegenseitig aus (mutually exclusiv)
• RadioButtons werden in RadioGroups
zusammengefasst
Mobile App Development
ChristophKarls
RadioBuAonView
• XML
<RadioGroup
android:id="@+id/radioGroupWpf"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RadioButton
android:text="@string/recht"
android:id="@+id/rbRecht"/>
<RadioButton
android:text="@string/compilerbau"
android:id="@+id/rbCompiler"/>
<RadioButton
android:text="@string/prozessor"
android:id="@+id/rbProzessor"/>
<RadioButton
android:text="@string/mada"
android:id="@+id/rbMada"
android:checked="true" />
</RadioGroup>
Mobile App Development
ChristophKarls
RadioBuAonView
<RadioGroup
android:id="@+id/radioGroupWpf"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
•
•
auf Auswahl reagieren
<RadioButton
android:text="@string/recht"
android:id="@+id/rbRecht"
android:onClick="rbSelect"/>
Angabe der
Activity-Methode
<RadioButton
android:text="@string/compilerbau"
android:id="@+id/rbCompiler"
android:onClick=„rbSelect" />
<RadioButton
android:text="@string/prozessor"
android:id="@+id/rbProzessor"
android:onClick="rbSelect"/>
<RadioButton
android:text="@string/mada"
android:id="@+id/rbMada"
android:onClick="rbSelect"
android:checked="true" />
</RadioGroup>
Mobile App Development
ChristophKarls
RadioBuAonView
• Implementierung in Activity
• Regeln für Signatur analog zu Button und
CheckBox
Mobile App Development
public void onSelect(View view) {
switch (view.getId()) {
case R.id.rbCompiler:
/* do */
break;
case R.id.rbMada:
/* some */
break;
case R.id.rbProzessor:
/* nice */
break;
case R.id.rbRecht:
/* things ... */
break;
default:
/* WTF ?? */
break;
}
}
ChristophKarls
ProgressBarView
• ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen
Mobile App Development
ChristophKarls
ProgressBarView
• ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen
<ProgressBar ...
android:id="@+id/pBar"
android:progress="70"
android:max="100" />
Mobile App Development
ChristophKarls
ProgressBarView
• style Attribute bestimmt die Form der ProgressBar
<ProgressBar ...
style=„?android:attr/progressBarStyleHorizontal"
android:id="@+id/pBarh"
android:progress="70"
android:max="100"/>
Mobile App Development
ChristophKarls
ProgressBarView
• max = Anzahl Ticks
• progress = aktuelle Ticks
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/pBarh"
android:layout_gravity="center_horizontal"
android:progress="70"
android:max="100"/>
Mobile App Development
ChristophKarls
ProgressBarView
• Spezielle ProgressBars
• RatingBar
• Verwendung zur Dar-
stellung einer Bewertung
• SeekBar
• Verwendung zum Setzen eines Wertes (z. B. Lautstärke)
Mobile App Development
ChristophKarls
SpinnerView
• Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.
Mobile App Development
ChristophKarls
SpinnerView
• Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.
• XML
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
Mobile App Development
ChristophKarls
SpinnerView
• Wo kommen die Superhelden her und wie
wird der Spinner gefüllt?
Mobile App Development
ChristophKarls
SpinnerView
• 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
ChristophKarls
SpinnerView
• Sind die Elemente zur Compile-Zeit
bekannt, können sie in einer ArrayResource eingetragen und verwendet
werden.
• Was sind Array-Resourcen?
Mobile App Development
ChristophKarls
SpinnerView
• Definition eines String arrays
• res/values/strings.xml
<resources>
...
<string-array name="heros">
<item>Superman</item>
<item>Batman</item>
<item>Spiderman</item>
<item>Flash</item>
</string-array>
</resources>
Mobile App Development
ChristophKarls
SpinnerView
• Zuweisung des String arrays an den Spinner
res/values/strings.xml
<resources>
...
<string-array name="heros">
<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="http://schemas.android.com/apk/res/
android"
xmlns:tools="http://schemas.android.com/tools"
...
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/heros" />
</LinearLayout>
Mobile App Development
ChristophKarls
SpinnerView
• 2. Situation: Elemente erst zur Laufzeit bekannt
• Verwendung von Adaptern
• Adapter bilden Brücke zwischen sog.
AdapterViews und den darzustellenden
Daten
Mobile App Development
ChristophKarls
SpinnerView
• Verwendung eines ArrayAdapters
/* ArrayAdapter erstellen */
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
MainActivity.this,
R.layout.support_simple_spinner_dropdown_item);
/* Daten hinzufügen */
adapter.add("Superman");
adapter.add("Batman");
adapter.add("Spiderman");
adapter.add("Flash");
/*Spinner aus View organisieren und Adapter zuweisen */
Spinner s = (Spinner) findViewById(R.id.spinner);
s.setAdapter(adapter);
Mobile App Development
ChristophKarls
SpinnerView
• Auf eine Auswahl reagieren
s.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
ChristophKarls
ListView
• ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen
Mobile App Development
ChristophKarls
ListView
• ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen
• XML
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:entries="@array/lebensmittel"
android:layout_gravity="center_horizontal" />
Mobile App Development
ChristophKarls
ListView
• 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
ChristophKarls
String-Array
• Definition eines String arrays
• res/values/strings.xml
<resources>
...
<string-array name="lebensmittel">
<item>Brot</item>
<item>Schinken</item>
<item>Käse</item>
<item>Butter</item>
<item>Bier</item>
</string-array>
</resources>
Mobile App Development
ChristophKarls
String-Array
•
Zuweisung des String arrays an die Liste
res/layout/activity_main.xml
res/values/strings.xml
<resources>
...
<string-array name="lebensmittel">
<item>Brot</item>
<item>Schinken</item>
<item>Käse</item>
<item>Butter</item>
<item>Bier</item>
</string-array>
</resources>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:entries="@array/lebensmittel"
android:layout_gravity="center_horizontal" />
Mobile App Development
ChristophKarls
ListView
• 2. Situation: Elemente erst zur Laufzeit bekannt
• Verwendung eines Adapters, um die Liste
zur Laufzeit zu befüllen
Mobile App Development
ChristophKarls
SpinnerView
• 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
ChristophKarls
ListView
• Auf Element Klicks reagieren
ListView lv = (ListView) findViewById(R.id.listView);
lv.setOnItemClickListener(
new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(
AdapterView<?> parent,
View view,
int position, long id) {
/* magic again ... */
}
});
Mobile App Development
ChristophKarls
LayouLng
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
ChristophKarls
LayoutParameter
• 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
ChristophKarls
LayoutParameter
• Beispiel
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button"
android:layout_width=„wrap_content"
android:layout_height=„fill_parent"
android:text="Button" />
<Button
android:id="@+id/button"
android:layout_width=„fill_parent"
android:layout_height=„fill_parent"
android:text="Button" />
Mobile App Development
ChristophKarls
FrameLayout
• wird in der Regel verwendet, um ein Element darzustellen
• Layout-Attribut gravity
<FrameLayout
android:layout_width="260dp"
android:layout_height="260dp"
android:background="@android:color/darker_gray"
android:layout_gravity="center_horizontal">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button" />
</FrameLayout>
Mobile App Development
ChristophKarls
FrameLayout
auch mehrere, gestapelte Views
• kann
enthalten
• Darstellung nach Einfügereihenfolge
<FrameLayout
android:layout_width="260dp"
android:layout_height="260dp"
android:background="@android:color/darker_gray"
android:layout_gravity="center_horizontal">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="My Button" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A large text for testing"
android:id="@+id/textView"
android:layout_gravity="center" />
</FrameLayout>
Mobile App Development
ChristophKarls
LinearLayout
• Ein LinearLayout richtet seine
Kindelemente entlang einer bestimmt
Richtung aus
• Diese Richtung (Orientierung) kann
horizontal und vertikal sein
Mobile App Development
ChristophKarls
LinearLayout
• Orientierung
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation=„vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="@string/ButtonString"
android:id="@+id/textView2" />
<EditText
android:layout_width="173dp"
android:layout_height="wrap_content"
android:id="@+id/editText" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
</LinearLayout>
Mobile App Development
ChristophKarls
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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:id="@+id/editText" />
Mobile App Development
ChristophKarls
LinearLayout
• Beispiel Layout-Parameter weight
weight
weight
weight
TextField
-
-
1
EditText
-
1
2
Button
-
-
3
Mobile App Development
ChristophKarls
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
ChristophKarls
TableLayout
• Beispiel
<TableLayout
android:stretchColumns="*"
android:gravity="center">
<TableRow
android:gravity="center">
<TextView
android:text="Large Text"
android:id="@+id/textView4" />
<TextView
android:text="Large Text"
android:id="@+id/textView3" />
</TableRow>
<TableRow
android:gravity="center">
<Button
android:text="New Button"
android:id="@+id/button2" />
<Button
android:text="New Button"
android:id="@+id/button3" />
</TableRow>
</TableLayout>
Mobile App Development
ChristophKarls
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
ChristophKarls
TableLayout
• Shrink-Attribut
<TableLayout …
android:shrinkColumns="*"
<TableRow
…>
<Button
… />
<Button
… />
<Button
… />
<Button
… />
</TableRow>
</TableLayout>
Mobile App Development
ChristophKarls
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
ChristophKarls
TableLayout
• Stretch-Attribut
<TableLayout …
android:stretchColumns=„0"
android:stretchColumns=„1,2“
android:stretchColumns=„*"
<TableRow
…>
…
</TableRow>
</TableLayout>
Mobile App Development
ChristophKarls
RelaLveLayout
• RelativeLayout wird verwendet, um Views
relativ zu einander auszurichten
• Nachteil: kompliziertes Layout
• Vorteil: sehr flache View-Hierarchie und
dadurch bessere Performance
Mobile App Development
ChristophKarls
RelaLveLayout
<RelativeLayout …>
<TextView
android:text="Example Application 1"
android:id="@+id/tvHeadline"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true" />
<TextView
android:text="Enter your Name"
android:id="@+id/tvEnterName"
android:layout_below="@+id/tvHeadline"
android:layout_alignParentStart="true" />
<EditText
android:id="@+id/etName"
android:layout_below="@+id/tvEnterName"
android:layout_alignParentStart="true" />
<Button
android:text="Say Hello?"
android:id="@+id/btnSayHello"
android:layout_below="@+id/etName"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Mobile App Development
ChristophKarls
RelaLveLayout
• RelativeLayout.LayoutParams
http://developer.android.com/reference/android/widget/
RelativeLayout.LayoutParams.html
Mobile App Development
ChristophKarls
RelaLveLayout
• RelativeLayout.LayoutParams
http://developer.android.com/reference/android/widget/
RelativeLayout.LayoutParams.html
Mobile App Development
ChristophKarls
<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
ChristophKarls
<include/>
• Beispiel
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"
android:id="@+id/btnOK"
android:layout_weight="1"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:id="@+id/btnCancel"
android:layout_weight="1"
android:layout_gravity="right" />
</LinearLayout>
Mobile App Development
ChristophKarls
<include/>
• Beispiel
<LinearLayout … <TextView
…
android:text="Example Application 1"
android:id="@+id/tvHeadline" />
<LinearLayout
…
<TextView
…
android:id="@+id/tvEnterName" />
<EditText
…
android:id=„@+id/etName“ />
</LinearLayout>
<include android:id="@+id/include"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="@layout/layout_ok_cancel" />
</LinearLayout>
Mobile App Development
ChristophKarls
PrakLkum
Ü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 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.
Mobile App Development
ChristophKarls
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
