Mobile App Development

Transkript

1 Mobile App Development - Graphische Oberflächen -

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

3 View View zeichnet etwas auf dem Screen graphisches Elelment, mit dem der Benutzer interagieren kann Oberklasse von allen Standard Controls Button, TextField, ProgressBar, ImageView

4 ViewGroup ViewGroup unsichtbarer Container, der andere Views oder ViewGroups aufnimmt... und diese positioniert Oberklasse von Containern LinearLayout, GridLayout, ListView

5 View Hierarchie View und ViewGroups bilden eine Hierarchie

6 Beipiel Hello World <LinearLayout! xmlns:android=" xmlns:tools=" > <ImageView android:layout_gravity="center_horizontal" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView /> <EditText android:inputtype="textcapwords" /> </LinearLayout> <Button android:layout_gravity="center_horizontal" /> </LinearLayout>

7 Views

8 Button View Button besteht aus einem Text und/oder einem Icon Bei Klick wird irgendeine Aktion ausgeführt

9 Button View Button besteht aus einem Text und/oder einem Icon Bei Klick wird irgendeine Aktion ausgeführt XML <Button />

10 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

11 Button View Möglichkeit 1 programmatische Zuweisung einer OnClickListener-Implementierung Button btn = (Button) findviewbyid(r.id.btnsayhello); btn.setonclicklistener(new View.OnClickListener() public void onclick(view v) {!!! /*!!! * Button action code!!! */!! }! });

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 <Button android:id="@+id/btnsayhello" android:onclick="clickaction" android:text="@string/say" />

13 Button View Möglichkeit 2

14 Button View Möglichkeit 2 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert <Button android:id="@+id/btnsayhello" android:onclick="clickaction" android:text="@string/say" /> public void clickaction(view view) { // do Button action } genau 1 Parameter: View

15 Button View Möglichkeit 2 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert <Button android:id="@+id/btnsayhello" android:onclick="clickaction" android:text="@string/say" /> public void clickaction(view view) { // do Button action } genau 1 Parameter: View

16 Button View Möglichkeit 2 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert <Button android:id="@+id/btnsayhello" android:onclick="clickaction" android:text="@string/say" /> public void clickaction(view view) { // do Button action } genau 1 Parameter: View

17 Button View Möglichkeit 2 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert <Button android:id="@+id/btnsayhello" android:onclick="clickaction" android:text="@string/say" /> public void clickaction(view view) { // do Button action } genau 1 Parameter: View

18 Button View Möglichkeit 2 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert <Button android:id="@+id/btnsayhello" android:onclick="clickaction" android:text="@string/say" /> public void clickaction(view view) { // do Button action } genau 1 Parameter: View

19 EditText View EditText Views ermöglichen dem Benutzer die Eingabe von Text

20 EditText View EditText Views ermöglichen dem Benutzer die Eingabe von Text Tastatur öffnet sich automatisch nach Touch XML <EditText android:inputtype="textcapwords" android:imeoptions="actionsend">

21 EditText View Input type gibt an, welche Art von Text eingegeben werden soll, z. B. Plain, , Password Textarten werden in Klassen eingeteilt Variation von Textklassen beeinflusst das Keyboard-Verhalten, z. B. erster Buchstabe groß, multi line

22 EditText View Input type Beispiele Klasse Text Number Text Variation CapSentence Decimal Password

23 EditText View Input type setzen

24 EditText View Input type setzen XML <EditText! 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);

25 EditText View Keyboard action gibt an, welcher Button an Stelle des Return-Buttons in der Tastatur angezeigt werden soll XML <EditText android:imeoptions="actionnone" android:singleline="true" />

26 EditText View actionnext actiondone actionsend

27 EditText View actionnone actiongo actionsearch

28 EditText View Auf Keyboard action reagieren EditText txt = (EditText) findviewbyid(r.id.edittext01); txt.setoneditoractionlistener(new TextView.OnEditorActionListener() public boolean oneditoraction( TextView v, int actionid, KeyEvent event) {!!! boolean handeled = false;!!!!!!! return handeled;!! } });

29 EditText View Weitere Eigenschaften Hint text <EditText... android:hint="hint Text"> Lines <EditText... android:lines="3"> Bilder <EditText... android:drawableleft!!

30 EditText View... und noch mehr Eigenschaften Text style, typeface, size Line spacing Text color, hint color...

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

32 CheckBox View Eine CheckBox ermöglicht dem Benutzer eine mit ihr verknüpfte Eigenschaft auf true oder false zu setzen. XML <CheckBox android:layout_width="match_parent" android:layout_height="wrap_content" android:checked="true" />

33 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

34 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" />

35 CheckBox View Möglichkeit 1

36 Button 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 public void onbeerboxclicked(view view) {! CheckBox cb = (CheckBox)!! findviewbyid(r.id.checkbox1);! if (cb.isselected()) {!! /* do something */! } else {!! /* do the other things */! } }

37 Button 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 public void onbeerboxclicked(view view) {! CheckBox cb = (CheckBox)!! findviewbyid(r.id.checkbox1);! if (cb.isselected()) {!! /* do something */! } else {!! /* do the other things */! } }

38 Button 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 public void onbeerboxclicked(view view) {! CheckBox cb = (CheckBox)!! findviewbyid(r.id.checkbox1);! if (cb.isselected()) {!! /* do something */! } else {!! /* do the other things */! } }

39 Button 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 public void onbeerboxclicked(view view) {! CheckBox cb = (CheckBox)!! findviewbyid(r.id.checkbox1);! if (cb.isselected()) {!! /* do something */! } else {!! /* do the other things */! } }

40 Button 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 public void onbeerboxclicked(view view) {! CheckBox cb = (CheckBox)!! findviewbyid(r.id.checkbox1);! if (cb.isselected()) {!! /* do something */! } else {!! /* do the other things */! } }

41 CheckBox View Möglichkeit 2 programmatische Zuweisung eines OnClickListeners CheckBox cbbeer = (CheckBox) findviewbyid(r.id.cbbeer); cbbeer.setonclicklistener(new View.OnClickListener() 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 */!!! }!! }! });

42 CheckBox View Möglichkeit 2 Alternative: programmatische Zuweisung eines OnCheckedChangeListener cbbeer.setoncheckedchangelistener(new OnCheckedChangeListener() public void oncheckedchanged(!! CompoundButton buttonview, boolean ischecked) {!!! /* d your stuff */!! } });

43 RadioButton View RadioButtons ermöglichen dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.

44 RadioButton View Optionen, die durch RadioButton repräsentiert werden, schließen sich gegenseitig aus (mutually exclusiv) RadioButtons werden in RadioGroups zusammengefasst

45 RadioButton View XML <RadioGroup android:orientation="vertical" > <RadioButton android:checked="true" <RadioButton /> <RadioButton /> </RadioGroup>

46 RadioButton View <RadioGroup android:orientation="vertical" > auf Auswahl reagieren Angabe der Activity-Methode <RadioButton android:checked="true" android:onclick="onselect"/> <RadioButton android:onclick="onselect" /> <RadioButton android:onclick="onselect"/> </RadioGroup>

47 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;! } }

48 ProgressBar View ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen

49 ProgressBar View ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen <ProgressBar style=! android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" android:progress="70" />

50 ProgressBar View style Attribute bestimmt die Form der ProgressBar <ProgressBar style=! android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" android:progress="70" />

51 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" />

52 ProgressBar View Spezielle ProgressBars RatingBar SeekBar

53 Spinner View Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.

54 Spinner View Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge. XML <Spinner android:layout_width="fill_parent" android:layout_height="wrap_content"... />

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

56 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

57 Spinner View Sind die Elemente zur Compile-Zeit bekannt, können sie in einer Array- Resource eingetragen und verwendet werden. Was sind Array-Resourcen?

58 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>

59 Spinner View Zuweisung des String arrays an den Spinner res/layout/activity_main.xml 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> <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="..."!...! <Spinner!! </LinearLayout>

60 Spinner View Zuweisung des String arrays an den Spinner res/layout/activity_main.xml 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> <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="..."!...! <Spinner!! </LinearLayout>

61 Spinner View Zuweisung des String arrays an den Spinner res/layout/activity_main.xml 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> <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="..."!...! <Spinner!! </LinearLayout>

62 Spinner View 2. Situation: Elemente erst zur Laufzeit bekannt Verwendung von Adaptern Adapter bilden Brücke zwischen sog. AdapterViews und den darzustellenden Daten

63 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);

64 Spinner View Auf eine Auswahl reagieren Spinner spinner =! (Spinner) findviewbyid(r.id.myspinner); spinner.setonitemselectedlistener(! new AdapterView.OnItemSelectedListener() public void onitemselected(!!! AdapterView<?> parent,!!! View view, int pos, long id) {!! // TODO: implement me!! String str = (String)!!!!!! parent.getitematposition(pos);! public void onnothingselected(!!! AdapterView<?> parent) {!! // TODO: implement me! }! });

65 List View ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen

66 List View ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen XML <ListView android:layout_width="fill_parent" android:layout_height="wrap_content" >

67 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

68 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>

69 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!! </LinearLayout>

70 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!! </LinearLayout>

71 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!! </LinearLayout>

72 Spinner View 2. Situation: Elemente erst zur Laufzeit bekannt Verwendung eines Adapters, um die Liste zur Laufzeit zu befüllen

73 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);

74 List View Auf Element Klicks reagieren ListView lv = (ListView) findviewbyid(!! R.id.myListView);!! lv.setonitemclicklistener(! new AdapterView.OnItemClickListener() public void onitemclick(!!! AdapterView<?> list,!!! View view, int pos, long id) {!!!! /* do your stuff here */!! } });

75 Layouting

76 Layouts Layouts... sind ViewGroups (Container) können andere ViewGroups und Views aufnehmen werden verwendet, um ihre Kindelemente auf dem Screen zu positionieren

77 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.

78 Layout Parameter Beispiel <Button! android:layout_width="wrap_content"! android:layout_height="wrap_content"! android:text="button" /> <Button! android:layout_width="wrap_content"! android:layout_height="fill_parent"! android:text="button" /> <Button! android:layout_width="fill_parent"! android:layout_height="fill_parent"! android:text="button" />

79 FrameLayout wird in der Regel verwendet, um ein Element darzustellen Layout-Attribut gravity <FrameLayout xmlns:android=!! " android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> </FrameLayout>

80 FrameLayout kann auch mehrere, gestapelte Views enthalten Darstellung nach Einfügereihenfolge <FrameLayout xmlns:android=!! " android:layout_width="fill_parent"! android:layout_height="fill_parent" >! <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="button" /> </FrameLayout>

81 LinearLayout Ein LinearLayout richtet seine Kindelemente entlang einer bestimmt Richtung aus Diese Richtung (Orientierung) kann horizontal und vertikal sein

82 LinearLayout Orientierung <LinearLayout xmlns:android="..." android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:orientation="vertical" > <TextView <EditText android:layout_width="0dip" android:layout_height="wrap_content"/ > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

83 LinearLayout Orientierung <LinearLayout xmlns:android="..." android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:orientation="vertical" > <TextView <EditText android:layout_width="0dip" android:layout_height="wrap_content"/ > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

84 LinearLayout Orientierung <LinearLayout xmlns:android="..." android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:orientation="vertical" > <TextView <EditText android:layout_width="0dip" android:layout_height="wrap_content"/ > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

85 LinearLayout Layout-Parameter weight gibt an, wie groß eine View im Verhältnis zu den 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" >

86 LinearLayout Beispiel Layout-Parameter weight weight weight weight TextField EditText Button - - 3

87 RelativeLayout RelativeLayout wird verwendet, um Views relativ zu einander auszurichten Nachteil: kompliziertes Layout Vorteil: sehr flache View-Hierarchie und dadurch bessere Performance

88 RelativeLayout <RelativeLayout xmlns:android="..." android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_alignparentleft="true" android:layout_alignparenttop="true"/> <EditText > <Button /> </RelativeLayout>

89 RelativeLayout RelativeLayout.LayoutParams RelativeLayout.LayoutParams.html

90 RelativeLayout RelativeLayout.LayoutParams RelativeLayout.LayoutParams.html

91 Praktikum

92 Praktikum siehe Übungsblatt

93 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. IV.