Mobile App Development - Graphische Oberflächen -

Montag, 22. Oktober 12

Graphische Oberflächen

• Oberflächenbeschreibung in XML • layout Dateien in res/layout • LayoutInflater: • Erstellung von Java-View-Objekten aus der XML-Definition

Mobile App Development Montag, 22. Oktober 12

View

• View • zeichnet etwas auf dem Screen • graphisches Elelment, mit dem der Benutzer interagieren kann

• Oberklasse von allen Standard Controls • Button, TextField, ProgressBar, ImageView Mobile App Development Montag, 22. Oktober 12

ViewGroup

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

• ... und diese positioniert

• Oberklasse von Containern • LinearLayout, GridLayout, ListView Mobile App Development Montag, 22. Oktober 12

View Hierarchie

• View und ViewGroups bilden eine Hierarchie

Mobile App Development Montag, 22. Oktober 12

Beipiel Hello World

Mobile App Development Montag, 22. Oktober 12

Views

Montag, 22. Oktober 12

Button View

• Button besteht aus einem Text und/oder einem Icon

• Bei Klick wird irgendeine Aktion ausgeführt

Mobile App Development Montag, 22. Oktober 12

Button View

• Button besteht aus einem Text und/oder einem Icon

• Bei Klick wird irgendeine Aktion ausgeführt

• XML

Mobile App Development Montag, 22. Oktober 12

Button 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 Montag, 22. Oktober 12

Button 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 Montag, 22. Oktober 12

Button 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 Montag, 22. Oktober 12

Button View

• Möglichkeit 2

Mobile App Development Montag, 22. Oktober 12

Button View

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



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

public void clickAction(View view) { // do Button action }

Mobile App Development Montag, 22. Oktober 12

Button View

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



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

public void clickAction(View view) { // do Button action }

Mobile App Development Montag, 22. Oktober 12

Button View

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



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

public void clickAction(View view) { // do Button action }

Mobile App Development Montag, 22. Oktober 12

Button View

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



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

public void clickAction(View view) { // do Button action }

Mobile App Development Montag, 22. Oktober 12

Button View

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



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

public void clickAction(View view) { // do Button action }

Mobile App Development Montag, 22. Oktober 12

EditText View

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

Mobile App Development Montag, 22. Oktober 12

EditText View

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

• Tastatur öffnet sich

automatisch nach Touch

• XML

Mobile App Development Montag, 22. Oktober 12

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 Montag, 22. Oktober 12

EditText View

• Input type Beispiele Klasse

Text

Variation CapSentence

Mobile App Development Montag, 22. Oktober 12

Number

Text

Decimal

Password

EditText View

• Input type setzen

Mobile App Development Montag, 22. Oktober 12

EditText View

• Input type setzen • XML

• 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 Montag, 22. Oktober 12

EditText View

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

Return-Buttons in der Tastatur angezeigt werden soll

• XML

Mobile App Development Montag, 22. Oktober 12

EditText View

actionNext Mobile App Development Montag, 22. Oktober 12

actionDone

actionSend

EditText View

actionNone Mobile App Development Montag, 22. Oktober 12

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 handeled = false; ! ! ! !

! ! ! ! });

! }

return handeled;

Mobile App Development Montag, 22. Oktober 12

EditText View

• Weitere Eigenschaften • Hint text

• Lines

• Bilder

Mobile App Development Montag, 22. Oktober 12

EditText View

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

CheckBox View

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

Mobile App Development Montag, 22. Oktober 12

CheckBox View

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

• XML

Mobile App Development Montag, 22. Oktober 12

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 Montag, 22. Oktober 12

CheckBox View

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

Mobile App Development Montag, 22. Oktober 12

CheckBox View

• Möglichkeit 1

Mobile App Development Montag, 22. Oktober 12

Button View

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

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

Mobile App Development Montag, 22. Oktober 12



public void onBeerBoxClicked(View view) { ! CheckBox cb = (CheckBox) ! ! findViewById(R.id.checkBox1); ! if (cb.isSelected()) { ! ! /* do something */ ! } else { ! ! /* do the other things */ ! } }

Button View

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

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

Mobile App Development Montag, 22. Oktober 12



public void onBeerBoxClicked(View view) { ! CheckBox cb = (CheckBox) ! ! findViewById(R.id.checkBox1); ! if (cb.isSelected()) { ! ! /* do something */ ! } else { ! ! /* do the other things */ ! } }

Button View

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

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

Mobile App Development Montag, 22. Oktober 12



public void onBeerBoxClicked(View view) { ! CheckBox cb = (CheckBox) ! ! findViewById(R.id.checkBox1); ! if (cb.isSelected()) { ! ! /* do something */ ! } else { ! ! /* do the other things */ ! } }

Button View

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

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

Mobile App Development Montag, 22. Oktober 12



public void onBeerBoxClicked(View view) { ! CheckBox cb = (CheckBox) ! ! findViewById(R.id.checkBox1); ! if (cb.isSelected()) { ! ! /* do something */ ! } else { ! ! /* do the other things */ ! } }

Button View

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

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

Mobile App Development Montag, 22. Oktober 12



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, ! ! ! ! ! ! "test", Toast.LENGTH_LONG).show(); ! ! ! } else { ! ! ! ! /* do the other things */ ! ! ! } ! ! } ! });

Mobile App Development Montag, 22. Oktober 12

CheckBox View

• Möglichkeit 2 • Alternative: programmatische Zuweisung eines OnCheckedChangeListener

cbBeer.setOnCheckedChangeListener(new OnCheckedChangeListener() { ! @Override ! public void onCheckedChanged( ! ! CompoundButton buttonView, boolean isChecked) { ! ! ! /* d your stuff */ ! ! } });

Mobile App Development Montag, 22. Oktober 12

RadioButton View

• RadioButtons ermöglichen

dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.

Mobile App Development Montag, 22. Oktober 12

RadioButton View

• Optionen, die durch RadioButton

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

• RadioButtons werden in RadioGroups zusammengefasst

Mobile App Development Montag, 22. Oktober 12

RadioButton View

• XML

Mobile App Development Montag, 22. Oktober 12

RadioButton View

• auf Auswahl



• Angabe der



reagieren

Activity-Methode



Mobile App Development Montag, 22. Oktober 12

RadioButton 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 Montag, 22. Oktober 12

ProgressBar View

• ProgressBars werden

verwendet, um den Fortschritt einer Operation anzuzeigen

Mobile App Development Montag, 22. Oktober 12

ProgressBar View

• ProgressBars werden

verwendet, um den Fortschritt einer Operation anzuzeigen



Mobile App Development Montag, 22. Oktober 12

ProgressBar View

• style Attribute bestimmt

die Form der ProgressBar



Mobile App Development Montag, 22. Oktober 12

ProgressBar View

• max = Anzahl Ticks • progress = aktuelle Ticks

Mobile App Development Montag, 22. Oktober 12

ProgressBar View

• Spezielle ProgressBars • RatingBar • SeekBar

Mobile App Development Montag, 22. Oktober 12

Spinner View

• Eine Spinner View erlaubt

dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.

Mobile App Development Montag, 22. Oktober 12

Spinner View

• Eine Spinner View erlaubt

dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.

• XML

Mobile App Development Montag, 22. Oktober 12

Spinner View

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

Mobile App Development Montag, 22. Oktober 12

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 Montag, 22. Oktober 12

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 Montag, 22. Oktober 12

Spinner View

• Definition eines String arrays • res/values/strings.xml Test Hello world! ... ... Superman Batman Spiderman Flash

Mobile App Development Montag, 22. Oktober 12

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 Montag, 22. Oktober 12

List View

• ListViews werden

verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen

Mobile App Development Montag, 22. Oktober 12

List View

• ListViews werden

verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen

• XML

Mobile App Development Montag, 22. Oktober 12

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 Montag, 22. Oktober 12

List View

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

Mobile App Development Montag, 22. Oktober 12

Spinner View

•

Zuweisung des String arrays an die Liste

res/layout/activity_main.xml

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