App Entwicklung mit dem Android SDK

Transkript

1 App Entwicklung mit dem Android SDK Grafische Benutzeroberfläche Dominik Wagner Informatik Sommercamp

2 Kurze Übersicht Um ein Layout für eine Android-Anwendung zu definieren schreibt man im ersten Schritt eine XML-Datei. Diese XML-Datei wird automatisch in Java-Code übersetzt. In der oncreate-methode unserer Anwendung wählen wir die Layout-Datei aus. Mit findviewbyid(...) können wir uns ein Element der GUI nehmen und z.b. einen Listener anhängen.

3 XML - Einführung XML steht für extensible Markup Language. Wer HTML kann, kann XML. Für alle anderen gilt: XML verwendet so genannte Tags. Ein Tag kann aufgemacht werden: <xml> Ein Tag kann zugemacht werden: </xml> Ein Tag kann auf- und zugemacht werden: <xml /> Ein Tag hat Attribute: <xml attr="text"...> Ein Tag hat Tags und Text: <a><b><c>text</c></b></a>... mehr später

4 XML - Beispiel <?xml v e r s i o n= 1. 0 e ncoding= utf 8?> <L i n e a r L a y o u t a n d r o i d : i d /Game > <L i n e a r L a y o u t a n d r o i d : l a y o u t m a r g i n= 15dp > <i n c l u d e l a y o u /row /> </ L i n e a r L a y o u t> <R e l a t i v e L a y o u t> <ImageView a n d r o i d : s r / c i r c l e /> </ R e l a t i v e L a y o u t> </ L i n e a r L a y o u t>

5 Android-Layout mit XML 1/2 Wie ein HTML-Dokument besteht auch eine Layoutdatei zum einen aus gruppierenden Elementen (ViewGroups) und aus sichtbaren Objekten (Views). Zu den Gruppen gehören: LinearLayout RadioGroup RelativeLayout... Zu den Views gehören Elemente wie Button ImageView RadioButton...

6 Android-Layout mit XML 2/2 Gruppen können beliebig ineinander verschachtelt werden. Irgendwann muss man natürlich innerhalb einer Gruppierung Elemente anordnen. Beispiele hierzu findet man bei Hello, Views Dort wird auch erklärt, welche Bedeutung die Attribute der einzelnen Tags haben.

7 Mehr XML... Es gibt noch ein paar Sachen, die per XML definiert werden können: Texte (res/values/strings.xml) Styles (res/values/styles.xml) Graphiken (res/values/drawable/... )... Auch hierzu gibt es auf den Webseiten des Android-SDKs Beispiele.

8 findviewbyid 1/3 Um auf ein Objekt des Layouts zugreifen zu können gibt es die Funktion findviewbyid(). Die ID eines Objekts ist in der XML-Datei durch das Attribute android:id gibt an, dass es sich hierbei um eine ID handelt. Das + fügt man zusätzlich ein, wenn eine ID neu ist. Um nun auf das Objekt mit der ID CurrentColumn3 zugreifen zu können, schreibt man folgendes in Java: View v = findviewbyid(r.id.currentcolumn3);

9 findviewbyid 2/3 Da wir einen Button von einer ImageView unterscheiden möchten, müssen wir an vielen Stellen passend casten: Button b = (Button) findviewbyid(r.id.button); ImageView i = (ImageView) findviewbyid(r.id.image);

10 findviewbyid 3/3 Manchmal gibt es eine ID auch mehrfach. Um zu entscheiden, welches Objekt gemeint ist, rufen wir findviewbyid auf der ViewGroup auf, in der sich das Objekt befindet: ViewGroup c = (ViewGroup) findviewbyid(r.id.row1); ImageView i = (ImageView) c.findviewbyid(r.id.image); ViewGroup d = (ViewGroup) findviewbyid(r.id.row2); ImageView j = (ImageView) d.findviewbyid(r.id.image);

11 android:, xmlns:, mm: Die Attribute der XML-Tags haben verschiedene Präfixe. In den meisten Fällen android:, manchmal gar keine und dann gibt es noch xmlns: und mm:. Eine ausführliche Erklärung hierzu liefert Die einfache Erklärung ist:

12 android:, xmlns:, mm: Die Attribute der XML-Tags haben verschiedene Präfixe. In den meisten Fällen android:, manchmal gar keine und dann gibt es noch xmlns: und mm:. Eine ausführliche Erklärung hierzu liefert Die einfache Erklärung ist: Macht euch keine Gedanken darüber und verwendet es so, wie es in unseren Beispieldateien zu sehen ist oder es in den Dokumentationen des SDKs beschrieben ist.

13 Weiterführende Informationen Hello, Views User Interface Application Resources Layout Tricks: Creating Reusable UI Components User Interface Guidlines Declaring a custom android UI element using XML Die mit * markierten Seiten sind hilfreich für die App-Entwicklung, die anderen könnt ihr euch anschauen, wenn ihr euch detailierter informieren möchtet.