13 Mai, 2018

Die wichtigsten Android Layouts – Android App Entwicklung für Anfänger #6

Hi, heute möchte ich dir die wichtigsten Layouts der Android Entwicklung vorstellen. Um die Layout-Elemente, welche du im letzten Teil (Die wichtigsten Layout-Elemente) kennengelernt hast, anordnen zu können benötigst du ein Layout. Dieses bildet eine Art Gerüst, auf dem du die Layout-Elemente Anordnen kannst. Je nach Layout geschieht dies auf eine andere Weise.

Übersicht

Allgemeines

Wie fügt man eine Layoutdatei hinzu?

Zuerst müssen wir klären, wie du überhaupt eine neue Layoutdatei in dein Projekt einfügen kannst.

  • Öffne das Projektdateienverzeichnis.
  • Öffne den „res“-Ordner
  • Hier machst du nun einen Rechtsklick auf den „layout“-Ordner

  • Im folgenden Optionsmenü wählst du „new -> Layout resource file“

  • Nun kannst du einen Namen vergeben und mit ok bestätigen, um die Layoutdatei zu erstellen.

Layout Editor und XML

Wie schon in den vorherigen Teilen erwähnt, hast du die Möglichkeit zwischen dem Layout Editor und der text-basierten XML-Schreibweise. Wie immer steht dir frei, welche Option du wählen möchtest. Ich kann dir nur empfehlen beide zu verwenden, da dadurch dein Workflow verbessert wird.

ConstraintLayout

Das ConstraintLayout ist ein Layout, welches dir erlaubt, die Position und Größe deiner Layout-Elemente flexibel anzupassen. Hierbei werden sogenannte „Constraints“ verwendet, welche die Bedingungen, die für die Positionierung dienen, darstellen.

ConstraintLayout zum Projekt hinzufügen

Das ConstraintLayout ist in der Android Support Library enthalten und abwärtskompatibel bis Android Version 2.3 (Api 9). Daher musst du dieses erst zu deinem Projekt hinzufügen. Hierfür öffnest du einfach die „build.gradle“ Datei deines Projektes und fügst unter dem Punkt dependencies folgende Zeile ein:

Die wichtigsten Constraints

Relative Positionierung

Die Relative Positionierung stellt ein wichtiges Element beim Erstellen von ConstraintLayouts dar. Mit dieser wird ein Element relativ (d. h.  im Verhältnis) zu einem anderen positioniert. Diese Positionierung kann sowohl in horizontale als auch in vertikale Richtung angewendet werden:

  • Horizontal: links, rechts, Start- und Endseite
  • Vertikal: oben, unten, text baseline (Textgrundlinie, ab der der Text beginnt)

Bei diesem Beispiel wird der zweite Button unterhalb des ersten positioniert. Allgemein musst du bei dieser Methode immer einen Parent(Elternelement), an dem sich orientiert werden soll, mit seiner id angeben. Um die Beziehung zwischen den beiden Elementen anzugeben, stehen dir mehrere Constraints, die alle nach demselben Prinzip funktionieren, zur Verfügung.

app:layout_constraint[Seite des Layout Elements, welches positoniert werden soll]_to[Seite des Parents]Of=“@id/[Id des parents]“

Beispiel von oben:

app:layout_constraintTop_toBottomOf=“@id/button1″

Hier wird die obere Seite des Buttons genommen und ins Verhältnis zur unteren des Parents gesetzt.

Margins

Margins geben an, wie viel Platz zwischen dem Element und seinem Parent gelassen werden soll.

Hierbei gibt es wieder einen allgemeinen Aufbau der Constraints:

android:layout_margin[Seite des Elements, auf die die Margin angewandt werden soll]=“[Größe des Abstandes]“

Bsp:

android:layout_marginLeft=“16dp“

Dieser Ausdruck gibt an, das für dieses Element ein Abstand von 16dp an der linken Seite eingehalten werden soll.

Chains

Chains verbinden mehrere Objekte zu einer Art Gruppe. Dieses Gruppenverhalten zeigt sich aber nur auf eine der beiden Achsen (horizontal oder vertikal), daher können die Constraints der anderen Achse unterschiedlich sein.

Wie kann man eine Chain erstellen?

Um eine Chain zu erstellen, müssen die Layoutelemente auf einer Seite gegenseitig verbunden sein. Zum Beispiel muss das erste Element eine Constraint von der End-Seite zur Start-Seite des anderen haben und das zweite Element genau in die andere Richtung.

Chain Head

Der Chain Head ist das Layout Element, welches mit seinen Attributen die anderen Elemente des Chains steuert. Dieser Chain Head entspricht in einer horizontalen Chain immer dem Element, welches am weitesten links ist. Genauso entspricht in einer vertikalen Chain das oberste Element dem Chain Head.

Chain Style

Es gibt verschiedene Arten, wie sich eine Chain verhalten soll. Dieses Verhalten wird mit dem sogenannten Chain Style angegeben:

  • „chain_spread“: Bei diesem Style verteilen sich die Elemente auf den ganzen verfügbaren Raum (Normalfall).
  • „chain_spread_inside“: Ähnlich wie bei „chain_spread“, aber die äußersten Elemente verteilen sich nicht.
  • „chain_packed“: Die Elemente ordnen sich nebeneinander an.

Diesen Chain Style kann man mit den folgenden Attributen festlegen:

  • app:layout_constraintHorizontal_chainStyle=“[chain style]“
  • app:layout_constraintVertical_chainStyle=“[chain style]“

Guidelines

Guidelines sind Linien, welche nicht sichtbar sind und nur für Layout Zwecke dienen. Mit ihnen kannst du andere Elemente positionieren und somit mehrere Elemente an einer Linie ausrichten. Um dies zu machen, gibst du einfach bei dem Element, welches positioniert werden soll, die Id der Guideline als Referenz an.  Generell gibt es, wie schon bei den Chains, zwei verschiedene Guidelines (horizontal und vertikal). Neben diesen Typen stehen dir drei verschiedene Möglichkeiten zur Verfügung, um diese auch zu positionieren:

  • „layout_constraintGuide_begin“: Dies gibt an, wie weit die Guideline von der linken bzw. der oberen Kante des Layouts entfernt ist.
  • „layout_constraintGuide_end“: Ähnlich wie oben, nur diesmal die rechte bzw. untere Kante.
  • „layout_constraintGuid_percent“: Gibt mit einem Prozentwert an, wo die Guideline in der Höhe oder Breite positioniert sein soll.

LinearLayout

Das LinearLayout ordnet die Layoutelemente in einer großen Spalte bzw. Zeile an. Dies hängt von der Orientierung, welche horizontal oder vertikal sein kann, ab.

Die Orientierung gibst du mit folgendem Attribut an:

android:orientation=“[Orientierung, welche das Linear Layout haben soll]“

Um anzugeben, wie das Layout seine Elemente anordnen soll, nutzt du android:gravity:

android:gravity=“[gewünschte Option]“

Mit android:layout_weight kannst du für einzelne Elemente angeben, wie der restliche freie Platz aufgeteilt werden soll:

android:layout_weight“[gewünschter Wert]“

FrameLayout

Das FrameLayout ermöglicht es dir ein Element über andere zu platzieren. Hierbei solltest du immer nur ein Element mit dem FrameLayout anordnen, da es sonst schwer wird, die Elemente korrekt zu platzieren. Das Element, welches zuletzt hinzugefügt wurde, ist immer ganz oben.

Wie geht es nun weiter?

Nun hast du mit diesem und dem letzen Teil die wichtigsten Layoutelemente und Layouts kennengelernt. Mit diesem Wissen kannst du nun deinen eigenen Layouts basteln und eine Benutzeroberfläche für deine Apps schaffen. Diese nimmt zwar eine wichtige Rolle für die Entwicklung einer App ein, ist aber ohne die passende Logik nutzlos. Daher möchte ich im nächsten Teil damit beginnen, dir die wichtigsten App Elemente vorzustellen. Diese bilden die Grundlage der App Logik und sollten daher verstanden werden.

Link zum nächsten Teil:

Das könnte dich auch interessieren...