Mit iOS9 wurde die UIStackView eingeführt. Dabei handelt es sich um eine Container-View, die selbst keine Inhalte darstellt. Stattdessen “stapelst” (vom englischen to stack) Du andere View-Elemente. Anders ausgedrückt gruppierst Du einfach mehrere Elemente. Die Stackview macht die Gestaltung von Oberflächen leichter. Sie macht es Dir insbesondere leichter  später Veränderungen vorzunehmen, ohne dass AutoLayout Constraints direkt neu entworfen werden müssen.

Welches Problem lösen Stack Views?

Die Stackview macht die Arbeit mit dem AutoLayout einfacher. Es müssen insgesamt weniger Constraints hinzugefügt und verwaltet werden. Das bedeutet weniger Arbeit für Dich als Entwickler. Aber auch die Performance kann profitieren. Immerhin müssen einfach weniger Berechnungen durchgeführt werden. Gleichermaßen bleibt auch das Interface flexibler. Stell Dir folgendes Szenario ohne die Stackview vor:

Screen Shot 2016-01-12 at 08.57.39

In der View für Settings gibt es zu jeder Einstellung einen Schalter (UISwitch), eine Überschrift und die Beschreibung (jeweils UILabel). Das Label mit der Überschrift lasse ich hier mal außen vor. Du legst also mit AutoLayout Constraints die Position der Einstellungen fest.

Zunächst muss der Abstand des Schalters zum linken Rand festgelegt werden. Anschließend wird für die Label ebenfalls Abstand nach links festgelegt. So wächst und verkleinert es sich dynamisch, je nach Display. Jetzt kommt der Knackpunkt: Für alle Elemente wird der Abstand nach oben festgelegt. So bleibt die Anordnung bestehen.

In Summe erzeugst Du also folgende Constraints:

  • Abstand vom Switch nach links zum Rand fixieren (3 Regeln)
  • Abstand der Label für Titel und Beschreibung nach links fixieren (6 Regeln)
  • Abstand aller Elemente nach oben fixieren (9 Regeln)

Es entstehen eine ganze Reihe verschiedener Constraints, ganz genau sind es 18 Regeln. Jetzt die Gretchenfrage. Was passiert, wenn Du zwischen “Caching aktivieren” und “Logging” eine Einstellung hinzufügen möchtest? Dann musst Du die bisherigen Regeln aufbrechen und neue definieren. In diesem vergleichsweise trivialen Interface eine lösbare Aufgabe. Es geht aber in der Praxis auch noch deutlich komplizierter. Die Alternative? Die UIStackView.

Die Überschrift positionieren

Das Label oben ist eine Überschrift. Sie wird per AutoLayout positioniert. Im ersten Schritt wählst Du das Label aus und legst die Breite und Höhe fest. Auch der Abstand nach oben wird festgelegt:

Screen Shot 2016-01-12 at 12.05.04

Damit es zentriert angezeigt wird, nutzt Du den Align Dialog. Dort wählst Du Horizontally in Container aus:

Screen Shot 2016-01-12 at 12.06.48

Eine UIStackView hinzufügen

Starte mit einer leeren View. Anschließend ziehst Du eine Stack View, wie jedes andere View-Element auch, per Drag&Drop aus der Objekt-Bibliothek unten rechts:

stackview-xcode-library

Du siehst, es gibt zwei Varianten, eine horizontale Stack View und eine vertikale Stack View. Entweder werden die Elemente also nebeneinander oder über- und untereinander gruppiert. Das Icon deutet das auch optisch an. Beginn mit einer vertikalen Stack View. Sie wird unterhalb der Überschrift positioniert und soll später den ganzen Bereich darunter ausfüllen, in etwa wie folgt:

Screen Shot 2016-01-12 at 10.35.41

Über AutoLayout Constraints wird jetzt die Stack View positioniert. Der Abstand nach links und rechts wird auf 15 gesetzt. Der Abstand nach oben, der sich auf das Label mit der Überschrift bezieht, wird ebenfalls festgelegt und der vorgegebene Wert übernommen. Nutz den Pin Dialog und wähl die Option Constrain to margin nicht aus:

Screen Shot 2016-01-13 at 08.23.31

Wichtig, nach unten wird der Abstand nicht fixiert. Ansonsten wird immer der ganze freie Platz genutzt. Wenn es nur zwei oder drei Einstellungen gibt, sieht das am Ende komisch aus.

Die einzelnen Einstellungen werden jeweils in einer Stack View gruppiert. Du musst also nun mehrere Stack Views verschachteln.

Die Swift-Akademie

Aktuelles Know-How für erfolgreiche Swift-Entwicklung

Lern Swift im Detail kennen, entdecke die Apple-Frameworks und entwickle praxisnahe Apps.

Jetzt anmelden

Mehrere Stack Views verschachteln

Verschachteln? Das bedeutet, dass Du eine Stack View in einer Stack View ablegst. Die Einstellungen aus dem ersten Screenshot oben zeigen mehrere Elemente, die nebeneinander angeordnet sind. Deshalb fügst Du nun eine horizontale Stack View hinzu. Einfach per Drag&Drop auf der vorhandenen Stack View ablegen. Das Ergebnis sieht wie folgt aus:

Screen Shot 2016-01-12 at 11.52.14

Spannend ist auch ein Blick in die Document Outline links:

Screen Shot 2016-01-12 at 11.07.02

Dort sollte wie im Screenshot eine Stack View unterhalb einer Stack View angezeigt werden. Du könntest theoretisch nun weitere einfügen, es ist aber einfacher wenn Du eine komplette Zeile vorbereitest und die dann später nur noch duplizierst.

Auf dem horizontalen Stack legst Du nun über Drag&Drop einen UISwitch ab (den Schalter). Der Stack nimmt automatisch die Größe des Elements an:

Screen Shot 2016-01-12 at 11.52.56

Da im Beispiel oben zwei Label zu sehen waren, wird noch eine Stack View verschachtelt. Der Titel und die Beschreibung stehen übereinander. Also benutzt Du nun die vertikale Stack View erneut. Wenn Du per Drag&Drop arbeitest, achte auf die kleine blaue Linie. Die zeigt an, wo das Element abgelegt wird. Entweder vor oder hinter dem UISwitch. Wenn alles geklappt hat, sieht das vorerst wie folgt aus:

Screen Shot 2016-01-12 at 11.53.52

In die Stack View rechts ziehst Du nun zwei Label. Ob das zweite Label darüber oder darunter positioniert wird, ist in diesem Fall egal:

Screen Shot 2016-01-12 at 11.54.35

Die benötigten Elemente hast Du nun hinterlegt. Weiter geht es mit der Konfiguration und der Positionierung über AutoLayout Constraints.

Die Verteilung konfigurieren

Das obere Label bekommst etwas mehr Platz eingeräumt als das untere. Das liegt an der Verteilung in der Stack View. Da in diesem Fall beide Elemente gleichberechtigt sind, wählst Du zunächst die korrekte StackView aus. Am einfachsten geht das über die Document Outline. Such die View in der zwei Label hinterlegt sind und klick sie an:

Screen Shot 2016-01-12 at 11.22.08

Im Attribute Inspector kannst Du nun oben die Eigenschaften ändern:

  • Axis: vertikale oder horizontale Stack View?
  • Alignment: links, rechts oder zentriert ausrichten?
  • Distribution: Verteilung des verfügbaren Platzes
  • Spacing: Abstand zwischen Elementen

Relevant ist hier nun zunächst der Wert für Distribution. Stell ihn auf “Fill Equally”.

Screen Shot 2016-01-13 at 08.33.41

Dann wird er gleichmäßig zwischen den Elementen aufgeteilt, in diesem Fall also zwischen dem oberen und unteren Label.

Abstand zwischen Elementen definieren

Jetzt greifst Du auf die Einstellung für das Spacing zu. In der bereits gewählten Stack View änderst Du den Wert auf 5. Es wird also etwas Abstand zwischen Titel und Beschreibung geben. Wähl nun die horizontale Stack View, in der Du den Switch und die Stack View hinterlegt hast. Den Abstand dort setzt Du auf 20.

Screen Shot 2016-01-12 at 11.35.52

Du bist natürlich nicht an die vorgeschlagenen Werte gebunden. Aber so wirkt das Layout später nicht so gedrängt und wird etwas übersichtlicher.

Ausrichtung festlegen

Bisher steht die Ausrichtung auf dem Standardwert “Fill”. Das bedeutet, dass einfach der Inhalte den vorhandenen Platz ausfüllen soll. Spätestens bei dem Switch wird das aber gleich zu einem Problem. Der würde leicht verzerrt dargestellt. Du nutzt nun eine weitere Möglichkeit der Stack View. Über die Einstellung Alignment kannst Du die Ausrichtung festlegen. Hier gibt es bei der horizontalen Variante folgende Möglichkeiten:

  • Fill: den vorhandenen Platz ausfüllen
  • Top: Den Inhalt oben platzieren
  • Center: Zentriert anzeigen
  • Bottom: unten anordnen

Bei der vertikalen gibt es statt Top und Bottom Leading und Trailing, was quasi links- und rechtsbündig entspricht. In diesem Fall klickst Du aber nun die Stack View an, die den Switch enthält und wählst Center:

Screen Shot 2016-01-13 at 08.44.28

Jetzt musst Du Dich nur noch um die Label kümmern.

Layout Constraints für Elemente in der Stack View

Die Elemente in der Stack View kannst Du mit AutoLayout Constraints weiterhin beeinflussen. Vielleicht hast Du bereits bemerkt, dass die Label etwas gestaucht wirken? Spätestens wenn Du die App startest, wird das ganz deutlich. Verhindern lässt sich dies, indem die Höhe der UILabel angepasst wird. Bei einer Höhe von 18 Pixeln verschwinden die Probleme (bei der normalen Schriftgröße von 17). Also, jeweils die Label auswählen und über den Pin Dialog die Höhe festlegen:

Screen Shot 2016-01-13 at 09.01.52

Das muss im besten Fall für beide Label umgesetzt werden, auch wenn durch die gleichmäßige Verteilung bereits nach dem ersten die Anzeige besser aussieht.

Titel und Beschreibung ändern

Einfach um Inhalte auf der View anzuzeigen, änderst Du nun den Titel und die Beschreibung. Der Titel steht im oberen Label, die Beschreibung im unteren. Hier ein paar Vorschläge für die Settings:

  • Caching aktivieren?
    Inhalte im Cache zwischenspeichern
  • Logging?
    Fehler protokollieren
  • Pushnotification?
    Ereignisse per Pushnachricht melden

Wieso steht hier mehr als ein Vorschlag? Damit wir nun noch weitere Reihen hinterlegen können.

Vorhandene Elemente gruppieren

Wir könnten nun bereits die vorhandene Stack View duplizieren und als Basis für die Einstellungen nutzen. Aber, ich möchte Dir zeigen wie Du bereits vorhandene Elemente nachträglich gruppieren kannst (zu einer Stack View hinzufügen). Dazu ziehst Du zunächst zwei Label und einen Switch in die freie Fläche unten:

Screen Shot 2016-01-13 at 09.09.12

Zuerst wählst Du nun die beiden Label aus. Entweder ziehst Du mit der Maus einen Rahmen um beide und selektierst sie, oder Du hältst CMD gedrückt und klickst sie nacheinander an. Anschließend klickst auf auf das kleine Stack Icon unten rechts (neben dem Align und Pin Dialog):

Screen Shot 2016-01-13 at 09.11.37

Die beiden Label wurden nun zu einer Stack View hinzugefügt! Es sollte also nun wie folgt aussehen:

Screen Shot 2016-01-13 at 09.12.33

Wenn hier eine horizontaler Stack entstanden ist, kannst Du oben rechts die Ausrichtung ändern. Jetzt wählst Du die Stack View und den Switch aus. Dann klickst Du wieder auf den Stack Button. Jetzt sollte eine horizontale Stack View entstanden sein. Die Konfiguration wird wie zuvor durchgeführt:

  • Abstand zwischen den Labels auf 5
  • Abstand zwischen Switch und Stack View 18
  • Alignment der äußeren Stack View auf Center
  • Höhe der Labels mit Constraints festlegen

Wenn alles geklappt hat, sieht das Ergebnis wie folgt aus:

Screen Shot 2016-01-13 at 09.16.40

Nun kannst Du die äußere Stack View auswählen und über copy&paste (CMD+C und CMD+V) zwei Kopien erstellen. Wähl danach eine der Stack Views aus und zieh sie per Drag&Drop auf die Stack View oben. Achte darauf, dass Du sie wirklich unterhalb der bereits vorhandenen Stack View ablegst. Ein blauer Strich über die gesamte Breite signalisiert dies. Das Ergebnis sollte wie folgt aussehen:

Screen Shot 2016-01-13 at 09.19.56

Nun kannst Du die verbleibenden Stack Views ebenfalls positionieren.

Die Flexibilität der UIStackView

Das Besondere ist nun, dass die nächste Zeile (also die Gruppe aus Stack View, Switch und Labels) überall hinterlegt werden kann. Zum Beispiel kann eine neue Zeile ganz oben und eine dazwischen oder darunter hinterlegt werden. Mein fertiges Ergebnis (bewusst ohne neue Bezeichnungen, sieht nun wie folgt aus):

Screen Shot 2016-01-13 at 09.24.49

Wenn die Zeilen alle ohne Stack Views hinterlegt wären, müssten dabei viele Constraints angepasst werden. Bemerkenswert ist auch die gesamte Zahl der Constraints, die bei gestiegener Dynamik nun sogar auf 15 reduziert werden konnte.

[freememberupgrade]

  • Stack View Tutorial als eBook
  • Quellcode des Beispielprojekts

[/freememberupgrade]

[ds_preview]

Upgrades

PDF herunterladen

Das Stack View Tutorial steht über folgenden Link bereit:

Quellcode herunterladen

Der gesamte Quellcode steht Dir als Beispielprojekt auf Github zur Verfügung:

UIStackview Tutorial bei Github herunterladen

 

Foto: Stack of Coins by Austin Kirk, used under CC BY / Original used as background

Schreib einen Kommentar

Your email address will not be published.