App-Entwicklung für Android XML / Layouts Hochschule Darmstadt WS15/16 1
Inhalt XML Layouts Layouttypen Dimensions View Element Designs Farben Strings 2
XML XML ist eine Meta-Sprache zur Festlegung der Syntax von Auszeichnungssprachen 3
Extensible Markup Language Meta-Sprache Keine Programmier-/Auszeichnungssprache International standardisiert Keine feste Anzahl von Auszeichnungselementen wie z. B. bei HTML Dient zur Datenspeicherung 4
Merkmale von XML Bietet eine Methode zum Einfügen strukturierter Daten in eine Textdatei Ähnelt HTML Von Maschinen und Menschen lesbar Lizenzfrei und plattformunabhängig 5
Merkmale von XML XML verwendet Tags (wie HTML) Tags können frei definiert werden XML definiert die logische Struktur von Dokumenten Praktisch kann jedes Datenmodell nach XML serialisiert werden 6
XML in Android Manifest Layouts Actionbar Menüs App Styles Objektstyles Strings (je Sprache) Dimensions Farben Animationen 7
Aufbau Ein XML Dokument besteht immer aus mindestens einem Element und Inhalt <person>john Doe</person> 8
root element Ein XML Dokument besteht aus einem Root-Element und Sub-Elementen <person> <name>john Doe</name> <personalid>803</personalid> </person> 9
Subelemente dürfen mehrfach vorkommen <books> <title>a Tale Of Two Cities</title> <title>the Lord of the Rings</title> <title>the Da Vinci Code</title> </books> 10
Schreibweisen <uses-permission android:name="android.permission.vibrate"/> <uses-permission android:name="android.permission.vibrate"> </uses-permission> 11
Attribute Elemente können Attribute zur genaueren Beschreibung beinhalten <person> <name>john Doe</name> <born date="01.02.1980"/> <temperature unit="c">22</temperature> </person> 12
Mehrere Attribute <supports-screens android:anydensity="true" android:largescreens="true" android:normalscreens="true" android:resizeable="true" android:smallscreens="true" android:xlargescreens="true" /> 13
Kommentare können einzeilig oder mehrzeilig sein <!-- This is a comment --> <!-- This is a comment --> 14
Kommentare dürfen Attribute nicht trennen <supports-screens android:anydensity="true" android:largescreens="true" <!-- you had one job--> android:normalscreens="true"/> 15
Regeln Genau ein Root-Element Elemente können ineinander verschachtelt sein Jedes Element das geöffnet wird muss geschlossen werden Elemente und Attribute dürfen keine Sonderzeichen beinhalten oder mit "xml" beginnen Attribute müssen in "xyz" oder 'xyz' eingeschlossen sein 16
Beispiel eines Button Objekts <Button android:id="@+id/button_ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_alignparentright="true" android:onclick="myonclickmethod" android:visibility="invisible" android:text="ok" /> 17
Layouts 18
Layouts Jede Bildschirmseite (Activity) besitzt ein Layout Layouts liegen im Verzeichnis res/layout Layouts sind XML Dateien Für verschiedene Bildschirmgrößen/Auflösungen werden evtl. mehrere Layouts je Bildschirmseite benötigt 19
Layouts Unterscheidung zwischen Portrait- und Landscapeansicht res/layout-land [Landscape] main.xml res/layout-port [Portrait] main.xml Quelle: [1] 20
Verschiedene Gerätegrößen Layouts für verschiedene Größen werden in Ordnern organisiert res/layout/main.xml - default screen size res/layout-large/main.xml - large screen size res/layout-xlarge/main.xml - extra-large screen size res/layout-xlarge-land/main.xml - extra-large in landscape orientation (deprecated!) Android wählt automatisch zur Laufzeit die bestmögliche Größe Quelle: [2] 21
Verschiedene Gerätegrößen Seit Android 3, direkte Angabe der DP im Ordnernamen res/layout/main.xml - default screen size res/layout-sw360dp/main.xml - 5-6", FullHD bis QHD (Note 4) res/layout-sw600dp/main.xml - 7" Tablets (Nexus 7) res/layout-sw720dp/main.xml - 10" Tablets (Nexus 10) Android wählt automatisch zur Laufzeit die bestmögliche Größe 22
Verschiedene Gerätegrößen Grafiken für verschiedene Größen res/drawable-mdpi/graphic.png - medium-density res/drawable-hdpi/graphic.png - high-density res/drawable-xhdpi/graphic.png - extra-high-density res/drawable-xxhdpi/graphic.png - extra-extra-high-density Android wählt automatisch zur Laufzeit die bestmögliche Größe 23
Keine Anpassung an die Auflösung Angepasste Grafiken/Layouts Quelle: [2] 24
Layouts FrameLayout LinearLayout (Vertical) LinearLayout (Horizontal) TableLayout GridLayout RelativeLayout 25
FrameLayout Objekte können übereinander liegen Wird selten verwendet 26
FrameLayout 27
LinearLayout Vertical Anordnung von Elementen in Spalten Elemente werden untereinander in die Spalten sortiert Drei Spalten (layout_gravity left, center, right) Ein Element kann über alle Spalten gehen (layout_width="match_parent") Höhe der Elemente kann über layout_weight gesetzt werden Quelle: [3] 28
29
LinearLayout Horizontal Anordnung von Elementen in Zeilen Elemente werden nebeneinander eingefügt Eine Zeile pro Layout Breite kann über layout_weight angepasst werden Quelle: [3] 30
31
TableLayout Anordnung der Elementen in einer Matrix Breite und Höhe der Zellen wird über die Elemente festgelegt Unperformant Zeilenbasierte Struktur, <TableRow> 32
TableLayout Lange und unübersichtliche XML (hier 87 Zeilen) 33
GridLayout Anordnung in Zeilen und Spalten (Grid) Elemente können über mehrere Zeilen verlaufen Ähnlichkeit zum TableLayout ohne <TableRow> Nutzung von Attributen zur Ausrichtung im Element android:layout_row="0" android:layout_column="0" 34
... 35
RelativeLayout Elemente richten sich aneinander aus (Relation) Nutzung von Align, Margin, Padding zur Ausrichtung Meist genutztes Layout Performanteste Layout Quelle: [4] 36
RelativeLayout Objekte richten sich immer relativ zu etwas aus. z. B. dem Rand oder anderen Elementen. 37
Guidelines http://developer.android.com/guide/topics/ui/index.html http://developer.android.com/design/index.html 38
Dimensions dimens.xml Dateien werden genutzt um Attribute von Elementen auf verschiedene Displaygrößen anzupassen Vorteil - es muss nicht jedes mal ein komplett neues Layout gestaltet werden, wenn sich nur die Größe von Elementen ändert 39
Dimensions Es wird eine dimens.xml je Displaygröße erstellt res/values/dimens.xml - default screen size res/values-sw360dp/dimens.xml - 5-6", FullHD bis QHD (Note 4) res/values-sw600dp/dimens.xml - 7" Tablets (Nexus 7) res/values-sw720dp/dimens.xml - 10" Tablets (Nexus 10) 40
dimens.xml 41
dimens in einer TextView 42
Design von View Elementen über XML-Dateien Optische Anpassung von View Elementen Vorgefertigte Attribute..\res\drawable\button_style.xml Design für Element-states z. B. state_pressed (Design wenn Button gedrückt) 43
... 44
Farben \res\values\color.xml Farbwerte (hex) definiert durch Namen Farben können Appweit schnell geändert werden Transparenz 45
Strings \res\values\strings.xml Sollte alle dargestellten Texte der App enhalten Alle Beschriftungen, z. B. für Buttons, TextViews Strings lassen sich Appweit schnell anpassen 46
Strings - Sprachen Leichtes hinzufügen von mehreren Sprachen Deutsch \res\values-de\strings.xml Spanisch \res\values-es\strings.xml Default Sprache \res\values\strings.xml Sprache wird von Android automatisch über die Systemsprache gewählt Wenn Sprache nicht vorhanden, dann Default Sprache 47
Strings - Sprachen...\res\values\strings.xml...\res\values-de\strings.xml 48
Strings - Sprachen...\res\values\strings.xml...\res\values-de\strings.xml... 49
Initialisieren von View-Elementen Jedes View-Element das zur Laufzeit geändert wird, muss über die ID initialisiert werden 50
Quellen [1] http://developer.android.com/training/basics/supporting-devices/screens.html [2] http://developer.android.com/guide/practices/screens_support.html [3] http://developer.android.com/guide/topics/ui/layout/linear.html [4] http://developer.android.com/guide/topics/ui/layout/relative.html 51