Mobile App Development - Grafische Oberflächen -

Inhalt

• Ressourcen • Allgemeines • Views • Layouting Mobile App Development

Christoph Karls

Ressourcen

Android Ressourcen

Mobile App Development

Christoph Karls

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

Christoph Karls

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

Christoph Karls

Android Ressourcen

• Farben res/values/colors.xml #00000000 #0000FF00

public final class R { public static final class color { public static final int black=0x7f040000;
 public static final int green=0x7f040001; } }

Mobile App Development

Christoph Karls

Android Ressourcen

• Strings res/values/strings.xml Hello World Hello world!

public static final class string { public static final int app_name=0x7f050000; public static final int hello_world=0x7f050001; }

Mobile App Development

Christoph Karls

Android Ressourcen

• Layouts public static final class layout { public static final int 
 activity_main=0x7f030000; public static final int content_main=0x7f030001; }

Mobile App Development

Christoph Karls

Android Ressourcen

• Bilder public static final class drawable { public static final int 
 ic_launcher=0x7f020000; }

Mobile App Development

Christoph Karls

Android Ressourcen

• IDs res/layout/activity_main.xml



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

Christoph Karls

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.button);
 btn.setText(R.string.app_name);

Mobile App Development

Christoph Karls

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

Christoph Karls

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

Christoph Karls

ViewGroup

• ViewGroup • unsichtbarer Container, der andere Views oder ViewGroups aufnimmt

• ... und diese positioniert • Oberklasse von Containern • LinearLayout, GridLayout, ListView Mobile App Development

Christoph Karls

View Hierarchie

• View und ViewGroups bilden eine

Hierarchie, d.h. einen Baum von Views
 
 
 
 
 
 


Mobile App Development

Christoph Karls

Beispiel Hello World 



 












 


. . .






 
 


Mobile App Development

Christoph Karls

Views

BuAon View

• Button besteht aus einem Text und/oder einem Icon

• Bei Klick wird irgendeine Aktion ausgeführt
 
 
 
 


Mobile App Development

Christoph Karls

BuAon View

• Button besteht aus einem Text 
 und/oder einem Icon

• Bei Klick wird irgendeine 
 Aktion ausgeführt

• XML






 Mobile App Development

Christoph Karls

BuAon 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

Christoph Karls

BuAon View

• 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

Christoph Karls

BuAon 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



Mobile App Development

Christoph Karls

BuAon View

• Möglichkeit 2

Mobile App Development

Christoph Karls

BuAon View

• Möglichkeit 2 • Implementierung der Methode • gleicher Name, 
 wie in XML



• public-Zugriff • void return Wert • genau 1 Parameter:View

public void btnClick(View view) {
 // do magic ...
 }

Mobile App Development

Christoph Karls

EditText View

• EditText Views ermöglichen 
 dem Benutzer die Eingabe 
 von Text

Mobile App Development

Christoph Karls

EditText View

• EditText Views ermöglichen 
 dem Benutzer die Eingabe 
 von Text

• Tastatur öffnet sich 


automatisch nach Touch

• XML





• programmatisch editText = (EditText) findViewById(R.id.editText);
 editText.setInputType(InputType.TYPE_TEXT_FLAG_CAP_WORDS
 | InputType.TYPE_TEXT_FLAG_AUTO_COMPLETE);

Mobile App Development

Christoph Karls

EditText View

• Keyboard action • gibt an, welcher Button an Stelle des

Return-Buttons in der Tastatur angezeigt werden soll

• XML

Mobile App Development

Christoph Karls

EditText View

actionNone Mobile App Development

actionDone Christoph Karls

actionSend

EditText View

actionNext Mobile App Development

actionGo Christoph Karls

actionSearch

EditText View

• 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

Christoph Karls

EditText View

• Weitere Eigenschaften
 • Hint text


...
 


Mobile App Development

Christoph Karls

EditText View

• ... und noch mehr Eigenschaften • Text style, typeface, size • Line spacing • Text color, hint color • ... Mobile App Development

Christoph Karls

CheckBox View

• Eine CheckBox ermöglicht 
 dem Benutzer eine mit ihr 
 verknüpfte Eigenschaft auf 
 true oder false zu setzen.

Mobile App Development

Christoph Karls

CheckBox View

• Eine CheckBox ermöglicht 
 dem Benutzer eine mit ihr 
 verknüpfte Eigenschaft auf 
 true oder false zu setzen.

• XML
 





 
 


Mobile App Development

Christoph Karls

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

Christoph Karls

CheckBox View

• Möglichkeit 1 • Angabe einer Methode, die in der Activity ausgeführt werden soll, wenn die CheckBox geklickt wurde
 
 
 
 




Mobile App Development

Christoph Karls

CheckBox View

• Möglichkeit 1
 
 
 


Mobile App Development

Christoph Karls

BuAon View

• Möglichkeit 1 • Implementierung der Methode • gleicher Name, 




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 ... */
 }
 }

Christoph Karls

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

Christoph Karls

CheckBox View

• 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

Christoph Karls

RadioBuAon View

• RadioButtons ermöglichen 


dem Benutzer die Auswahl 
 einer Option aus mehreren 
 verschiedenen.

Mobile App Development

Christoph Karls

RadioBuAon View

• Optionen, die durch RadioButton

repräsentiert werden, schließen sich gegenseitig aus (mutually exclusiv)

• RadioButtons werden in RadioGroups zusammengefasst

Mobile App Development

Christoph Karls

RadioBuAon View

• XML


 


























Mobile App Development

Christoph Karls

RadioBuAon View 
 


• •

auf Auswahl 
 reagieren


 


Angabe der
 Activity-Methode







Mobile App Development

Christoph Karls

ProgressBar View

• max = Anzahl Ticks • progress = aktuelle Ticks
 
 





 
 


Mobile App Development

Christoph Karls

ProgressBar View

• Spezielle ProgressBars • RatingBar • Verwendung zur Dar-


stellung einer Bewertung

• SeekBar • Verwendung zum Setzen 
 eines Wertes 
 (z. B. Lautstärke)

Mobile App Development

Christoph Karls

Spinner View

• Eine Spinner View erlaubt 


dem Benutzer die Auswahl 
 eines einzelnen Elements 
 aus einer Menge.

Mobile App Development

Christoph Karls

Spinner View

• Eine Spinner View erlaubt 


dem Benutzer die Auswahl 
 eines einzelnen Elements 
 aus einer Menge.

• XML
 





 


Mobile App Development

Christoph Karls

Spinner View

• Wo kommen die Superhelden her und wie wird der Spinner gefüllt?


Mobile App Development

Christoph Karls

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

Christoph Karls

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

Christoph Karls

Spinner View

• Definition eines String arrays • res/values/strings.xml 
 ...
 
 
 Superman
 Batman
 Spiderman
 Flash
 
 


Mobile App Development

Christoph Karls

Spinner View

• Zuweisung des 


String arrays an 
 den Spinner

res/values/strings.xml 
 ...
 
 
 Superman
 Batman
 Spiderman
 Flash
 
 


res/layout/activity_main.xml 
 parent) {
 //TODO: implement me
 }
 });

Mobile App Development

Christoph Karls

List View

• ListViews werden 


verwendet, um mehrere 
 Elemente in einer 
 vertikalen Liste 
 darzustellen

Mobile App Development

Christoph Karls

List View

• ListViews werden 


verwendet, um mehrere 
 Elemente in einer 
 vertikalen Liste 
 darzustellen

• XML






Mobile App Development

Christoph Karls

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

Christoph Karls

String-Array

• Definition eines String arrays • res/values/strings.xml 
 ...
 
 Brot
 Schinken
 Käse
 Butter
 Bier
 


Mobile App Development

Christoph Karls

String-Array

•

Zuweisung des 
 String arrays an 
 die Liste

res/layout/activity_main.xml

res/values/strings.xml 
 ...
 
 Brot
 Schinken
 Käse
 Butter
 Bier
 




Mobile App Development

Christoph Karls

List View

• 2. Situation: 


Elemente erst zur Laufzeit bekannt

• Verwendung eines Adapters, um die Liste zur Laufzeit zu befüllen

Mobile App Development

Christoph Karls

Spinner View

• Verwendung eines Adapters, um die Liste zur Laufzeit zu befüllen

ArrayAdapter adapter = new ArrayAdapter(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

Christoph Karls

List View

• 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

Christoph Karls

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

Christoph Karls

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

Christoph Karls

Layout Parameter

• Beispiel



Mobile App Development

Christoph Karls

FrameLayout

• wird in der Regel verwendet, 
 um ein Element darzustellen

• Layout-Attribut gravity 
 





Mobile App Development

Christoph Karls

FrameLayout auch mehrere, gestapelte Views • kann enthalten • Darstellung nach Einfügereihenfolge 
 
 


Mobile App Development

Christoph Karls

LinearLayout

• Ein LinearLayout richtet seine

Kindelemente entlang einer bestimmt Richtung aus

• Diese Richtung (Orientierung) kann horizontal und vertikal sein

Mobile App Development

Christoph Karls

LinearLayout

• Orientierung


 
 















 


Mobile App Development

Christoph Karls

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

Mobile App Development

Christoph Karls

LinearLayout

• Beispiel Layout-Parameter weight weight

weight

weight

TextField

-

-

1

EditText

-

1

2

Button

-

-

3

Mobile App Development

Christoph Karls

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 (, )

• Kindelemente werden in Zeilen und Zellen gruppiert

Mobile App Development

Christoph Karls

TableLayout

• Beispiel


 






 






 






 
 
 


Mobile App Development

Christoph Karls

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

Christoph Karls

TableLayout

• Shrink-Attribut