Größe ändern mit Auto-Layout
Im Moment studiere ich Auto-Layout und ich stehe vor einem Problem, das ich nicht lösen kann.
Ich habe eine Ansicht, die korrekt in einem 4-Zoll-Gerät (linke Ansicht) lädt und ich versuche, es für ein 3,5-Zoll-Gerät anzupassen, um genau die richtige Ansicht auf das Bild zu machen:
Der einzige Unterschied besteht darin, dass die Ansichten Grün, Orange, Schwarz und Rosa ein wenig verkleinert werden sollten, um die gleiche Größe für die beiden obigen Ansichten beizubehalten.
Mein Problem ist, dass ich mit den Einschränkungen keinen Weg finde, das zu tun.
Das passiert mit den Einschränkungen, die ich bereits habe:
Ich habe bereits versucht, den unteren Raum an Superview der schwarzen und rosa Ansichten zu 0 hüpfen, dass die Ansichten verkleinern würde, um den Bildschirm anzupassen, aber das funktioniert nicht und gibt mir eine Menge Warnungen auf Xcode.
>1 Antwort
Sie benötigen Beschränkungen gleicher Höhe zwischen den grünen und schwarzen Ansichten und zwischen den orangefarbenen und rosa Ansichten.
Lassen Sie uns Ihr Layout von Grund auf neu konstruieren. Es ist normalerweise einfacher, Abhängigkeiten einzurichten, wenn Sie Ihre Ansichten kleiner als gewünscht gestalten, und die Konstanten der Abhängigkeiten zu bearbeiten, um sie zu vergrößern. Wir beginnen mit fünf Ansichten:
Dieses Layout der Ansichten ist wichtig! Beachten Sie, dass sich die orangefarbene Ansicht beispielsweise genau rechts von der grünen Ansicht befindet. Das heißt, wenn ich Xcode anfordere, eine Beschränkung von der Hinterkante der grünen Ansicht zum nächsten Nachbarn zu erstellen, ist dieser Nachbar die orange Ansicht, nicht die Superansicht.
Es ist hilfreich, die Ansichten in der Dokumentgliederung zu benennen. Um einen zu benennen, klicken Sie auf den Eintrag in der Gliederung, drücken Sie die Eingabetaste und geben Sie den Namen ein:
Wählen Sie Blau. Geben Sie Constraints mit der Konstante 0 an der oberen, vorderen und hinteren Kante und einer Höhenbeschränkung an:
Wenn Sie den Rahmen aktualisieren (wie ich es im Dialog getan habe), wird Xcode es wie folgt darstellen:
Wählen Sie als nächstes Grün. Geben Sie Constraints mit einer konstanten 0 an allen vier Kanten ein. Top sollte zu Blue gehen, Leading sollte zu Superview gehen, Trailing sollte zu Orange gehen, und Bottom sollte zu Black gehen. Sie können überprüfen, welche Ansicht sich am anderen Ende der Einschränkung befindet, indem Sie auf das Dreiecksymbol klicken:
Aktualisieren Sie Green's Frame noch nicht! Es sollte so aussehen:
Als nächstes machen Sie dasselbe für Orange, Schwarz und Pink.
Sobald Sie die Randbedingungen für alle vier unteren Ansichten erstellt haben, wählen Sie alle vier dieser Ansichten aus (grün, orange, schwarz und rosa). Es sollte so aussehen:
Wenn alle vier ausgewählt sind, erstellen Sie die Bedingungen gleicher Breite und gleicher Höhe:
Beachten Sie, dass dies Overkill ist. Wir brauchen nicht wirklich die Beschränkungen gleicher Höhe zwischen der linken und der rechten Spalte, und wir brauchen nicht die Beschränkungen gleicher Breite zwischen der oberen und der unteren Zeile. Aber diese Antwort ist bereits eine Meile lang und es ist viel kürzer, alle Beschränkungen gleicher Größe in einer Aktion zu erstellen.
Jetzt sollte es noch unordentlicher aussehen:
Wählen Sie die Top-Level-Ansicht oder den View-Controller aus und wählen Sie Alle Frames im View Controller aktualisieren:
Xcode sollte die Ansichten folgendermaßen darstellen:
Wenn Sie auf die Umschalttaste für den Formfaktor klicken, sollte Xcode die Ansichten wie folgt darstellen:
Ich habe das letzte Storyboard auf diese Liste hochgeladen.
Tags und Links ios uiview autolayout