Eine Einführung in das adaptive Design

() translation by (you can also view the original English article)

Apple hat Entwickler seit einiger Zeit dazu gedrängt, universelle iOS-Anwendungen zu entwickeln. Auf der WWDC 12 wurde Auto Layout für iOS veröffentlicht, und in iOS 7 folgten Verbesserungen. Und jetzt wurde mit iOS 8 adaptives Design eingeführt, das mehrere neue APIs und Interface Builder-Verbesserungen zur Entwicklung universeller Binärdateien enthält.

In diesem Tutorial werden wir uns ansehen, was genau adaptives Design bedeutet und wie man einige seiner Konzepte verwendet. Am Ende des Lernprogramms können Sie mit dem adaptiven Design universelle Apps mithilfe eines intuitiven Workflows erstellen. Wir verwenden die neuen Größenklassen, um eine fiktive App für einen Computerspeicher zu erstellen, die auf allen Geräten funktioniert.

1. Was ist adaptives Design?

Adaptives Design umfasst mehrere neue Ideen und Techniken, anstatt nur eine einzige API zu sein. Einige Komponenten des adaptiven Designs umfassen Merkmalssammlungen, Größenklassen, adaptive Schriftarten, Auto-Layout und mehr. Im Kern gibt es adaptives Design, das Entwicklern hilft, universelle und lokalisierte Anwendungen einfach zu erstellen.

Wenn Sie seit einigen Jahren iOS-Apps entwickeln, haben Sie wahrscheinlich selbst erkannt, warum adaptives Design hilfreich sein kann. Autoresizing-Masken fallen schnell auseinander, das Verfolgen von Ausrichtungen kann mühsam sein, und das Entwickeln unterschiedlicher Codepfade basierend auf dem Gerätetyp ist nicht skalierbar. Adaptives Design zielt darauf ab, all diese Probleme anzugehen.

Nachdem wir nun herausgefunden haben, was adaptives Design ist und warum wir es verwenden sollten, laden Sie das Beispielprojekt herunter, um loszulegen.

2. Größenklassen

Größenklassen sind die Hauptfunktion des adaptiven Designs. Wenn Sie sie verwenden, können Sie Code und Logik eliminieren, die mehrere Bildschirmgrößen, Ausrichtungen oder bestimmte Geräte betreffen. Es macht es auch einfach, nur eine Schnittstelle für alle verfügbaren Geräte zu haben.

Es gibt zwei Arten von Größenklassen, kompakt und regelmäßig. Jede Größenklasse kann horizontal und vertikal dargestellt werden, und jedem Gerät wird eine Größenklasse für beide Ausrichtungen zugewiesen. Eine normale Größe stellt eine "große" Menge an Bildschirm-Immobilien dar, beispielsweise auf einem iPad. Ebenfalls enthalten sind Schnittstellenparadigmen, die die Illusion von übermäßigem Platz bieten, wie z. B. Scroll-Ansichten auf einem iPhone.

Auf der anderen Seite bezeichnet eine "kompakte" Bildschirmgröße eine kleinere Menge an verfügbarem Raum. iPhones oder iPod Touches passen generell in diese Kategorie. Das ist allerdings keine Regel. Zum Beispiel unterstützt das iPhone 6 Plus die normale Größenklasse horizontal. In der folgenden Tabelle werden iOS-Geräte und ihre jeweilige Größenklasse aufgeführt:

	Vertikal	Horizontal
iPhone Porträt	Regulär	Kompakt
iPhone Landschaft	Kompakt	Kompakt
iPhone 6 Plus Landschaft	Kompakt	Regulär
iPhone Porträt	Regulär	Regulär
iPhone Landschaft	Regulär	Regulär

Schritt 1: Auswählen einer Größenklasse im Interface Builder

Öffnen Sie Main.storyboard innerhalb des Projekts. Sie werden feststellen, dass die Leinwand wie ein Rechteck geformt ist. Zunächst ist dies ein Grund zur Erschütterung, doch zeigt dies eine Kernkomponente des adaptiven Designs. Wenn Sie auf den unteren Rand des Interface Builders schauen, werden Sie eine Schaltfläche bemerken, die sagt, dass Sie hanY haben.

Dies steht für Beliebige Breite, Beliebige Höhe. Dies bedeutet, dass Änderungen an der Benutzeroberfläche für jede Größenklasse gelten. Wenn Sie auf die Schaltfläche klicken, wird ein Raster angezeigt, mit dem Sie zwischen verschiedenen Größenklassen wechseln können:

Im Beispiel oben, Kompakte Breite | Die kompakte Höhe ist ausgewählt und im blauen Raster befindet sich ein grüner Punkt. Der grüne Punkt zeigt an, welche Größenklassen dargestellt werden. In diesem Fall gelten die Änderungen nur für 3,5, 4 und 4,7 Zoll große iPhones im Querformat.

Beachten Sie, dass der Wortlaut etwas anders ist, da der Interface Builder die Begriffe Breite und Höhe verwendet, während Größenklassen die Begriffe horizontal und vertikal verwenden. Breite entspricht der Horizontalen und Höhe entspricht der Vertikalen.

Wenn Sie die aktuell ausgewählte Größenklasse geändert haben, wechseln Sie wieder zu Beliebige Breite | Jede Höhe.

Schritt 2: Hinzufügen eines Bildes

Ziehen Sie eine Bildansicht aus der Objektbibliothek auf die Canvas des Ansichtscontrollers. Legen Sie mithilfe des Größeninspektors die X-Position auf 0 und die Y-Position auf 72 Punkte fest. Stellen Sie die Breite auf 600 Punkte und die Höhe auf 218 Punkte ein. Öffnen Sie den Attribute-Inspektor und ändern Sie den Modus der Ansicht auf aspect fit und image auf Laptop. Ihre Leinwand sollte wie folgt aussehen:

Schritt 3: Hinzufügen eines Etiketts

Öffnen Sie die Objektbibliothek erneut und ziehen Sie ein Etikett auf die Leinwand. Öffnen Sie den Größeninspektor und legen Sie die X-Position des Labels auf 16 und die Y-Position auf 312 Punkte fest. Setzen Sie für die Größe die Breite auf 568 Punkte und die Höhe auf 242 Punkte.

Nehmen Sie im Informations-Inspektor die folgenden Änderungen vor:

setze Text auf "Silberner Laptop"
Ändern Sie die Schriftgröße in System 100.0 Punkte
Stellen Sie Ausrichtung auf Mitte ein
setze Zeilen auf 0

Schritt 4: Hinzufügen von Einschränkungen

Jetzt fügen wir Einschränkungen für das Label und die Bildansicht hinzu. Klicken Sie unten im Interface Builder im Abschnitt Alle Ansichten im View-Controller auf Vorgegebene Einschränkungen zurücksetzen. Wenn die Option ausgegraut ist, stellen Sie sicher, dass eine der Ansichten in der Arbeitsfläche ausgewählt ist.

Da die Bildansicht denselben weißen Hintergrund hat wie die umschließende Ansicht, ändern wir die Hintergrundfarbe der Ansicht, um die Unterscheidung zwischen den beiden zu erleichtern. Wählen Sie Ansicht aus der Dokumentkontur und ändern Sie die Hintergrundfarbe in die Hintergrundfarbe der Gruppentabelle.

Schritt 5: Erstellen und Ausführen

Wählen Sie am oberen Rand von Xcode iPad Retina für den iOS-Simulator aus. Erstellen und führen Sie die App durch Drücken von Befehl + R aus. Die App scheint für das iPad gut zu sein, aber wir möchten sicherstellen, dass sie auf jedem Gerät ordnungsgemäß angezeigt wird.

3. Live Vorschau

Erstellen und Ausführen Ihrer App nur um zu sehen, wie sich Ihre Benutzeroberfläche verhält, kann eine mühsame Aufgabe sein. Glücklicherweise hat Xcode 6 die Fähigkeit hinzugefügt, ein Live-Rendering Ihrer Benutzeroberfläche auf jedem Gerät in beliebiger Ausrichtung zu erhalten. Dies hilft uns, eventuelle Auto-Layout-Probleme schneller zu lösen als die App im iOS-Simulator jedes Mal auszuführen.

Schritt 1: Aktivieren des Vorschau-Assistenten

Klicken Sie oben in Xcode auf die Schaltfläche Assistent.

Dies teilt den Xcode-Editor in zwei Bereiche. Wählen Sie im rechten Bereich in der Sprungleiste Automatisch > Vorschau > Main.storyboard.

Schritt 2: Hinzufügen von Geräten zur Vorschau

Interface Builder zeigt nun eine Live-Vorschau der Benutzeroberfläche auf einem 4-Zoll-iPhone. Wie erwartet, ist die Benutzeroberfläche auf dem iPhone weniger als ideal. Wenn Sie in der Vorschau nichts sehen, klicken Sie im linken Bereich auf den View-Controller, um ihn zu aktualisieren.

Klicken Sie im rechten Bereich unten auf die Schaltfläche +, um weitere Geräte zur Vorschau hinzuzufügen. Gehen Sie weiter und fügen Sie das iPad zur Vorschau hinzu.

Schritt 3: Wechseln der Ausrichtung

Bewegen Sie den Mauszeiger über das iPhone im Assistenten nach unten. Links neben dem Namen des Geräts befindet sich eine Schaltfläche, die die aktuelle Ausrichtung wechselt. Klicken Sie einmal darauf, um die iPhone-Vorschau in Querformat zu schalten.

Mit der Ausrichtung in Landschaft sieht die Benutzeroberfläche noch schlechter aus. Die Bildansicht wird nicht angezeigt und der Text des Labels ist viel zu groß.

4. Installieren von Größenklassenspezifischen Einschränkungen

Um die Benutzeroberfläche zu korrigieren, fügen wir einige Einschränkungen hinzu, die für eine bestimmte Größenklasse spezifisch sind. Dies ist ein weiterer Vorteil des adaptiven Designs. Wir können der Benutzeroberfläche mitteilen, wie sie ihre Ansichten für bestimmte Größenklassen mit demselben Storyboard darstellen soll. Zuvor erforderte das normalerweise zwei verschiedene Storyboards und das Laden des richtigen zur Laufzeit.

Schritt 1: Hinzufügen von Bildansicht-Basisbeschränkungen

Wir werden zunächst Einschränkungen hinzufügen, die für die meisten Geräte funktionieren und sie von dort aus verfeinern sollten. Beginnen Sie damit, die zuvor hinzugefügten Einschränkungen zu entfernen, indem Sie auf eine beliebige Ansicht in der Zeichenfläche klicken und Editor > Automatische Layout-Probleme auflösen > Alle Ansichten im View-Controller - Abhängigkeiten löschen wählen.

Wählen Sie die Bildansicht, klicken Sie auf die Schaltfläche Ausrichten, wählen Sie Horizontales Zentrum im Container und klicken Sie auf 1 Einschränkung hinzufügen.

Öffnen Sie die Einschränkung, die Sie gerade hinzugefügt haben, im Größeninspektor auf der rechten Seite und doppelklicken Sie darauf, um sie zu bearbeiten.

Die Beschränkung hat den Mittelpunkt der Superansicht gleich dem Mittelpunkt der Bildansicht, aber wir wollen das Gegenteil. Klicken Sie auf Second Item und wählen Sie Reverse First And Second Item, um das Problem zu beheben.

Drücken Sie dann die Strg-Taste und ziehen Sie von der Bildansicht zur Ansicht innerhalb der Dokumentkontur auf der linken Seite und wählen Sie Gleiche Höhen. Wählen Sie im Größeninspektor die Einschränkung aus, und ändern Sie den Faktor der Einschränkung auf 0,4. Dadurch wird die Höhe der Bildansicht entweder auf die Höhe der Superview oder auf mindestens 40 Prozent der Größe der Vorschau festgelegt - je nachdem, welche kürzer ist.

Klicken Sie als Nächstes auf die Schaltfläche Anheften und wählen Sie den oberen und unteren Abstand zum nächsten Nachbarn aus. Geben Sie für den unteren Abstand 18 Punkte ein. Der obere Abstand sollte bereits auf 0 Punkte gesetzt sein. Stellen Sie sicher, dass die Option An Ränder beschränken aktiviert ist, da wir nicht um die Ansicht herum gepolstert werden sollen. Klicken Sie unten auf 2 Constraints hinzufügen, um die Einschränkungen hinzuzufügen.

Doppelklicken Sie im Größeninspektor auf die Einschränkung Bodenabstand, um sie zu bearbeiten. Ändern Sie die Beziehung zu Größer als oder Gleich. Um die Beschränkungen der Bildansicht zu beenden, steuern und ziehen Sie von der Bildansicht zur Beschriftung und wählen Sie Gleiche Höhen.

Die Einschränkungen für die Bildansicht sollten folgendermaßen aussehen:

Schritt 2: Hinzufügen von Label Base Constraints

Aufgrund der Einschränkungen, die der Bildansicht hinzugefügt wurden, werden der Höhe und dem vertikalen Abstand der Beschriftung bereits die Bildansicht hinzugefügt. Wählen Sie die Bezeichnung aus und klicken Sie auf die Schaltfläche Anheften, um eine führende, nachgestellte und vertikale Beabstandungseinschränkung hinzuzufügen, wie in der Abbildung unten gezeigt.

Wenn Sie die Vorschau der App jetzt im Assistenten anzeigen, haben die Einschränkungen die Situation wesentlich verbessert. Allerdings gibt es immer noch ein Problem, wenn die App die kompakte horizontale Größenklasse verwendet, wie Sie unten sehen können (Mitte).

In diesem Fall wäre es schön, die Bildansicht und die Beschriftung nebeneinander statt übereinander zu haben.

Schritt 3: Hinzufügen von kompakten horizontalen Einschränkungen

Wählen Sie mit der Umschalttaste für die Größenklasse unten die Option Kompakte Breite | Kompakte Höhe. Der Balken wird blau, um anzuzeigen, dass Sie jetzt die Benutzeroberfläche für eine bestimmte Größenklasse bearbeiten.

Wählen Sie die Bildansicht, öffnen Sie den Größeninspektor und aktualisieren Sie den Rahmen wie in der Abbildung unten gezeigt.

Wählen Sie als Nächstes die Beschriftung aus und aktualisieren Sie ihren Rahmen im Größeninspektor wie unten dargestellt.

Wenn das Label noch ausgewählt ist und der Größeninspektor geöffnet ist, wählen Sie die Beschränkungen des Labels aus und entfernen Sie sie, indem Sie auf Löschen drücken. Sie können mehrere Constraints auswählen, indem Sie die Umschalttaste gedrückt halten. Dadurch werden die bisher hinzugefügten Einschränkungen entfernt, jedoch nur für diese Größenklasse.

Machen Sie dasselbe für die Bildansicht, indem Sie sie auswählen, den Größeninspektor öffnen, ihre Abhängigkeiten auswählen und auf Löschen klicken. Wir können jetzt Einschränkungen hinzufügen, um sicherzustellen, dass die Bildansicht und das Label nebeneinander positioniert sind.

Glücklicherweise kann Xcode diese Einschränkungen für uns leicht herausfinden. Wählen Sie entweder die Bildansicht oder die Beschriftung aus, und wählen Sie Editor > Automatische Layoutprobleme auflösen > Alle Ansichten in View Controller - Auf vorgeschlagene Einschränkungen zurücksetzen.

Schritt 5: Vorschau der aktualisierten Einschränkungen

Öffnen Sie den Größeninspektor für die Bildansicht. Sie werden feststellen, dass einige Einschränkungen aufgelistet sind, einige jedoch ausgegraut und andere nicht. Dies gibt an, welche Einschränkungen für die aktuelle Größenklasse aktiv sind.

Wenn Sie auf einen von ihnen doppelklicken, zeigt der untere Abschnitt, für welche Größenklassen die Einschränkungen aktiv sind. Das Bild unten zeigt, dass die Einschränkung für Compact Width | installiert ist Kompakte Höhe und deaktiviert für normale Breite | Regelmäßige Höhe. Durch Klicken auf die Schaltfläche x oder + wird die Abhängigkeit für die angegebene Größenklasse aktiviert oder deaktiviert.

Öffnen Sie den Editor des Vorschau-Assistenten erneut und fügen Sie ein 3,5-Zoll-iPhone im Querformat hinzu, wenn noch kein vorhanden ist. Wir können sehen, dass wir für bestimmte Geräte im Querformat ein völlig anderes Layout erhalten haben - alles in einem Storyboard.

5. Dynamischer Text

Die letzte Sache, die anzusprechen ist, ist die Schriftgröße. Während die tatsächlichen Frames der Bildansicht und des Labels gut funktionieren, kann die Schriftart manchmal abgeschnitten werden. Das adaptive Design bietet Entwicklern neue Möglichkeiten, mit diesem Szenario umzugehen.

Schritt 1: Bearbeiten Sie die Schriftgröße

Wählen Sie das Label und öffnen Sie rechts den Attribute Inspector. Wählen Sie unter Autoshrink Minimum Font Scale und setzen Sie es auf 0.4.

Schritt 2: Hinzufügen von größenklassenspezifischen Schriftarten

Das Bearbeiten der Schriftgröße wird in den meisten Fällen ausreichen. In unserer App ist der Inhalt des Labels jedoch für die Compact Width | lesbar Kompakte Höhe Größenklasse, aber es ist nicht ideal. Wenn Sie den Editor für den Vorschau-Assistenten öffnen, werden Sie feststellen, dass das "p" im Wort "Laptop" in einer eigenen Zeile steht.

Wenn das Label ausgewählt ist, klicken Sie im Bereich Attribute auf + neben Schriftart. Dies öffnet ein Menü zum Auswählen einer Größenklasse, auf die eine bestimmte Schriftart angewendet werden soll. Wählen Sie Kompakte Breite | Kompakte Höhe.

Ähnlich wie bei den Größenklassenspezifischen Einschränkungen wurde für die von uns ausgewählte Größenklasse eine Schriftart hinzugefügt. Ändern Sie die Schriftgröße auf 50 Punkte. Öffnen Sie nun den Editor für den Vorschau-Assistenten noch einmal und überprüfen Sie, ob die Schriftart auf jedem Gerät perfekt aussieht.

Die Fähigkeit, adaptive Schriftarten hinzuzufügen, ist unglaublich leistungsstark. Das Lokalisieren von Apps ist trivial, wenn Sie die Schriftgröße mit dynamischem Text genauer steuern können.

6. Andere adaptive Design-Technologien

Während Größenklassen sicherlich ein Hauptmerkmal sind, gibt es viele andere adaptive Design APIs und Verbesserungen, die ich in diesem Tutorial nicht behandelt habe. Zum Beispiel entsprechen View Controller jetzt dem UITraitEnvironment-Protokoll. Dies bedeutet, dass View-Controller über eine traitCollection-Eigenschaft verfügen, die angibt, welche Größenklasse aktuell angezeigt wird.

Wenn Sie gerne Benutzeroberflächen in Code erstellen, bietet Ihnen die Eigenschaft traitCollection dieselben Funktionen wie die Größenklassen in Interface Builder. Sie können benachrichtigt werden, wenn sich die Größenklasse ändert, und erforderliche Aktualisierungen für Ihre Integritätsbedingungen oder die Benutzeroberfläche ausführen.

Eine weitere hilfreiche API ist der UIPopoverController. Wenn Sie zuvor eine universelle App entwickelt haben, bin ich mir sicher, dass Sie Code wie diesen gesehen haben:

UIViewController *contentVC = //content

if([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)
{
    UIPopoverController *popVC = [[UIPopoverController alloc]
initWithContentViewController:contentVC];

    [popVC presentPopoverFromBarButtonItem:item
permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
}
else
{
    [self presentViewController:contentVC animated:YES completion:nil];
}

Ab iOS 8 muss nicht mehr überprüft werden, auf welchem Gerät die App ausgeführt wird, wenn die UIPopoverController-Klasse verwendet wird. Die UIPopoverController-Klasse unterstützt jetzt auch iPhone und iPod Touch.

So weit wie Bild-Assets, beachten Sie, dass es jetzt eine @ 3x Größe gibt. Dies liegt an der Retina HD-Anzeige auf dem iPhone 6 Plus. Wenn Sie die Datei Images.xcassets im Projekt öffnen, sehen Sie sie unter den bereitgestellten Bildsets.

Fazit

Adaptives Design ist wahrscheinlich die wichtigste Veränderung in der iOS-Entwicklung seit einigen Jahren. Vor dem adaptiven Design waren universelle Apps nicht einfach zu entwickeln und die Skalierbarkeit in solchen Projekten könnte ein Problem darstellen. Hoffentlich haben Sie genug von diesem Tutorial gelernt, um diese Probleme zu vermeiden und adaptives Design in Ihre eigenen Apps zu integrieren.