Seit dem Erscheinen von iOS 8 gibt es viel Neues, viel Altes, und auch einiges Kaputtes. Ein Lichtblick allerdings ist eine Neuerung im Bereich Autolayout und Storyboarding: Size Classes. Size Classes beschreiben verschiedene Device-Orientierungen und -Größen anhand sogenannter Traits, und bieten die Möglichkeit, Size Class-abhängig Constraints zu installieren. Für Alle, die noch nicht mit Size Classes gearbeitet haben gibt es nun hier einen kleinen Einstieg, der Schritt für Schritt durch die Basics führt.

Vorbereitung

Erst einmal legen wir uns ein XCode-Projekt an. Als Template reicht eine Single View Application. Wir wählen im Setup-Screen iPhone aus und deselektieren Core Data.

Size Classes Tutorial - Projektsetup

Nun werden wir mit unserer Projektansicht begrüßt. Wenn noch nicht geschehen, aktivieren wir den Assistant Editor und wählen im Breadcrumb-Menü des rechten Editors den Punkt Preview – Main.storyboard. Nun sollten wir auf der rechten Seite eine Vorschau mit einem einzelnen iPhone 4-Device sehen.

Auswählen des Previews im Assistant Editor

Das iPhone 4 können wir nun mit Linksklick auswählen und löschen. Wir konzentrieren uns in diesem Tutorial auf das iPhone 6 (4,7″). Wir verwenden den kleinen Plus-Button unten links im Preview-Bereich und fügen das entsprechende Device zwei mal hinzu. Das jeweils zweite Device gleicher Größe sollte automatisch im Landscape-Modus auftauchen.

Preview Pane Setup

Storyboard, Autolayout, Constraints. Und Magie.

Mit dieser Ansicht können wir erstmal arbeiten. Nun fügen wir im linken Teil ganz normal unsere Inhalte hinzu. Ich habe mich hier für eine zweigeteilte Ansicht antschieden, bestehend aus einem ImageView und einem View, in den wir Text einfüllen. Das Grundsetup machen wir erst einmal für die Portrait-Ansicht.

Ich habe im oberen Teil einen ImageView eingefügt und diesem ein Bild zugewiesen. Für den ImageView wählen wir noch „Aspect Fill“ als Füllmodus und aktivieren im Inspektor die Option „Clips Subviews“, damit wir später keine unangenehmen Überraschungen erleben. Im unteren Teil habe ich einen View platziert, und in diesen jeweils ein Label und einen TextView. Jetzt können wir mit den Constraints loslegen. Über das Pin-Menü schlagen wir den ImageView oben, links und rechts an, und den TextView-Container unten, links und rechts. Hierbei ist wichtig, dass der obere bzw. untere Constraint nicht auf die Layout Guides gehen, sondern auf den Superview. Dies wählt ihr im Dropdown zur Konstante aus, wie im Screenshot zu sehen:

Das Pin-Menü mit Konstanten-Dropdown

Zusätzlich zu den Abstands-Constraints legen wir jetzt noch Constraints für die Höhe der Views an. Dazu ziehen wir im Storyboard-Navigator mit der rechten Maustaste jeweils vom ImageView und vom Textcontainer zum Superview und wählen „Equal Heights“ aus. Die „Equal-Heights“-Constraints wählen wir nun im Navigator aus und ändern den Multiplikator im Inspektor auf 0.4 für den ImageView und 0.6 für den Textcontainer. Wichtig ist hierbei, dass die Reihenfolge im Constraint stimmt. Hier steht jeweils der Superview zuletzt. Wenn es nicht passen sollte, wählt im Inspektor-Dropdown einfach die Option „Reverse first and second Item“. Mit dieser Aktion haben wir den Views jeweils gesagt, dass sie bitte 40% bzw. 60% der Höhe des Superviews einnehmen sollen. Nun setzen wir noch eventuelle fehlende Constraints für das Label und den TextView, damit diese im Container anständig angezeigt werden.

Ist das geschafft und alle Constraints sauber platziert, sollte der Previewbereich in Etwa so wie im folgenden Screenshot dargestellt werden:

Previewbereich nach dem Setzen der Constraints

Size Classes. Viele Size Classes.

Damit haben wir die Grundlage geschaffen. Nun wählen wir am unteren Ende des Storyboard-Editors eine andere Size Class aus. dazu klicken wir auf den Bereich, in dem „wAny hAny“ steht. Im folgenden Popup wählen wir die Size Class „Any Width / Compact Height“ aus. Diese gilt für iPhones im Landscape-Modus. Es gibt noch ein paar mehr Size Classes, die auf den verschiedenen Geräten unterschiedlich wirken. Eine Erklärung dazu findet Ihr in den Apple Docs zu Neuerungen in iOS 8.

Size Class-Auswahl

Ist eine Size Class (außer wAny/hAny) aktiv, wird der Balken am unteren Rand blau dargestellt. Prinzipiell gilt: Ist eine bestimmte Size Class aktiv, gelten neu gesetzte Constraints ausschließlich für diese Size Class. Genauso können einzelne Constraints für bestimmte Size Classes entfernt („deinstalliert“) werden, ohne sie in den anderen Size Classes zu entfernen.

Aktivierte Size Class

Mit der aktivierten Size Class (blauer Balken) deinstallieren wir nun erst einmal alle Constraints, die wir im Landscape-Modus nicht haben möchten. Zur Erinnerung: Wir möchten für den Landscape-Modus die Ansicht so verändern, dass das Bild links und der Textblock rechts steht, um den Platz besser auszunutzen. Mit aktivierter Size Class wählen wir also im Navigator unsere beiden Views aus. Im Inspektor auf der rechten Seite markieren wir dann die Constraints die wir deinstallieren möchten und drücken die Rücktaste. Die Constraints sollten nun im Navigator noch angezeigt, aber ausgegraut werden. Das bedeutet, dass diese nur in bestimmten Size Classes installiert sind. Globale Constraints, die immer gelten, werden nach wie vor fett angezeigt. Zusätzlich zu den „Equal Height“-Constraints deinstallieren wir noch auf dem ImageView den „Trailing Space“ und auf dem Textcontainer den „Leading Space“. Stattdessen bekommt der ImageView einen Pin unten („Bottom Space = 0“) und der Textcontainer einen Pin oben („Top Space = 0“), jeweils zum Superview.

Nun ziehen wir im Navigator wieder jeweils mit der rechten Maustaste vom ImageView und vom Textcontainer zum Superview und wählen diesmal „Equal Widths“. Die Multiplikatoren stellen wir auf 0.3 für den ImageView und 0.7 für den Textcontainer. Wer möchte, kann nun noch für beide Views ein „Equal Height“-Constraint zum Superview mit Multiplikator 1 vergeben, die Pins sollten aber für gewöhnlich ausreichen. Wenn ihr das alles gemacht habt, solltet ihr in der Vorschau nun sehen können, dass die Views im Landscape-Modus horizontal angeordnet sind.

Preview nach erfolgreichem Layout

Nun könnt ihr die App bauen und im Simulator oder auf eurem Device testen.

Fazit

sizeclassesSize Classes sind eine sehr coole Neuerung in der iOS-Entwicklung. Sie bedeuten eine Menge Klickarbeit und sind anfangs etwas tricky, aber man gewöhnt sich schnell daran. Vor dem Hintergrund, eine App irgendwann später mal auf andere Devices anzupassen, können die Size Classes eine Menge Arbeit sparen. Sie sparen jetzt schon eine Menge Code, weil man bestimmte Layoutarbeiten nicht mehr programmatisch abhandeln muss. Dieses Tutorial sollte einen nötigen Kickstart gegeben haben, um sich mit Size Classes ausführlicher zu beschäftigen. Es warten noch ein paar mehr nette Funktionen wie beispielsweise das Deinstallieren und Installieren von kompletten Views für bestimmte Size Classes darauf, euch das Entwickeln leichter zu machen.