Was sind Layouts in Android?
Layouts sind ein zentraler Bestandteil der Android-Entwicklung und spielen eine entscheidende Rolle bei der Gestaltung der Benutzeroberfläche (UI) einer App. In Android sind Layouts spezialisierte Unterklassen der ViewGroup-Klasse. Eine ViewGroup ist ein Container, der eine Sammlung von Views (Benutzeroberflächenelementen) enthält und dafür sorgt, dass diese innerhalb der Oberfläche richtig positioniert und angezeigt werden. Layouts definieren also, wie und in welchem Format einzelne Views in einer Activity oder einem Fragment angezeigt werden sollen.
Jedes Layout bestimmt, wie die verschiedenen Benutzeroberflächenelemente wie Buttons, Textfelder, Bilder und andere Views angeordnet werden. Es handelt sich dabei um grundlegende Bausteine jeder grafischen Benutzeroberfläche (GUI), die dafür sorgen, dass die App benutzerfreundlich und ästhetisch ansprechend aussieht. In Android gibt es verschiedene Layout-Typen, die jeweils für unterschiedliche Anwendungsfälle optimiert sind.
Zu den häufigsten Layouts gehören:
- LinearLayout: In einem LinearLayout werden Views entweder vertikal oder horizontal hintereinander angeordnet. Es ist besonders einfach zu verwenden, wenn du eine lineare Reihenfolge von Elementen auf dem Bildschirm benötigst.
- RelativeLayout: Bei einem RelativeLayout werden Views relativ zueinander und zur übergeordneten Ansicht angeordnet. Dies bietet mehr Flexibilität und ermöglicht es, Views an verschiedenen Positionen basierend auf anderen Views anzuordnen.
- ConstraintLayout: Dies ist ein leistungsstarkes und flexibles Layout, das es dir ermöglicht, Views anhand von Constraints (Beschränkungen) relativ zueinander und zum Eltern-Layout zu positionieren. Es ist der bevorzugte Layout-Typ, da es eine hohe Flexibilität bei der Gestaltung komplexer Layouts bietet und die Leistung optimiert wird.
- FrameLayout: FrameLayouts eignen sich für die Anzeige eines einzelnen Elements in der Mitte des Bildschirms oder als Container für überlappende Views. Häufig wird es in Kombination mit anderen Layouts verwendet, um bestimmte UI-Elemente hervorzuheben.
- GridLayout: Mit einem GridLayout kannst du Views in einer gitterähnlichen Struktur anordnen, ähnlich einer Tabellenstruktur. Dies ist besonders nützlich, wenn du eine strukturierte Anordnung von Elementen benötigst, wie etwa bei einem Taschenrechner oder einer Kalenderansicht.
Layouts sind nicht nur für die Positionierung von Views verantwortlich, sondern auch für die Handhabung von Bildschirmgrößen und -orientierungen. Android verwendet verschiedene Layout-Resourcen für unterschiedliche Bildschirmgrößen und -dichten (z.B. für Tablets, Smartphones und verschiedene Bildschirmauflösungen). Entwickler können mithilfe von Layout-Ordnern in den Ressourcen (z.B. layout, layout-land, layout-large) sicherstellen, dass die Benutzeroberfläche auf verschiedenen Geräten korrekt angezeigt wird.
Ein weiterer wichtiger Aspekt von Layouts ist die Performance. Verschiedene Layouts haben unterschiedliche Auswirkungen auf die Performance der App. Komplexe Layouts mit vielen verschachtelten ViewGroups können die Performance beeinträchtigen, was vor allem auf leistungsschwächeren Geräten bemerkbar ist. Daher ist es wichtig, das richtige Layout für den jeweiligen Anwendungsfall zu wählen und unnötige Verschachtelungen zu vermeiden.
Zusammengefasst sind Layouts in Android die grundlegenden Komponenten, die bestimmen, wie eine Benutzeroberfläche aussieht und funktioniert. Sie spielen eine wesentliche Rolle dabei, die User Experience (UX) zu gestalten, indem sie sicherstellen, dass die App sowohl optisch ansprechend als auch funktional ist. Das richtige Layout zu wählen und effizient zu gestalten, ist daher eine der wichtigsten Aufgaben bei der Entwicklung einer Android-App.
Wie werden Layouts erstellt?
Layouts können auf drei unterschiedliche Arten erstellt werden:
XML Du kannst Layouts und die dazugehörigen Eigenschaften in einer XML-Datei deklarieren und definieren. Diese Layout-XML-Dateien werden dabei im Ordner "res/layout" des Projektverzeichnisses abgelegt. Der folgende Screenshot zeigt dir beispielhaft die "activity_main.xml"-Datei mit einem deklarierten LinearLayout in der zweiten Zeile von oben und den definierten Eigenschaften (z.B. "layout_width" für die Layout-Breite) darunter:Vorteile von XML: -> App muss nicht neu kompiliert werden, wenn eine Änderung der Benutzeroberfläche vorgenommen wird -> Sofortiges Feedback über das Aussehen der Benutzeroberfläche in der Vorschau
Graphical-Layout-Editor Android-Studio bietet dir neben der Möglichkeit über XML einen nützlichen WYSIWG-Editor an, mit dessen Hilfe du UI-Elemente (z.B. Buttons) per Drag & Drop auf die Benutzeroberfläche deiner App bringen kannst. Android generiert dann im Hintergrund den XML-Code automatisch für dich und somit musst du als Entwickler streng genommen kein XML für das Gestalten der Benutzeroberfläche beherrschen. Auf folgendem Screenshot siehst du links die Palette mit allen Steuerelementen in Android-Studio und rechts daneben, wie diese auf dem User-Interfaces der App aussehen:Vorteile des Layout-Editors: -> Sofortiges Feedback über das Aussehen der Benutzeroberfläche in der Vorschau -> Keine XML-Kenntnisse notwendig -> App muss nicht neu kompiliert werden, wenn eine Änderung der Benutzeroberfläche vorgenommen wird
Java Neben der Verwendung von XML und Layout-Editor gibt es noch eine dritte Möglichkeit zur Beschreibung von Layouts: Java. Mit Java kannst du View-Objekte erzeugen, um die Benutzeroberfläche einer Android-Activity zu erstellen, konfigurieren und manipulieren. Java verwendest du insbesondere bei dynamischen Benutzeroberflächen, also wenn UI-Elemente erst zur Laufzeit einer App erzeugt werden sollen. Info: In der Vorschau von Android-Studio kannst du die per Java-Code erzeugten UI-Elemente nicht sehen, da diese erst zur Laufzeit hinzukommen. Im nachfolgenden Screenshot findest du auf der linken Seite den Java-Code und auf der rechten Seite die Layout-Darstellung im Emulator:Vorteil von Java: -> Ermöglicht die Erzeugung dynamischer Benutzeroberflächen
Wo werden Layouts geladen?
Sobald das Layout fertig beschrieben wurde, wird es in der "onCreate()"-Methode einer Activity geladen. Wenn die Activity gestartet wird, ruft das Android-Framework innerhalb dieser Methode die "setContentView()"-Methode auf und übergibt dieser Methode den Verweis auf die Layout-Ressource "activity_main.xml", wobei der Parameter für die Methode vollständig "R.layout.activity_main" lauten muss. Während der Kompilierung einer App wird dann die XML-Layoutdatei in eine View-Ressource kompiliert.
Welche Layout-Attribute gibt es?
In diesem Abschnitt möchten wir dich mit Layout-Attributen vertraut machen. Jedes Layout hat eine Reihe von Attributen, die die visuellen Eigenschaften eines Layouts definieren. Es gibt dabei nur wenige Attribute, die alle Layouts gemeinsam haben und relativ viele Attribute, die nur für ein spezifisches Layout gelten. Nachfolgend erklären wir dir hier nur ein Paar Attribute, da die Beschreibung aller Attribute den Rahmen sprengen würde.
android:id Innerhalb eines Layouts existieren View-Objekte, die über eine ID eindeutig identifiziert werden können. Nachfolgender Screenshot zeigt beispielsweise einen in XML definierten Button mit der ID in der ersten Zeile:
android:layout_width / android:layout_height Mit diesen Attributen kannst du die Breite (width) bzw. Höhe (height) eines Layouts definieren. Dabei kannst du diese beiden Attribute auf zwei unterschiedliche Weisen festlegen: -> match_parent: Bedeutet, dass das Layout so breit oder hoch wird, wie der darüber liegende Container (ein anderes Layout) -> wrap_content: Bedeutet, dass das Layout so breit oder hoch wird, wie es der Inhalt des Layouts erforderlich macht (wenn z.B. innerhalb des Layouts ein Button vorhanden ist, dann wird das Layout nur so breit oder hoch wie der Button)
android:layout_margin Mit diesem Attribut kannst du Abstand zwischen einer View (z.B. Button) oder einer ViewGroup (z.B. Layout) und seinen Nachbarn erzeugen. Mit "layout_margin" schaffst du den gleichen Abstand in alle Richtungen und mit "margin_top", "margin_bottom", "margin_left" und "margin_right" nur in die jeweilige Richtung. Auf dem Screenshot unten wurde z.B. ein LinearLayout mit 20dp Abstand in alle Richtungen zum äußeren Rand erstellt. Dabei wurde oben rechts im Properties-Fenster der entsprechende Wert 20dp für "layout_margin" festgelegt. Der Inhalt, d.h. die Views innerhalb des Layouts werden dabei entsprechend angepasst.
android:padding Mit diesem Attribut kannst du Abstand zwischen dem Inhalt einer View (z.B. Button) bzw. ViewGroup (z.B. Layout) und seinem Rand erzeugen. Mit "padding" schaffst du den gleichen Abstand in alle Richtungen und mit "padding_top", "padding_bottom", "padding_left" und "padding_right" nur in die jeweilige Richtung. Im Screenshot unten siehst du ein z.B. ein LinearLayout mit drei Buttons als Inhalt. Für das Padding wurde über das Properties-Fenster ein Wert von 50dp eingestellt, d.h. zwischen den Buttons (Inhalt des Layouts) und den Layout-Rändern wird ein Abstand von 50dp eingefügt.
Welche Arten von Layouts gibt es?
LinearLayout (Horizontal / Vertikal) Das LinearLayout ist eine ViewGroup, die alle UI-Elemente in eine Richtung ausrichtet, also entweder horizontal oder vertikal. Der nachfolgende Screenshot zeigt beispielhaft ein "horizontales LinearLayout", bei dem die Buttons auf einer unsichtbaren horizontalen Linie nebeneinander angeordnet sind:Beim "Vertikalen LinearLayout" werden dagegen die Buttons auf einer unsichtbaren vertikalen Linie übereinander angeordnet:
RelativeLayout Das RelativeLayout ist eine ViewGroup, die alle UI-Elemente in relativen Positionen zueinander anzeigt. Die Pfeile, die im folgenden Screenshot zwischen den Buttons zu sehen sind, zeigen an, wie die Buttons zueinander angeordnet sind. Also der "b-Button" ist relativ zum "a-Button" angeordnet und der "c-Button" relativ zum "b-Button".
TableLayout Beim TableLayout werden Views in Zeilen und Spalten gruppiert angeordnet. Um eine Zeile (Row) in der Tabelle zu bilden, musst du das UI-Element "<TableRow>" verwenden. Für die Bildung einer Spalte gibt es kein entsprechendes UI-Element, sondern jedes Element wird automatisch als Spaltenelement betrachtet. Jede Zeile hat null oder mehr Zellen und jede dieser Zellen kann genau ein View-Objekt enthalten, wobei sich ein View-Objekt über mehrere Spalten und Zeilen erstrecken kann.
FrameLayout Mit einem FrameLayout kannst du entweder ein einzelnes View anzeigen (z.B. ImageView) oder mehrere Views übereinander stapeln. Das Frame-Layout wird dabei oft als Container verwendet, da es in der Regel nur eine einzige untergeordnete View hat (meist ein anderes Layout), das dazu dient, mehrere Views zu organisieren. Im nachfolgenden Screenshot siehst du beispielhaft ein FrameLayout mit den beiden übereinander gestapelten UI-Elementen "ImageView" und "TextView".
GridLayout Das GridLayout ermöglicht die Anordnung von Views in einer scrollbaren Rasteransicht. Das GridLayout besteht aus einer Anzahl unsichtbarer horizontaler und vertikaler Gitterlinien, die dazu dienen, die Layout-Ansicht in Zeilen und Spalten zu unterteilen. Jedes UI-Element weist dabei sowohl eine Spalte, als auch eine Zeile auf und die View-Elemente können mehrere Spalten und Zeilen überdecken.
ConstraintLayout Das ConstraintLayout ist mit dem RelativeLayout ähnlich, aber flexibler und effizienter. Es wird verwendet, um UI-Elemente relativ zu anderen UI-Elementen mittels Constraints zu positionieren. Der Layout-Editor verwendet die Constraints, um die Position eines Oberflächenelements innerhalb des Layouts zu bestimmen. Ein Constraint stellt dabei eine Verbindung oder Ausrichtung zu einem anderen UI-Element dar. Du kannst Constraints entweder manuell erstellen oder automatisch mit dem Tool "Autoconnect". Der folgende Screenshot zeigt beispielhaft die Verwendung von "Autoconnect". Um dieses Tool einsetzen zu können musst du nur auf das Hufeisen-Symbol in der Toolbar klicken (standardmäßig sollte es bereits aktiviert sein). Info: Autoconnect ist eingeschaltet, wenn das Hufeisensymbol nicht durchgestrichen ist. Danach ziehst du eines der UI-Elemente (z.B. ImageView) aus der Palette an eine beliebige Position innerhalb des Layouts und lässt es dort los. Wenn du ein Oberflächenelement in die Mitte des Layouts positionierst, erstellt "Autoconnet" automatisch die Constraints vom UI-Element aus in alle Richtungen (gezackte Linien).
