5.3 Autolayout

Mit iOS 6 hat Apple mit Autolayout ein neues Layoutsystem als Alternative zur Autoresizingmask eingeführt. Dabei legen Restriktionen, die Autolayout-Constraints, die Größen und Abstände der Elemente fest. Sie können relativ vielfältige Restriktionen formulieren. Dabei können sich Restriktionen nur auf einen View beziehen, Beziehungen zwischen einem View und seinem Superview oder zwischen zwei Views in einer Hierarchieebene herstellen.

5.3.1 Restriktionen im Interface Builder festlegen

Bei eingeschaltetem Autolayout zeigt der Interface Builder die Restriktionen als Objekte in der Viewhierarchie an (siehe Abbildung 5.6).

Abbildung 5.6 Restriktionen in der Viewhierarchie

Wenn Sie einen neuen View hinzufügen, legt der Interface Builder automatisch mindestens zwei Restriktionen für die Abstände an. Dabei zeigt er blaue Linien zu den Rändern für naheliegende Restriktionen an; das können Standardabstände, ausgerichtete Seiten oder Ähnliches sein. Wenn Sie beispielsweise ein Label in die obere linke Ecke eines leeren Views ziehen, erzeugt der Interface Builder zwei Restriktionen; jeweils eine für den Abstand zum linken und oberen Rand. Bei selektierten Views zeigt Ihnen der Interface Builder durch blaue Linien an, welche Restriktionen es dafür gibt (siehe Abbildung 5.7). Der Interface Builder bevorzugt diese Standardrestriktionen, und es kann vorkommen, dass er bei der Änderung eines Views Ihre Restriktionen durch eine andere Standardrestriktion ersetzt. Das passiert beispielsweise, wenn Sie das Label nach rechts verschieben; in der Mitte des Views erhalten Sie eine Restriktion, die das Label im View horizontal zentriert, und in der Nähe des rechten Randes erzeugt der Interface Builder eine Restriktion, die den Abstand zwischen den rechten Rändern des Labels und des Views konstant hält.

Abbildung 5.7 Restriktionen nach dem Anlegen eines Labels

Wenn Sie nun neben das linksbündige Label einen Fortschrittsbalken ziehen, legt der Interface Builder drei Restriktionen an; welche das sind, hängt von ihrer Positionierung ab. Sie können beispielsweise so aussehen wie in Abbildung 5.8. Dort bestimmt eine Restriktion den horizontalen Abstand zum rechten Rand des Labels (siehe die untere kurze horizontale Line mit vertikalen Enden), und eine weitere Restriktion richtet den Fortschrittsbalken immer mittig zum Label aus (siehe die lange durchgezogene Linie durch das Label und den Fortschrittsbalken). Die Breite des Fortschrittsbalkens bestimmt die dritte Restriktion.

Abbildung 5.8 Restriktionen für einen Fortschrittsbalken

Sie können diese Restriktion für die Breite durch eine für den Abstand zum rechten Rand ersetzen, indem Sie den Fortschrittsbalken mit der Maus so weit verbreitern, bis am rechten Rand eine gestrichelte blaue Linie erscheint. Durch diese Änderung hat der Fortschrittsbalken also keine feste Breite mehr, sondern passt sich dynamisch an die Breite des Views an, sodass er immer genau zwischen das Label und den rechten Rand des Views passt.

Sie können auch relative Restriktionen anlegen. Ein Beispiel dafür sind Buttons, die immer die gleiche Breite haben sollen. Diese Restriktion stellt der Interface Builder durch dicke blaue Linien mit einem Gleichheitszeichen in der Mitte dar (siehe Abbildung 5.9).

Abbildung 5.9 Restriktion für Buttons mit gleicher Breite

In der Viewhierarchie besitzen die automatisch vom Interface Builder angelegten Standardrestriktionen ein violettes Icon und lassen sich nicht löschen. Alle anderen Restriktionen haben hingegen blaue Icons. Wenn Sie feststellen, dass Sie eine Standardrestriktion nicht benötigen oder dass sie stört, können Sie sie über den Größeninspektor des Views umwandeln. Öffnen Sie dazu über das Zahnrad an der Restriktion das Pop-up-Menü aus Abbildung 5.10, und wählen Sie Promote to User Constraint aus. Nicht mehr benötigte Nutzerrestriktionen können Sie entweder über dieses Menü oder über den Button löschen.

Abbildung 5.10 Eine Standardrestriktion in eine Nutzerrestriktion umwandeln

Der Attributinspektor einer Restriktion (siehe Abbildung 5.11) bietet ein bis fünf Einstellungen an. Unter Relation können Sie auswählen, ob der Wert unter Constant als exaktes Maß (Equal), Mindestmaß (Greater Than or Equal) oder Höchstmaß (Less Than or Equal) gelten soll. Der Haken vor Standard bewirkt, dass die Restriktion den Wert verwendet, den Apple dafür empfiehlt. [Er hat aber nichts damit zu tun, ob es sich um eine Standard- oder Nutzerrestriktion handelt.] Bei horizontalen Abständen können Sie die Verlaufsrichtung der Views über Direction festlegen; dabei bedeutet der Standartwert Leading To Trailing, dass sie sich nach der aktuellen Anzeigesprache richtet – bei Deutsch oder Englisch also von links nach rechts und bei Hebräisch oder Arabisch von rechts nach links. Die letzte Einstellung, Priority, ist ein Wert zwischen 0 und 1000 und legt die Rangfolge der Restriktionen untereinander fest. Sie sind dabei umso wichtiger, je höher ihr Wert ist.

Abbildung 5.11 Der Attributinspektor einer Restriktion

Sie können zu jedem View mehrere Restriktionen anlegen, die Cocoa Touch jedoch nicht unbedingt immer alle einhalten kann oder die sich sogar widersprechen können. Ob Restriktionen widersprüchlich sind, prüft Cocoa Touch bei der Anzeige des Views. Gegebenenfalls gibt es eine Warnung aus.

Nicht erfüllbare Restriktionen können leicht bei Viewrotationen oder durch die Lokalisierung entstehen. In Abbildung 5.12 sehen Sie ein Beispiel für Restriktionen, die sich nach der Viewrotation nicht mehr erfüllen lassen; dabei stehen die Pfeile in der Grafik für feste Abstände. Während sich die beiden Buttons mit den Abständen problemlos im Querformat unterbringen lassen (links), passt dieses Arrangement natürlich nicht ins Hochformat (gestricheltes Rechteck). Für die Anpassung an das Hochformat muss Cocoa Touch also auf die Einhaltung aller Restriktionen verzichten.

Abbildung 5.12 Restriktionen und Viewrotation

Wenn Sie keine Rangfolge festlegen, wählt Cocoa Touch die zu missachtenden Restriktionen aus. Für das Beispiel aus Abbildung 5.12 ist es wahrscheinlich am sinnvollsten, auf die Einhaltung der Abstände zu den Außenrändern und zwischen den beiden Buttons zu verzichten. Dies können Sie dadurch erreichen, dass Sie deren Priorität von dem Maximalwert 1000 heruntersetzen.

Weitere Restriktionen können Sie über die Unterpunkte der Menüs Editor • Align und Editor • Pin oder über die Buttons in der rechten unteren Ecke der Zeichenfläche anlegen (siehe Abbildung 5.13). Über das Align-Menü oder den Button 2 erzeugen Sie Restriktionen, die Views zueinander ausrichten, während Sie über das Pin-Menü oder den Button 3 Größen oder Abstände festlegen können.

Abbildung 5.13 Buttons zum Anlegen von Restriktionen

Sehr praktisch ist übrigens auch der Button 1, mit dem Sie zwischen den Viewgrößen für 3,5- und 4-Zoll-Displays, also iPhone 4(s) und iPhone 5, umschalten können.

Um eine neue Restriktion anzulegen, wählen Sie einen oder mehrere Views aus und rufen den gewünschten Menüpunkt auf. In Abbildung 5.14 sehen Sie ein Beispiel, wie Sie die gleiche Breite für zwei Buttons festlegen können; Sie wählen die beiden Buttons aus und rufen den Menüpunkt Editor • Pin • Widths Equally auf. Cocoa Touch ändert dann mit dieser Restriktion die Breiten der beiden Views immer so, dass sie immer den gleichen Wert haben.

Über den Button 4 in Abbildung 5.13 können Sie festlegen, ob der Interface Builder Restriktionen unverändert lassen soll, wenn Sie die Größe des Views ändern. Standardmäßig wählt Xcode hier den Punkt Descendants aus, wodurch die Abstände eines Subviews zu seinem Superview unverändert bleiben, wenn Sie die Größe des Superviews ändern.

Abbildung 5.14 Anlegen einer zusätzlichen Restriktion

5.3.2 Restriktionen per Programmcode erstellen

Sie können Restriktionen nicht nur über den Interface Builder, sondern auch per Programmcode erstellen. Dazu legen Sie Objekte der Klasse NSLayoutConstraint an und fügen sie über die Methoden addConstraint: oder addConstraints: zu einem View hinzu. Cocoa Touch stellt Restriktionen durch eine Gleichung der Form

Attribut1 = Faktor × Attribut2 + Konstante

oder eine Ungleichung der Form

Attribut1 Faktor × Attribut2 + Konstante

beziehungsweise

Attribut1 Faktor × Attribut2 + Konstante

dar. Dabei sind Attribut1 und Attribut2 jeweils Eigenschaften der beteiligten Views und Faktor und Konstante frei wählbare, feste Werte. Beispielsweise können Sie die Restriktion, dass die beiden Buttons aus Abbildung 5.14 die gleiche Breite haben sollen, durch

Breite des OK-Buttons = 1 × Breite des Abbrechen-Buttons + 0

ausdrücken. Diese Formel können Sie über den Convenience-Konstruktor constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant: in die entsprechende Restriktion umsetzen:

NSLayoutConstraint *theConstraint = 
    [NSLayoutConstraint constraintWithItem:theOkButton 
        attribute:NSLayoutAttributeWidth 
        relatedBy:NSLayoutRelationEqual 
        toItem:theCancelButton 
        attribute:NSLayoutAttributeWidth 
        multiplier:1.0 constant:0.0];

theOkButton.translatesAutoresizingMaskIntoConstraints = NO;
theCancelButton.translatesAutoresizingMaskIntoConstraints = 
    NO;
[theView addConstraint:theConstraint];

Listing 5.7 Erzeugen und Einfügen einer Restriktion

Die beiden ersten Parameter des Konstruktoraufrufs in Listing 5.7 beschreiben das Breitenattribut des OK-Buttons, und der vierte und fünfte Parameter das Breitenattribut des Abbrechen-Buttons. Die Konstante NSLayoutRelationEqual im releatedBy-Parameter legt fest, dass es sich bei der Restriktion um eine Gleichung handelt, und die beiden letzten Parameter enthalten den Faktor und die Konstante für die Gleichung. Wie Sie in Listing 5.7 sehen können, geben Sie für die Attribute jeweils eine Konstante und nicht etwa den Namen des Attributs an. Die möglichen Werte für diese Attribute finden Sie in Tabelle 5.1.

Wenn Sie einen View in Ihrem Programmcode erzeugen, erstellt er automatisch Restriktionen für die Autoresizingmask, was zu Konflikten mit den von Ihnen erstellten Restriktionen führen kann. Sie können dieses Verhalten über den Setter setTranslatesAutoresizingMaskIntoConstraints: abschalten und über den Getter translatesAutoresizingMaskIntoConstraints abfragen.

Wenn Sie mehrere Restriktionen für mehrere Views in einem gemeinsamen Superview anlegen möchten, kann das über Aufrufe des Convenience-Konstruktors wie in Listing 5.7 schnell sehr mühselig sein. Über die Klassenmethode constraintsWithVisualFormat:options:metrics:views: lassen sich relativ bequem mehrere Restriktionen für eine Dimension auf einmal erzeugen. Die Beschreibung der Restriktionen erfolgt dabei über ein Format, dessen Aufbau die Visual Format Language beschreibt. In Tabelle 5.2 sehen Sie einige Beispiele für die Bestandteile eines Formats.

Ein Beispiel für ein vollständiges Format ist:

H:|-leftMargin-[left(>=50)]-[middle(==right)][right(==80)]-rightMargin-|

Wenn Sie die Bestandteile des Formats von links nach rechts durchgehen, haben sie die folgende Bedeutung:

• H: – Es handelt sich um ein Format für horizontale Abmessungen.
• H:|-... – Der linke Rand.
• |-leftMargin-[left... – Die Metrik leftMargin enthält den Abstand des ersten Views (left) vom linken Rand.
• [left(>=50)] – Der View left hat eine Mindestbreite von 50 Punkten.
• ...]-[middle... – Das Minuszeichen zwischen den Views left und middle erzeugt einen Standardabstand.
• [middle(==right)] – Der View middle hat immer die gleiche Breite wie der View right.
• [right(==80)] – Der View right hat eine feste Breite von 80 Punkten. Da das Format zwischen den Views middle und right keine Abstandsangabe enthält, folgen die Views direkt aufeinander.
• ...]-rightMargin-| – Den Abstand zum rechten Rand legt die Metrik rightMargin fest.
• -| – Der rechte Rand.

Das Autolayout richtet die Views in diesem Beispiel also alle in einer Zeile aus; allerdings macht das Format keine Angabe zu der vertikalen Ausrichtung der Views. Die können Sie jedoch über den Parameter options der Methode constraintsWithVisualFormat:options:metrics:views: für alle Views einheitlich festlegen. Dazu wählen Sie eine Konstante des Typs NSLayoutFormatOptions aus. Bei einer horizontalen Ausrichtung dürfen Sie allerdings nur eine Konstante mit einer vertikalen Angabe (also NSLayoutFormatAlignAllTop, NSLayoutFormatAlignAllBottom, NSLayoutFormatAlignAllCenterY oder NSLayoutFormatAlignAllBaseline) auswählen; die Klassenmethode erzeugt damit entsprechende Restriktionen, die die Views entlang der gewählten Linie ausrichten. Zusätzlich können Sie bei horizontalen Formaten noch die Richtung über eine der Konstanten NSLayoutFormatDirectionLeftToRight oder NSLayoutFormatDirectionRightToLeft festlegen. Wenn Sie diese Angabe weglassen, entspricht die Richtung immer der Leserichtung der aktuellen Spracheinstellung.

In den beiden letzten Parametern der Klassenmethode übergeben Sie jeweils ein Dictionary mit den Werten für die Metriken und den Views. Im Beispielprojekt sieht der Methodenaufruf so aus:

UIView *theView = self.view;
NSDictionary *theViews = @{ @"left" : theLeft, 
    @"middle" : theMiddle, @"right" : theRight };
NSLayoutConstraints *theConstraints = 
    [NSLayoutConstraint constraintsWithVisualFormat:
        @"H:|-leftMargin-[left(>=50)]- 
            [middle(==right)][right(==80)]-rightMargin-|" 
        options:NSLayoutFormatAlignAllTop 
        metrics:@{ @"leftMargin" : @30, @"rightMargin" : @20 } 
        views:theViews];
[theView addConstraints:theConstraints];

Listing 5.8 Erzeugung von Restriktionen über ein Format

Die mit Listing 5.8 erzeugten Restriktionen reichen allerdings für die Platzierung der Views noch nicht aus. Sie müssen noch eine Höhe und einen vertikalen Abstand erhalten. Dazu verwendet das Beispielprojekt das Format V:|-20-[middle(==40,==right)], das einen oberen Abstand von 20 Punkten und für den mittleren und rechten View die gleiche Höhe von 40 Punkten festlegt. Der options-Parameter erhält hier den Wert 0, weil ja bereits andere Restriktionen die horizontale Ausrichtung festlegen.

theConstraints = 
    [NSLayoutConstraint constraintsWithVisualFormat:
        @"V:|-20-[left(==40,==middle,==right)]"
        options:0 metrics:@{} views:theViews];
    [theView addConstraints:theConstraints];

Listing 5.9 Erzeugung der Restriktionen für die vertikale Positionierung

Die Höhe des linken Views soll immer ein Dreiviertel seiner Breite sein. Diese Restriktion können Sie jedoch nicht durch ein Format beschreiben. Das Beispielprojekt erzeugt die Restriktion hierfür über den Convenience-Konstruktor:

[theView addConstraint:[NSLayoutConstraint 
    constraintWithItem:theLeft 
    attribute:NSLayoutAttributeHeight 
    relatedBy:NSLayoutRelationEqual 
    toItem:theLeft 
    attribute:NSLayoutAttributeWidth 
    multiplier:0.75 constant:0.0]];

Listing 5.10 Festlegung der Höhe in Abhängigkeit von der Breite

Die Storyboard-Variante des Beispielprojekts AlarmClock auf der beiliegenden DVD nutzt das Autolayout, um dafür zu sorgen, dass der Clockview eine quadratische Fläche bekommt. Dazu fügt die Methode viewDidLoad eine zusätzliche Restriktion zum View hinzu:

NSLayoutConstraint *theConstraint = [NSLayoutConstraint 
    constraintWithItem:self.clockView 
    attribute:NSLayoutAttributeHeight 
    relatedBy:NSLayoutRelationEqual 
    toItem:self.clockView 
    attribute:NSLayoutAttributeWidth 
    multiplier:1.0 
    constant:0.0];

[self.view addConstraint:theConstraint];

Listing 5.11 Restriktion für das Ziffernblatt anlegen

Der View des Alarmclockviewcontrollers im Storyboard enthält nur noch drei Restriktionen für den Clockview. Sie legen jeweils den Abstand zum linken, oberen und rechten Rand fest.

5.3.3 Autolayout und Lokalisierung

Zusammen mit der Einführung der Autolayouts hat Apple auch das Lokalisierungskonzept für Apps erweitert. Vor iOS 6 mussten Sie für jede Sprache ein eigenes Storyboard oder eigene XIBs erstellen, die jeweils alle Objekte enthalten. Während das Anlegen der ersten Lokalisierungsversion noch relativ einfach zu bewerkstelligen ist, können sich Änderungen an den Views, den Outlet- und den Actionverbindungen sehr mühselig gestalten. Dieser Umstand führt dazu, dass viele Entwickler keine XIB-Dateien oder Storyboards einsetzen.

Durch das Autolayout ist es nun möglich, auf eigene Interface-Dateien für die einzelnen Sprachen zu verzichten. Stattdessen erstellen Sie bei der Base Internationalization jeden View nur einmal und legen die Texte in getrennten Dateien ab. Dieses Vorgehen ist zwar naheliegend, jedoch erst durch das Autolayout möglich, da die Views beim Layout über die Autorezisingmask abhängig von der Orientierung eine feste Größe haben. Wenn Sie nun einen Text in eine andere Sprache übersetzen, hat er in den meisten Fällen eine andere Länge, wodurch er entweder zu breit oder zu schmal für den View ist. Beim Autolayout können Views hingegen eine flexible Größe haben, die sich an der Größe des Inhalts orientiert. Dadurch passen sich beispielsweise Buttons oder Labels automatisch an die Breite des enthaltenen Textes an. Ein Beispiel dafür können Sie in Abbildung 5.15 sehen.

Abbildung 5.15 Flexible Buttongrößen dank Autolayout

Die Base Internationalization können Sie in den Projekteinstellungen einschalten, indem Sie einen Haken bei Use Base Internationalization (siehe Abbildung 5.16) setzen.

Abbildung 5.16 Einschalten der Base Internationalization

Im nächsten Schritt wählen Sie die Sprache für jede Datei aus, auf deren Grundlage Xcode die Basis-Lokalisierung erzeugen soll. In der Regel ist das Englisch (siehe Abbildung 5.17).

Abbildung 5.17 Wahl der Referenzsprache für die Base Localization

Über das Pluszeichen unter der Liste mit den Sprachen können Sie nun die Dateien für weitere Sprachen erzeugen (siehe Abbildung 5.18).

Abbildung 5.18 Anlegen der Dateien für weitere Sprachen

Für das Main-Storyboard legt Xcode nun beispielsweise die Datei MainStoryboard.strings im Ordner de.lproj an, die für jeden Text aus dem Storyboarad ein Schlüssel-Wert-Paar enthält. Sie können nun die Werte auf der rechten Seite von den Gleichheitszeichen in die gewünschte Sprache übersetzen. Für das Beispielprojekt sieht die deutsche Version der Datei MainStoryboard.strings beispielsweise so aus:

/* Class = "IBUIButton"; normalTitle = "Back"; 
    ObjectID = "QQl-ha-OEf"; */
"QQl-ha-OEf.normalTitle" = "Zurück";

/* Class = "IBUIButton"; normalTitle = "Localization Example"; 
    ObjectID = "ucU-fq-nYZ"; */
"ucU-fq-nYZ.normalTitle" = "Lokalisierungsbeispiel";

/* Class = "IBUIButton"; normalTitle = "Accept"; 
    ObjectID = "zEx-L5-tjS"; */
"zEx-L5-tjS.normalTitle" = "Akzeptieren";

Listing 5.12 Lokalisierung der Datei »MainStoryboard.strings«

Im Dateiinspektor können Sie unter der Rubrik Localization sehen, für welche Sprachen eine Anpassung vorliegt (siehe Abbildung 5.19). Dabei bedeutet ein gesetzter Haken, dass es eine angepasste Version für die Sprache gibt. Wenn der Haken fehlt, verwendet Cocoa Touch die Basis-Lokalisierung für diese Datei. Wenn Sie den Haken vor einer Sprache löschen, löscht Xcode nach Rückfrage auch die dazugehörende Datei.

Abbildung 5.19 Lokalisierungsinformationen für eine Datei

Mit der Basis-Lokalisierung können Sie jedoch auch für einzelne Sprachen eigene XIB-Dateien oder Storyboards verwenden. Dazu müssen Sie rechts von der Sprache im Pop-up-Menü den Eintrag Interface Builder Cocoa Touch Storyboard auswählen. Xcode ersetzt dann nach einer Rückfrage die .strings-Datei durch ein entsprechendes Storyboard. Sie sollten allerdings nur dann getrennte Storyboards verwenden, wenn dies wirklich notwendig ist, und sich die Anpassungen für die Sprache nicht über .strings-Dateien beziehungsweise lokalisierte Bilder realisieren lassen.

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.