2015-09-30 2 views
21

Bin neu zu Auto-Layout-Einschränkungen in Xcode. Ich habe eine Bodenansicht wie UITabBar mit 6 UIButtons. Ohne Einschränkungen habe ich diese Schaltflächen mit 5 Leerzeichen Füllung mit jeder Taste ausgerichtet und jede Taste hat 50 Breite. Jetzt versuche ich es mit dem Auto-Layout zu erreichen, um alle Bildschirmgrößen zu unterstützen.Hinzufügen von Equal Spacing und gleiche Breite für Schaltfläche in iOS Auto-Layout

In Storyboard Constrains habe ich gleiche Breite für 6 Tasten eingestellt und ich habe 60 Platz zwischen den einzelnen Tasten. Ich setze die erste Taste 0 auf das führende Leerzeichen und setze ich die letzte Taste 0, um Einschränkungen zu beenden.

Ich möchte die buttons with equal width and flexible spaces zwischen Ansichten in allen Gerätegrößen.

Kann mir jemand bitte helfen? Auf der Suche nach der Hilfe. Danke im Voraus.

enter image description here

Antwort

53

Kontrolle dieses Bild und machte Ihre Einschränkungen wie unten ...

enter image description here

ERGEBNIS: - Vorschau in verschiedenen Größen

enter image description here


Mit Stackview (für iOS 9.0 und höher)

enter image description here

HINWEIS: Wenn Sie App für iOS 9 und höher machen müssen dann UIStackView ist eine weitere Option für Sie

+0

Vielen Dank für Ihre Hilfe. Ich brauche eine Klarstellung. Haben Sie 5 Ansichten zwischen den Tasten (1-6) hinzugefügt? –

+1

Vielen Dank für Ihre Hilfe. Es funktioniert .. :) –

+0

Sie sind herzlich willkommen ... glücklich, Ihnen zu helfen ... :) –

0

Wählen Sie alle Tasten und im Pinmenü von Xcode

  1. Erstellen Sie eine horizontale Abhängigkeit von der oberen linken Ansicht zur rechten oberen Ansicht, indem Sie die rote Linie zum nächsten Nachbarn der rechten Seite auswählen.
  2. Erstellen Sie eine horizontale Abhängigkeit von der oberen rechten Ansicht zur oberen linken Ansicht, indem Sie die rote Linie auswählen auf die linke Seite der gewählten Ansicht nächste Nachbarn
  3. eine vertikale Einschränkung aus der Draufsicht erstellen, indem Sie die rote Linie auf die ausgewählten Ansicht der Oberseite nächste Nachbarn
  4. Select Checkbox in der Nähe von Höhe, gleicher Breite Auswahl und klicken Sie auf "22 hinzufügen Einschränkungen "
0

iOS 9 hat eine neue UIKit-Klasse namens UIStackView. Es ist sehr hilfreich beim horizontalen oder vertikalen Stapeln von Ansichten, so wie Sie es möchten. Sie sollten dieses Tutorial: Raywenderlich: UIStackView Tutorial

+0

einstellen, aber auch beachten Sie, dass ... nur verfügbar, wenn Ihre App mindestens iOS9 unterstützt –

+0

Es gibt eine Arbeit iOS 7+ Port, das ist ziemlich gut. https://github.com/oarrabi/OAStackView @EICaptain – BooRanger

7

Mit iOS 9 und Xcode 7 können Sie jetzt das erwartete Ergebnis mit UIStackView und nur 3 oder 4 Auto-Layout-Einschränkungen haben.

Die folgende Schritt für Schritt verwendet Storyboard.

  1. Erstellen 6 UIButton s und 5 UIView s. Richten Sie sie horizontal aus. Gib deinen Ansichten etwas Farbe.

enter image description here

  1. Wählen Sie alle Ihre Ansichten und Schaltflächen und klicken Sie auf die Schaltfläche Stack. Sie werden alle Ihre Schaltflächen und farbigen Ansichten in einer UIStackView ausgerichtet haben.

enter image description here

  1. Wählen Sie ein Stapelansicht, gehen Sie auf die Utilities Panel und wählen Sie das Attributes Inspector Artikel. Dort klicken Sie auf die Schaltfläche Distribution und wählen Sie "Fill Equally".

enter image description here

  1. Vorerst Ihre Stack Ansicht der Höhe auf Tasten intrinsische Inhaltsgröße beruht. Wenn Sie damit einverstanden sind, können Sie mit Schritt 5 fortfahren. Sie können Ihrer Stapelansicht jedoch bei Bedarf eine Höhenbeschränkung zuweisen. Wählen Sie Ihre Stapelansicht, klicken Sie auf die Schaltfläche Pin, überprüfen Sie die Height Schaltfläche, fügen Sie den erforderlichen Wert hinzu und klicken Sie auf die Schaltfläche Add 1 Constraint.

enter image description here

Als Alternative Wenn Sie jedes Element Ihrer Stapelansicht möchten, um ihre Höhe zu haben, seine Breite übereinstimmt, wählen Sie den ersten Button Ihres Stapelansicht, klicken Sie auf die Pin Taste, wählen Sie Aspect Ratio und Klicken Sie auf die Schaltfläche Add 1 Constraint.

enter image description here

können Sie überprüfen, ob Ihr Seitenverhältnis Einschränkung in Ihrem Document outline korrekt ist (links), und wenn Sie möchten, können Sie es mit einer anderen Einschränkung in der Attribute inspector (rechts) ändern.

enter image description here

  1. Jetzt ist es Zeit, ein paar äußere Zwänge zu Ihrer Stapelansicht zu geben. Wählen Sie Ihre Stapelansicht. Klicken Sie auf die Schaltfläche pin, stellen Sie sicher, dass die Schaltfläche Constrain to margin nicht ausgewählt ist, und setzen Sie die Bedingungen für die führende, die nachstehende und die untere Bedingung auf Null. Stellen Sie sicher, dass sich die untere Einschränkung auf die Ansicht Ihres Ansichtscontrollers bezieht. Ändern Sie dann die Update Frames Schaltfläche zu "Alle Frames in Container". Sie können jetzt auf die Schaltfläche Add 3 Constraints klicken.

enter image description here

Ihre Stapelansicht ist nun eingestellt.

enter image description here

Weitere Bemerkung:

Wenn Sie nicht Ihre farbigen Ansichten benötigen Breite Ihre Tasten Breite passen, können Sie mit nur UIButtons einen Stapel Ansicht bauen und einfach Abstand zu Ihrem Stack-Ansicht in die Attribute inspector. Sie müssen jedoch eine Möglichkeit finden, hinter der Stapelansicht eine Hintergrundfarbe hinzuzufügen. Apple schreibt dazu in der UIKit Framework Reference:

Die UIStackView ist eine nonrendering Unterklasse von UIView. Es stellt keine eigene Benutzeroberfläche zur Verfügung. Stattdessen verwaltet es nur die Position und Größe seiner angeordneten Ansichten. Daher haben einige Eigenschaften (wie backgroundColor) keine Auswirkungen auf die Stapelansicht.


Ich habe ein Xcode-Projekt mit 4 verschiedenen Stapeln Ansichten bauen:

  • eines mit farbigen Ansichten und seine Höhe auf der eingebetteten UIButton intrinsischen Inhalt Größe verlassen,
  • eine mit farbigen Ansichten und mit einer UIButton "gleiche Breite und Höhe" Nebenbedingung,
  • eins mit farbigen Ansichten und mit einer eigenen Höhenbeschränkung,
  • eine ohne farbige Ansichten, aber mit Abstand und eingebettet in einer farbigen Ansicht.

Sie können dieses Projekt auf dieser GitHub repo finden.

+0

werden sie eine perfekte Quadrate Herr erhalten? –

Verwandte Themen