Medientechnik:

App-Entwicklung
Layout
Layout - Einführung
• Jede “Seite” ist einer Activity zugeordnet
• Layout-File definiert die Gestaltung der Activity

• Layout besteht aus ineinander verschachtelten Containern

• Werden ViewGroups genannt
• Hierarchischer Aufbau

2
Layout - ViewGroups
• Eine ViewGroup selbst ist unsichtbar
• Dient lediglich zur Strukturierung

Quelle: https://developer.android.com/guide/topics/ui/declaring-layout.html
3
Layout – Layout-File
• Das Layout-File ist üblicherweise eine XML-Datei

• Ist unter app/res/layout zu finden

• Wird nach der dazugehörigen Activity benannt

• Z.B.: MainActivity.java -> activity_main.xml

4
Layout – Layout Designer
• Layout Designer ist Teil von Android Studio
• Ansicht der Layout-Datei

• Wechsel zwischen Text- und Design-Ansicht ist möglich

• Design-Ansicht
• Grafische Ansicht
• Gestaltung mit Maus möglich
• Benutzerfreundlich
• Ideal in Kombination von ConstraintLayout
5
Layout – Design-Ansicht

6
Layout – Text-Ansicht
• Wurzelelement ist immer eine ViewGroup

• Beliebig verschachtelbar

• Name des XML-Elements entspricht immer der View-Klasse

• Z.B.: <TextView> -> TextView

• Editor unterstützt den User bei der Eingabe

• Vorauswahl blendet sich ein
7
Layout – Text-Ansicht

8
Layout – Text-Ansicht
• View-Elemente können über Attribute konfiguriert werden
• Für Texte sollte man immer mit IDs (Ressources) arbeiten
• Z.B. android:startYear bei DatePicker

9
Layout – ViewGroups
• Linear Layout
• Einfachstes Layout
• Ordnet Elemente wahlweise unter- oder nebeneinander an
• Orientation-Attribut definiert die Ausrichtung

• Relative Layout
• Ordnet Elemente relative zueinander bzw. Relativ zu Rändern an
• Z.B. android:layout_below=”@id/beschriftung”
• Eignet sich für komplexere Layouts

10
Layout – ViewGroups

Quelle: https://developer.android.com/guide/topics/ui/declaring-layout.html
11
Layout – Relative Layout

12
Layout – ViewGroups
• Weitere ViewGroups

• Constraint Layout
• Für flexible Gestaltung der GUI

• Table Layout

• ListView

• GridView

• Uvm.
13
Layout – Layout Attribute
• Breite und Höhe
• Konkrete Werte (z.B. px für Pixel) oder auch z.B. match_parent

• Abstand (z.B. layout_marginBottom)

• Auflistung der Layouts und deren Attribute:

• https://www.tutorialspoint.com/android/android_user_interface_layouts.htm

14
Layout – Weiterführende Links
• https://www.tutorialspoint.com/android/android_user_interface_layo
uts.htm

• https://developer.android.com/guide/topics/ui/declaring-layout.html

• https://developer.android.com/guide/topics/ui/layout/linear.html

• https://developer.android.com/guide/topics/ui/layout/relative.html

15