Layout-Änderung für Landschaft/Porträt

Question

Ich habe 1 Storyboard und ich bin mit Auto-Layout mit Größenklassen auf Xcode 8 in Swift 3.

ich für Portrait- diese aktuelle Ansicht haben:

Derzeit ist dies eine vertikale Stapelansicht mit Beschriftungen.

In Landschaft, gibt es eine Menge verschwendeten Platz auf der linken/rechten Seite, und ich bin derzeit Daten versteckt aufgrund Bildschirmgröße:

Was ich will, ist im Grunde erreichen statt Wenn alles gestapelt ist, möchte ich die "In Front" Daten auf der linken Seite des Bildschirms haben, dann in der Mitte Bildschirm "Your Laptime". Dann auf der rechten Seite "Hinter dir".

Was ist der beste Weg, dies zu erreichen? Ich komme aus der Android-Entwicklung, wo ich nur ein anderes Layout für jede Ausrichtung hätte, aber ich konnte nichts ähnliches auf iOS finden.

Answer 1

Sie können nach Merkmalen variieren. Hier ist ein langer Durchlauf von einer Möglichkeit, es zu tun. Hoffe, das alles macht Sinn, aber es gibt mehrere Möglichkeiten mit Autolayout, dies zu tun.

Schritt 1. Ziehen Sie eine Ansicht auf das Storyboard und Stift nach oben Layout geführt, führen, nachziehen und unten bei 0. Wir werden dies später benötigen, um alles zu zentrieren.

Schritt 2. Ziehen Sie eine weitere Ansicht, die alle unsere Inhalte halten wird. Und stecke ihn an die Kanten bei etwa 20 Punkten für oben, unten, vorne und hinten. Hinweis: Wir werden einige weitere Einschränkungen hinzufügen und dies später ändern.

Schritt 3. Ziehen Sie eine andere Ansicht auf den Bildschirm und fügen Sie 3 Uilabels hinzu. Klicken Sie auf das obere Etikett und fügen Sie die Einschränkungen im Bild hinzu.

Schritt 4. das zweite Etikett Wählen Sie nach unten und fügen Bottom-10, das führende und 0. Keine Notwendigkeit für Top-Hinter, weil es das gleiche in Schritt 3

Schritt 5. Wiederholen Sie für Boden Etikett hinzugefügt wurde Schritt 4 fügen Sie die 3 Einschränkungen hinzu.

Schritt 6. Klicken Sie auf diese gesamte Ansicht und gehen Sie zum oberen Menü und wählen Sie In StackView einbetten. Siehe Bild

Schritt 7. Fügen Sie ein UILabel über den Lap Text zu halten und stecken Sie es in die Top 20, was bei 0 nachlauf und Boden, die der stackview am 20. Siehe Bild ist

Schritt 8. Nun den stackview Pin 0 bis vorangestellten 0, 0 oder Bottom 20.

Schritt 9. Duplizieren sie die Ansicht mit den Etiketten 2 mal und ziehen sie sie auf der linken Seite in den stackview den viewhierchy Editor Jetzt hat deine Stackview 3 Ansichten. Es sollte jetzt wie das Bild aussehen.

Schritt 10. Jetzt ändern Sie jedes Etikett in der gesamten Ansicht, um eine inhaltlich umgebende Vertikale von 1000 zu haben.Ändern Sie außerdem die Schriftart für jede Schriftart und stellen Sie sie so ein, dass die Schriftart auf einen Faktor von etwa 0,5 verkleinert werden kann. Siehe Bild zur Einstellung der Inhalte.

Schritt 11. Nun zu den Originalbehälter zurückgehen, die die UILabel und die stackview hält und ändern Sie alle Einschränkungen von 20 bis> = an im Editor und fügen Sie und ziehen Sie nach Ansicht des Behält (grau in den Bildern) und wählen Sie Mitte vertikal und Mitte horizontal. Ich kombinierte Bild, das die verschiedenen Menüs zeigt, wird unten angebracht.

Schritt 12. Variationen für den stackview hinzufügen und die richtige Einstellung. Klicken Sie auf das Pluszeichen neben Achse und fügen Sie dieses hinzu.

[![TraitAxis][9]][9] 

Schritt 13. Nun eine weitere Variante für die Ausrichtung hinzufügen und Ihre endgültige stackview Setup sollte wie folgt aussehen.

Die Auszahlung wird wie folgt aussehen. Vorausgesetzt, Sie haben die gewünschten Schriftarten festgelegt und lassen sie skalieren. Ich habe einige der zusätzlichen Etiketten gelöscht, um sie an Ihr Bild anzupassen, und dabei musste ich das verbleibende untere Etikett an den Etikettenbehälter heften. Sie müssen wahrscheinlich eine weitere Ausrichtungsvariante für Plus-Geräte hinzufügen, aber das würde nur die Variationen wie in den letzten Schritten hinzufügen. Möglicherweise müssen Sie auch etwas niedrigere Priorität auf Etiketten lösen, aber ich denke, klicken und ok sagen wird das erledigt. Tu einfach, was immer du sagst. Ich hoffe das hilft. Sie könnten auch Stapelansichten verschachteln und das Layout könnte einfacher sein. Wie ich schon sagte, gibt es wahrscheinlich viele Möglichkeiten, dies zu erreichen, aber das sollte dich auf den richtigen Weg bringen.