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

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

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

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

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

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

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

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

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

13 GUIs

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

15 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

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

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

18 Beispiel Hello World <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" tools:context=".mainactivity" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="example Application 1" /> <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:layout_weight="1" /> </LinearLayout> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="say Hello?" /> </LinearLayout>

19 Views

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

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

22 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

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

24 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 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="say Hallo" android:id="@+id/button" android:onclick="btnclick" />

25 BuAon View Möglichkeit 2

26 BuAon View 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 public void btnclick(view view) { // do magic... } genau 1 Parameter: View

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

28 EditText View EditText Views ermöglichen dem Benutzer die Eingabe von Text Tastatur öffnet sich automatisch nach Touch XML <EditText android:inputtype="textpersonname" android:text="name" />

29 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

30 EditText View InputType Beispiele Klasse Text Number Text Variation textcapsentences numberdecimal textpassword

31 EditText View Input type setzen

32 EditText View Input type setzen XML <EditText android:inputtype="textcapwords textautocomplete" android:text="name" /> programmatisch edittext = (EditText) findviewbyid(r.id.edittext); edittext.setinputtype(inputtype.type_text_flag_cap_words InputType.TYPE_TEXT_FLAG_AUTO_COMPLETE);

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

34 EditText View actionnone actiondone actionsend

35 EditText View actionnext actiongo actionsearch

36 EditText View Auf Keyboard action reagieren edittext.setoneditoractionlistener(new EditText.OnEditorActionListener() public boolean oneditoraction( TextView v, int actionid, KeyEvent event) { boolean handled = false; return handled; } });

37 EditText View Weitere Eigenschaften Hint text <EditText... android:hint="guess your Name... /> Bilder <EditText... android:text="" android:hint="guess your Name..." />

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

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

40 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="fill_parent" android:layout_height="wrap_content" android:text="beer" android:checked="true" />

41 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

42 CheckBox View 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" />

43 CheckBox View Möglichkeit 1

44 BuAon View Möglichkeit 1 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert genau ein Parameter: View <CheckBox android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="beer" android:id="@+id/chkbeer" android:onclick="onbeerboxclicked" android:checked="true" /> public void onbeerboxclicked(view view) { CheckBox cb = (CheckBox) findviewbyid(r.id.chkbeer); if (cb.isselected()) { /* do something */ } else { /* do it not... */ } }

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

46 CheckBox View Möglichkeit 2 Alternative: programmatische Zuweisung eines OnCheckedChangeListener CheckBox cb = (CheckBox) findviewbyid(r.id.chkbeer); cb.setoncheckedchangelistener (new CompoundButton.OnCheckedChangeListener() public void oncheckedchanged( CompoundButton buttonview, boolean ischecked) { /* state =!state */ } });

47 RadioBuAon View RadioButtons ermöglichen dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.

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

49 RadioBuAon View XML <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content"> <RadioButton <RadioButton <RadioButton <RadioButton android:checked="true" /> </RadioGroup>

50 RadioBuAon View auf Auswahl reagieren Angabe der Activity-Methode <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content"> <RadioButton android:onclick="rbselect"/> <RadioButton android:onclick= rbselect" /> <RadioButton android:onclick="rbselect"/> <RadioButton android:onclick="rbselect" android:checked="true" /> </RadioGroup>

51 RadioBuAon View Implementierung in Activity Regeln für Signatur analog zu Button und CheckBox 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; } }

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

53 ProgressBar View ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen <ProgressBar... android:progress="70" android:max="100" />

54 ProgressBar View style Attribute bestimmt die Form der ProgressBar <ProgressBar... style=?android:attr/progressbarstylehorizontal" android:progress="70" android:max="100"/>

55 ProgressBar View 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"/>

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

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

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

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

60 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

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

62 Spinner View 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>

63 Spinner View res/values/strings.xml Zuweisung des String arrays an den Spinner <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=" android" xmlns:tools=" <Spinner android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>

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

65 Spinner View 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);

66 Spinner View Auf eine Auswahl reagieren s.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 } });

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

68 List View ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen XML <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" />

69 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

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

71 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:layout_gravity="center_horizontal" />

72 List 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.listview); lv.setonitemclicklistener( new AdapterView.OnItemClickListener() public void onitemclick( AdapterView<?> parent, View view, int position, long id) { /* magic again... */ } });

75 LayouLng

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 android:layout_width="260dp" android:layout_height="260dp" android:layout_gravity="center_horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="button" /> </FrameLayout>

80 FrameLayout kann auch mehrere, gestapelte Views enthalten Darstellung nach Einfügereihenfolge <FrameLayout android:layout_width="260dp" android:layout_height="260dp" android:layout_gravity="center_horizontal"> <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:layout_gravity="center" /> </FrameLayout>

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

82 LinearLayout Orientierung <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns: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" /> <EditText android:layout_width="173dp" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="new Button" /> </LinearLayout>

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

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

85 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

86 TableLayout Beispiel <TableLayout android:stretchcolumns="*" android:gravity="center"> <TableRow android:gravity="center"> <TextView android:text="large Text" /> <TextView android:text="large Text" /> </TableRow> <TableRow android:gravity="center"> <Button android:text="new Button" /> <Button android:text="new Button" /> </TableRow> </TableLayout>

87 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

88 TableLayout Shrink-Attribut <TableLayout android:shrinkcolumns="*" <TableRow > <Button /> <Button /> <Button /> <Button /> </TableRow> </TableLayout>

89 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

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

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

92 RelaLveLayout <RelativeLayout > <TextView android:text="example Application 1" android:layout_alignparenttop="true" android:layout_alignparentend="true" /> <TextView android:text="enter your Name" android:layout_alignparentstart="true" /> <EditText android:layout_alignparentstart="true" /> <Button android:text="say Hello?" android:layout_alignparentend="true" /> </RelativeLayout>

93 RelaLveLayout RelativeLayout.LayoutParams RelativeLayout.LayoutParams.html

94 RelaLveLayout RelativeLayout.LayoutParams RelativeLayout.LayoutParams.html

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

96 <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:layout_weight="1" android:layout_gravity="center_horizontal" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cancel" android:layout_weight="1" android:layout_gravity="right" /> </LinearLayout>

97 <include/> Beispiel <LinearLayout <TextView android:text="example Application 1" /> <LinearLayout <TextView /> <EditText /> </LinearLayout> <include android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

98 PrakLkum

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

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