2014-10-17 10 views
7

Ich bin neu zu Autolayout und ich bin irgendwie fest auf, wie man diese 4 Bilder in allen verschiedenen Geräten wie es auf den Bildern sieht zentrieren. Ich habe versucht, die automatisch konfigurierten Einschränkungen anzuwenden, aber dann wird es diese Entfernung haben und das passt nicht auf alle Geräte. Also meine Frage ist, welche Einschränkungen muss ich auf alle verschiedenen Bilder anwenden, um alle Bilder mit der gleichen Entfernung zentriert zu machen?Center 4 Bilder mit Einschränkungen Autolayout

Hier ist, wie meine Zelle in der Storyboard wie folgt aussieht:

enter image description here

Bild der Constraint-Optionen auf Bild 1:

enter image description here

Bild in Simulator:

enter image description here

/// MY TRY ////

Hier sehen Sie die Einschränkungen, die ich hinzugefügt habe und das Ergebnis?

enter image description here

Ergebnis:

enter image description here

+1

Ein Ratschlag ist nur eine Containeransicht für Ihre Bildansichten erstellen. Zentrieren Sie dann diese Containeransicht in der Ansicht Ihres Ansichtscontrollers. – mustafa

Antwort

6

Ihr Ansatz ist fast richtig, es fehlt einfach Größe Einschränkungen für die Bilder.

Wenn Sie die Bilder dynamisch skalieren und den Abstand zwischen ihnen konstant halten möchten, setzen Sie die Bilder auf die Breite >=20 (oder einen anderen Wert, abhängig von Ihren Anforderungen) und eine Einschränkung für das Seitenverhältnis . Ziehen Sie dann bei gedrückter Strg-Taste von UIImageView1 nach UIImageView2 und setzen Sie eine Bedingung für gleicher Breite. Wiederholen Sie dies von UIImageView1 bis UIImageView3 und von UIImageView1 bis UIImageView4.

enter image description here


Wenn Sie die Bilder wollen immer ihre feste Größe zu halten und dynamisch Größe Räume zwischen ihnen benötigen Sie einen anderen Ansatz:

Der Trick hier ist 3 leer UIViews zwischen den UIImageViews zu platzieren so dass es wie folgt aussieht:

enter image description here

  • Set Einschränkungen nach oben für alle Ansichten
  • Set Einschränkungen nach links und rechts für UIImageView1 und 4
  • Set Einschränkungen für alle UIImageViews auf die gleiche Breite
  • Set Einschränkungen für alle UIViews zwischen dem UIImageViews auf den gleichen Breite
  • Set Einschränkungen für alle Abstände zwischen den Ansichten auf 0
  • die Breite Einschränkungen für die UIViews Set zu >= 0

Auf diese Weise werden die leeren UIViews zwischen den UIImageViews dynamisch skaliert und haben dieselbe Breite.

Ich hoffe, Sie bekommen die Idee.

+0

Hey danke für deine Zeit. Ich kann sehen, dass du bereits ein Demo-Projekt gemacht hast. Für den Zweck des Zeigens. Ich habe gekämpft und es scheint immer noch nicht das Ergebnis zu haben. kannst du das Projekt mit mir teilen? Vielen Dank im Voraus –

+0

Ich habe meine Antwort bearbeitet, bitte überprüfen Sie, ob das Ihr Problem löst. – zisoft

+0

Danke, ich sehe es mir jetzt an! mit freundlichen Grüßen –

0

für das erste Bild eine führende Leerzeichen ein Leerzeichen zu Super und für das letzte Bild hinzufügen, vertikalen Abstand zwischen erster Super und fügen und zweitens, zweite und dritte, dritte und vierte und auch horizontal innerhalb des Containers zu jedem der Bilder gesetzt

+0

Ich habe versucht, genau das zu tun, was du gesagt hast. schau in meine Frage unten. –

0

Die Objekte auf Ihrem Storyboard erfordern mindestens 4 Constraints pro Objekt . Wenn sich um das UIImageView-Objekt orangefarbene Linien befinden, wie es in Ihrer Frage angezeigt wird, bedeutet dies, dass eine Einschränkung fehlt oder widersprüchlich ist und häufig bedeutet, dass das Bild zur Laufzeit nicht wie erwartet angezeigt wird.

Zuerst empfehle ich Ihnen, alle Objekte auszuwählen und 'Einschränkungen zu löschen', dann beginnen Sie erneut.

Obwohl nicht genau das gleiche, hier ist ein Link zu einer Antwort, die die Auto-Layout-Einschränkungen in ein bisschen mehr Details erklärt. Sobald Sie es verstanden haben, kann Auto-Layout sehr mächtig sein.

>>Link to similar auto-layout issue - iOS CustomTableViewCell: elements not aligning correctly<<

Ich hoffe, das

hilft
0

Wenn Sie die Bilder wollen immer ihre feste Größe zu halten und dynamisch Größe Räume zwischen ihnen dann sehr einfachste Weg, an dem Sie das vier UIView in Ihrem Storyboard Satz constrain ziehen Oben links rechts und Höhe für alle UIViews und geben Sie die gleiche Breite für alle UIViews (ziehen Sie von einem UIView zum anderen und setzen Sie die gleiche Breite wiederholen Sie diese Arbeit für alle UIViews).

Image about layouts

Zweitens haben Sie in dieser UIViews Ihrer Bilder auf Drag und setzen ihre constrain Höhe Breite und horizontale Mitte in Behältern und in der Mitte vertikal in Behältern.

In der letzten Einstellung der Hintergrundfarbe aller UIViews Standard (weiß) erhalten Sie das Ergebnis, es wird funktionieren .... Ich versichere.

Screenshot of Xcode

Verwandte Themen