Share
Das Erstellen von Anwendungen mit flexiblen Layouts ist vor allem seit der Veröffentlichung des iPhone 5 mit seinem 4-Zoll-Bildschirm und der Einführung von Dynamic Type in iOS 7 unverzichtbar, sodass Benutzer die Textgröße über das gesamte Betriebssystem hinweg ändern können Internationalisierung im Auge.
Mit Auto Layout, das in iOS 6 eingeführt wurde, können Sie solche flexiblen Layouts erstellen. Dies ist eine großartige Alternative zur automatischen Größenänderung von Masken oder zur manuellen Anordnung der Benutzeroberfläche der Anwendung.
Mit dem automatischen Layout können Sie den Ansichten Einschränkungen hinzufügen und die Beziehungen zwischen den Ansichten definieren. Die Beziehung kann zwischen einer Ansicht und ihrem Überblick, einem ihrer Geschwister oder sogar in Bezug zu sich selbst sein.
Anstatt den Rahmen einer Ansicht explizit anzugeben, können Sie mit dem automatischen Layout den Abstand und die relative Positionierung von zwei Ansichten mithilfe von Einschränkungen definieren. Auto Layout verwendet diese Einschränkungen, um die Laufzeitpositionen der Benutzeroberflächenelemente zu berechnen.
Sie müssen genügend Einschränkungen für die Ansicht festlegen, um Mehrdeutigkeiten bezüglich des Layouts zu vermeiden. Es können auch zu viele Einschränkungen festgelegt werden, die Konflikte verursachen und zum Absturz der Anwendung führen können.
Wenn Sie in Xcode 4 unvollständige oder ungültige Einschränkungen für eine Ansicht festlegen, ersetzt der Interface Builder diese durch neue Einschränkungen, die Ihnen meistens nicht den gewünschten Effekt verleihen. Dies führte zu erheblicher Frustration bei den Entwicklern. In Xcode 5 ist es jedoch viel einfacher, das automatische Layout zu verwenden. Xcode erzwingt keine Einschränkungen mehr für eine Ansicht, stattdessen erhalten Sie Hinweise und Warnungen, wenn die Einschränkungen einer Ansicht ungültig sind.
Es ist zwar möglich, mit Auto Layout programmgesteuert zu arbeiten, in diesem Lernprogramm wird jedoch beschrieben, wie Sie mit Interface Builder Layouts mit Auto Layout erstellen können.
Für eine einfache Demonstration dessen, was Auto Layout für Sie tun kann, erstellen wir eine einfache Anwendung und legen einige Einschränkungen für die Ansichten fest. Legen Sie ein neues Xcode-Projekt an und wählen Sie die Einzelansicht-Anwendung Vorlage und Set Geräte zu iPhone.
Bei Storyboards und XIB-Dateien, die mit Xcode 4.5 oder höher erstellt wurden, ist Auto Layout standardmäßig aktiviert. Sie können es im deaktivieren Dateiinspektor Auf der rechten Seite durch Deaktivieren des Kontrollkästchens Verwenden Sie Auto Layout.
Ein guter Grund für die Deaktivierung von Auto Layout ist die Unterstützung von iOS 5 oder niedriger. Auto Layout wird nur von iOS 6 und höher unterstützt. Andernfalls empfiehlt Apple die Verwendung von Auto Layout, da die Erstellung flexibler Benutzeroberflächen schneller und einfacher wird.
Öffnen Sie das Haupt-Storyboard des Projekts, Hauptplatine, Fügen Sie dem Text eine Textansicht hinzu Controller-Szene anzeigen, und positionieren Sie es wie unten gezeigt.
Für die Textansicht wurden keine Einschränkungen festgelegt. Dies hat einige Auswirkungen. Wenn Sie die Anwendung ausführen, wird die Textansicht genau wie im Interface Builder positioniert. Wenn das Gerät jedoch in den Querformatmodus gedreht wird, bleibt die Textansicht weiterhin am linken Rand der Ansicht und ihre Breite ist festgelegt.
Zum Erstellungszeitpunkt werden Einschränkungen automatisch für Ansichten generiert, die keine Einschränkungen aufweisen. Dies erklärt das Verhalten, das wir sehen. Die der Textansicht hinzugefügten Einschränkungen sind beispielsweise eine linke und obere Einschränkung, mit der die Textansicht oben links fixiert wird, und eine Breiten- und Höhenbeschränkung, die die Größe der Textansicht festlegt.
Sobald Sie mit dem Definieren von Einschränkungen beginnen, müssen Sie jedoch sicherstellen, dass die Einschränkungen für eine Ansicht keine Konflikte verursachen. Im nächsten Abschnitt fügen wir der Textansicht einige Einschränkungen hinzu, um deren Position und Größe anzupassen, wenn das Gerät gedreht wird oder wenn die Anwendung beispielsweise auf einem iPhone 5 mit einem größeren Bildschirm ausgeführt wird.
Es gibt mehrere Möglichkeiten, einer Ansicht Layoutbeschränkungen hinzuzufügen.
Halten Sie die Steuerung Drücken Sie die Taste und ziehen Sie sie aus der Ansicht, zu der Sie die Layouteinschränkung hinzufügen möchten, in eine andere Ansicht. Wenn Sie die Maustaste loslassen, sollte ein Menü mit Optionen angezeigt werden. Die Optionen hängen von der Richtung und das Ansicht, zu der Sie gezogen haben.
Um dies zu veranschaulichen, ziehen Sie aus der Textansicht an den Anfang der Ansicht des View-Controllers. Xcode hebt beide Ansichten hervor, um anzuzeigen, dass die Layoutbedingung beide Ansichten enthält. Wenn Sie die Maustaste loslassen, zeigt das Menü die Layouteinschränkungen an, die der Quellansicht, der Textansicht, hinzugefügt werden können. Um die Textansicht in der Ansicht des Controller-Controllers horizontal zu zentrieren, wählen Sie Horizontal im Behälter zentrieren aus dem menü. Als Ergebnis erscheint eine orangefarbene Linie, die die gerade hinzugefügte Layoutbedingung kennzeichnet.
Sie können Layouteinschränkungen auch über das Menü "Auto-Layout" am unteren Rand des Interface Builder-Arbeitsbereichs hinzufügen und bearbeiten.
Von links aus können Sie das Menü aufrufen ausrichten und Stift Ansichten, automatische Layoutprobleme beheben, und das die Verhalten der Größe anpassen für die ausgewählte Ansicht. Lassen Sie mich erklären, was jeder Menüpunkt bewirkt.
Alle oben genannten Menüoptionen finden Sie auch in Xcode Editor Speisekarte.
Um der Textansicht Layoutbeschränkungen hinzuzufügen, wählen Sie die Ansicht in Xcode aus, und halten Sie die Taste gedrückt Steuerung und ziehen Sie aus der Textansicht an den oberen Rand der View Controller-Ansicht. Wählen Horizontal im Behälter zentrieren aus dem erscheinenden Menü. Dadurch wird eine Layoutbeschränkung hinzugefügt, die sicherstellt, dass die Textansicht unabhängig von der Ausrichtung des Geräts immer in der Ansicht des View-Controllers zentriert ist.
Möglicherweise haben Sie bemerkt, dass die Textansicht eine orange Umrandung hat. Xcode teilt uns mit, dass die Layout-Einschränkungen der Textansicht ungültig oder unvollständig sind. Wir haben angegeben, dass die Textansicht in der übergeordneten Ansicht horizontal zentriert sein sollte, das Auto-Layout-System jedoch nicht weiß, wie groß die Textansicht sein soll. Fügen Sie einige weitere Einschränkungen hinzu, bis die Umrissansicht der Textansicht blau wird, um anzuzeigen, dass die Layoutbeschränkungen der Textansicht gültig sind.
Beachten Sie, dass Sie die Warnungen ignorieren und eine Anwendung mit unvollständigen Layouteinschränkungen ausführen können. Sie sollten jedoch niemals eine Anwendung mit mehrdeutigen Layoutbeschränkungen ausliefern, da Sie nicht genau wissen, wie die Benutzeroberfläche der Anwendung auf verschiedenen Geräten in unterschiedlichen Ausrichtungen aussehen wird.
Wenn die Textansicht ausgewählt ist, ziehen Sie mit gedrückter Strg-Taste aus der Textansicht an den oberen Rand der Ansicht des View-Controllers und wählen Sie aus Oberer Platz zum oberen Layouthandbuch. Dies setzt ein Beschränkung des vertikalen Raums von der oberen Layout-Anleitung des View-Controllers bis zur Textansicht.
Ziehen Sie dann bei gedrückter Strg-Taste aus der Textansicht in die Ansicht des View-Controllers und wählen Sie Führender Platz zum Container um den Abstand von der übergeordneten Ansicht links von der Textansicht festzulegen. Ziehen Sie bei gedrückter Strg-Taste aus der Textansicht in die Ansicht des View-Controllers und wählen Sie Unterer Platz bis unterer Layout-Leitfaden Festlegen einer vertikalen Leerzeichenbedingung von der unteren Layout-Anleitung des View-Controllers bis zur unteren Ansicht der Textansicht.
Die Gliederung der Textansicht sollte blau sein. Dies zeigt an, dass die Layoutbeschränkungen der Textansicht gültig und vollständig sind. Führen Sie die Anwendung im iOS-Simulator aus und ändern Sie die Ausrichtung, um das Ergebnis zu überprüfen.
Beachten Sie, dass wir keine horizontale Leerzeichenbeschränkung hinzufügen mussten, um den Abstand vom rechten Rand der Textansicht und deren Überblendungsbereich festzulegen, da wir den führenden Leerzeichenbereich der Textansicht festgelegt und die Textansicht horizontal in der Übersichtsansicht zentriert haben. Das Auto-Layout-System verfügt über genügend Informationen, um die Textansicht korrekt zu gestalten. Wir können dasselbe Ergebnis erreichen, indem wir vier Platzbeschränkungen angeben und die Ausrichtungseinschränkung weglassen.
In diesem Beispiel wurde gezeigt, wie Sie Layoutbeschränkungen zwischen einer Ansicht und ihrer übergeordneten Ansicht festlegen. Sehen wir uns ein anderes Beispiel an, in dem wir Layoutbeschränkungen zwischen gleichgeordneten Elementen festlegen.
Beginnen Sie mit dem Löschen der Textansicht. Dadurch werden auch die Layouteinschränkungen der Textansicht gelöscht. Fügen Sie der Ansicht des View-Controllers ein Textfeld, einen Schieberegler und ein segmentiertes Steuerelement hinzu (siehe unten).
Wenn Sie die Anwendung ausführen, ohne Einschränkungen festzulegen, bleiben die drei Elemente am linken Rand der übergeordneten Ansicht in Querformat.
Wir möchten jedoch, dass die Elemente die gesamte Breite des Bildschirms ausfüllen, wie unten gezeigt. Das Textfeld sollte horizontal erweitert werden und der Schieberegler sollte auch erweitert werden, um die Bildschirmbreite auszunutzen. Das segmentierte Steuerelement sollte jedoch eine feste Breite haben.
Wählen Sie das Textfeld aus und klicken Sie auf Stift Schaltfläche im Menü Auto Layout unten. Im Bereich Abstand zum nächsten Nachbarn Klicken Sie oben im Menü auf die obere, rechte und linke Linie, die das Quadrat umgibt. Die Linien sollten daher rot werden. Klicken Sie anschließend auf die Schaltfläche am unteren Rand Fügen Sie 3 Einschränkungen hinzu um die angegebenen Platzbeschränkungen hinzuzufügen.
Wählen Sie den Schieberegler und wiederholen Sie die gleichen Schritte, indem Sie eine obere, linke und rechte Begrenzung des Leerraums festlegen. Dadurch wird sichergestellt, dass der Abstand zwischen dem Schieberegler und dem Textfeld sowie dem Schieberegler festgelegt ist und dass die segmentierte Steuerung festgelegt ist.
Wiederholen Sie die gleichen Schritte für das segmentierte Steuerelement, fügen Sie jedoch nur eine obere und rechte (nachstehende) Leerzeicheneinschränkung hinzu. Überprüfen Sie außerdem die Breite Kontrollkästchen und klicken Sie auf die Schaltfläche Fügen Sie 3 Einschränkungen hinzu Knopf am unteren Rand. Wir möchten nicht, dass das segmentierte Steuerelement erweitert wird, wenn sich die Bildschirmgröße ändert. Deshalb geben wir ihm eine feste Breite.
Wenn Xcode uns Fehler oder Warnungen zu fehlenden oder ungültigen Layouteinschränkungen liefert, ist möglicherweise nicht immer klar, welche Einschränkungen hinzugefügt oder aktualisiert werden müssen. Xcode hilft uns, indem es uns zeigt, welche Einschränkungen im Dokument Gliederung.
Wenn ein Layout ungültig oder unvollständig ist, wird ein roter Pfeil im angezeigt Dokument Gliederung. Wenn Sie auf den Pfeil klicken, wird von rechts ein Fenster eingeblendet, das angibt, welche Einschränkungen fehlen oder ungültig sind. Dies gibt Ihnen einen Hinweis, wie Sie das Layout korrigieren können.
Rechts von jedem Fehler oder jeder Warnung befindet sich ein roter Kreis (Fehler) oder ein gelbes Dreieck (Warnung). Wenn Sie auf den Fehler oder die Warnung klicken, wird ein Menü mit Vorschlägen zur Behebung des Problems angezeigt.
Sie können auch die Beheben von Problemen mit dem automatischen Layout Menü, um fehlende Einschränkungen hinzuzufügen, die Einschränkungen einer Ansicht zurückzusetzen oder Einschränkungen zu löschen. Xcode fügt der ausgewählten Ansicht automatisch Einschränkungen hinzu. Dies kann Zeit sparen, aber es ist auch möglich, dass das resultierende Layout nicht Ihren Vorstellungen entspricht.
Wenn Sie einer Ansicht Layoutbeschränkungen hinzugefügt haben und deren Größe oder Position ändern, hebt Xcode die Ansicht orange hervor, um anzuzeigen, dass die aktuelle Position und / oder Größe nicht mit den Layoutbeschränkungen übereinstimmt.
Wenn Sie die Anwendung ausführen, werden Sie feststellen, dass das Auto-Layout-System die Layouteinschränkungen der Ansicht erzwingt und die von Ihnen festgelegte neue Größe und Position der Ansicht ignoriert. Dies ist ein sogenannter falsche Ansicht. Der folgende Screenshot zeigt eine Schaltfläche, die ich verschoben habe, nachdem ich die Layout-Einschränkungen festgelegt habe.
Um dies zu beheben, können Sie entweder die Layoutbeschränkungen löschen und neue festlegen oder von Xcode für Sie korrigieren lassen. Sie haben zwei Möglichkeiten, um eine falsch platzierte Ansicht zu korrigieren.
Im obigen Beispiel wählen wir aus Einschränkungen aktualisieren Um die Layoutbeschränkungen auf die neue Größe und Position der Schaltfläche zu aktualisieren, möchten wir die neue Größe und Position der Schaltfläche beibehalten.
Das Auto-Layout-System vereinfacht und beschleunigt das Layout von Benutzeroberflächen. Vor der Einführung von Auto Layout mussten Entwickler die Benutzeroberfläche einer Anwendung hartcodieren, indem sie den Rahmen und die Maske für die automatische Größenänderung einer Ansicht setzen. Mit Auto Layout ist dies nicht mehr erforderlich.
Durch das korrekte Festlegen der Layout-Beschränkungen einer Ansicht wird ihre Position unabhängig von der Bildschirmgröße oder -ausrichtung automatisch aktualisiert. Ein weiterer Bereich, in dem Auto Layout nützlich ist, ist die Lokalisierung von Anwendungen. Wörter und Sätze sind in verschiedenen Sprachen unterschiedlich lang. Auch dies kann mit Auto Layout gelöst werden.
Accentsconagua