Mobile App Development. - Grafische Oberflächen -

Transkript

1 Mobile App Development - Grafische Oberflächen -

2 Inhalt Ressourcen Allgemeines Views Layouting

3 Ressourcen

4 Android Ressourcen Ressourcen sind Dateien und Objekte, wie Layouts, Bilder, Farben und IDs Zu jeder Ressource wird ein Eintrag in R.java generiert

5 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; } }

6 Android Ressourcen Farben res/values/colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="black"># </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; } }

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

8 Android Ressourcen Layouts public static final class layout { public static final int activity_main=0x7f030000; public static final int test_activity=0x7f030001; }

9 Android Ressourcen Bilder public static final class drawable { public static final int ic_launcher=0x7f020000; }

10 Android Ressourcen IDs res/layout/activity_main.xml <LinearLayout xmlns:android="..." xmlns:tools=" > <TextView /> <Button /> </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; }

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

12 GUIs

13 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)

14 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

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

16 View Hierarchie View und ViewGroups bilden eine Hierarchie, d.h. einen Baum von Views

17 Beispiel 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>

18 Views

19 Bu?on View Button besteht aus einem Text und/oder einem Icon Bei Klick wird irgendeine Aktion ausgeführt

20 Bu?on View Button besteht aus einem Text und/oder einem Icon Bei Klick wird irgendeine Aktion ausgeführt XML <Button" />

21 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

22 Bu?on 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" " " " */" " " }" " });

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

24 Bu?on View Möglichkeit 2

25 Bu?on 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

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

27 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">

28 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

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

30 EditText View Input type setzen

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

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

33 EditText View actionnext actiondone actionsend

34 EditText View actionnone actiongo actionsearch

35 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 handled = false;" " " " " " " " " return handled;" " " }" });

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

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

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

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

40 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

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

42 CheckBox View Möglichkeit 1

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

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

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

46 RadioBu?on View RadioButtons ermöglichen dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.

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

48 RadioBu?on View XML <RadioGroup" android:orientation="vertical" >" <RadioButton" android:checked="true"" <RadioButton" />" <RadioButton" />" </RadioGroup>

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

50 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;" " }" }

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

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

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

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

55 ProgressBar View Spezielle ProgressBars RatingBar Verwendung zur Dar- stellung einer Bewertung SeekBar Verwendung zum Setzen eines Wertes (z. B. Lautstärke)

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

57 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"... />"

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

59 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

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

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

62 Spinner View Zuweisung des String arrays an den Spinner res/layout/activity_main.xml res/values/strings.xml <?xml version="1.0" encoding="utf-8"?>" <LinearLayout xmlns:android="..." "... " <Spinner" " " " " "... </LinearLayout> <resources>..." <string-array name="spinner_values">" <item >Superman</item>" <item >Batman</item>" <item >Spiderman</item>" <item >Flash</item>" </string-array> " </resources>

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

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

65 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" " }" " });

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

67 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"" >

68 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

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

70 String- Array Zuweisung des String arrays an die Liste res/layout/activity_main.xml res/values/strings.xml <?xml version="1.0" encoding="utf-8"?>" <LinearLayout xmlns:android="..." "... " <ListView" " " " " "... </LinearLayout> <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>

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

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

73 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 */" " " }" });

74 LayouKng

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

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

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

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

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

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

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

82 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" >

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

84 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

85 TableLayout Beispiel " <TableLayout android:stretchcolumns="*" >" <TableRow" >" <TextView" android:text="text1" />" <TextView" android:text="text2" />" </TableRow>" <TableRow <Button" android:text="button1" />" <Button" android:text="button2" />" </TableRow>" </TableLayout>

86 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

87 TableLayout Shrink-Attribut <TableLayout..." android:shrinkcolumns="*">" <TableRow" " "..." " </TableRow>"...

88 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

89 TableLayout Stretch-Attribut <TableLayout..." android:stretchcolumns="0"" android:stretchcolumns="1,2"" android:stretchcolumns="*" " >" <TableRow...>"..." </TableRow>" </TableLayout>

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

91 RelaKveLayout <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>

92 RelaKveLayout RelativeLayout.LayoutParams RelativeLayout.LayoutParams.html

93 RelaKveLayout RelativeLayout.LayoutParams RelativeLayout.LayoutParams.html

94 <include/> Wiederverwendung von Layouts Oft ist es sinnvoll bestimmte Layouts wieder zu verwenden, um Mehrarbeit zu vermeiden Hierfür bietet Android das <include/> Element

95 <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:layout_width="wrap_content"" android:layout_height="wrap_content"" />" <Button" android:layout_width="wrap_content"" android:layout_height="wrap_content"" />" </LinearLayout>

96 <include/> Beispiel <RelativeLayout... >" <TextView" android:layout_width="wrap_content"" android:layout_height="wrap_content"" <EditText" android:layout_width="wrap_content"" android:layout_height="wrap_content"" <include" android:layout_width="match_parent"" android:layout_height="wrap_content"" />" </RelativeLayout>

97 PrakKkum

98 Ü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. verwendet werden.

99 Literatur I. Arno Becker, Marcus Pant, Android 4.4, 3.Auflage, dpunkt.verlag, ISBN: II. Thomas Künneth: Android 3 - Apps entwickeln mit dem Android SDK Galileo Press, 2011 III. Mark L. Murphy, Commonsware, The Busy Coder s Guide to Android Development IV. V.