iOS
Automatisches Layout

Einführung

Syntax

• NSLayoutConstraint (item: Any, Attribut: NSLayoutAttribute, relatedBy: NSLayoutRelation, toItem: Any ?, Attribut: NSLayoutAttribute, Multiplikator: CGFloat, Konstante: CGFloat) // Erstellen Sie programmgesteuert eine Kontraint

Festlegen von Einschränkungen programmgesteuert

Beispiel für Boilerplate-Code

override func viewDidLoad() {
    super.viewDidLoad()

    let myView = UIView()
    myView.backgroundColor = UIColor.blueColor()
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView)

    // Add constraints code here
    // ...
}

In den folgenden Beispielen ist Anchor Style die bevorzugte Methode gegenüber NSLayoutConstraint Style. Sie ist jedoch nur unter iOS 9 verfügbar. Wenn Sie also iOS 8 unterstützen, sollten Sie immer noch NSLayoutConstraint Style verwenden.

Pinning

Ankerart

let margins = view.layoutMarginsGuide
myView.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor, constant: 20).active = true

• Neben leadingAnchor gibt es auch trailingAnchor , topAnchor und bottomAnchor .

NSLayoutConstraint Style

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0).active = true

• Zusätzlich zum .Leading gibt es auch .Trailing , .Top und .Bottom .
• Neben .LeadingMargin gibt es auch .TrailingMargin , .TopMargin und .BottomMargin .

Visual Format Sprachstil

NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[myViewKey]", options: [], metrics: nil, views: ["myViewKey": myView])

Breite und Höhe

Ankerart

myView.widthAnchor.constraintEqualToAnchor(nil, constant: 200).active = true
myView.heightAnchor.constraintEqualToAnchor(nil, constant: 100).active = true

NSLayoutConstraint Style

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100).active = true

Visual Format Sprachstil

NSLayoutConstraint.constraintsWithVisualFormat("H:[myViewKey(200)]", options: [], metrics: nil, views: ["myViewKey": myView])
NSLayoutConstraint.constraintsWithVisualFormat("V:[myViewKey(100)]", options: [], metrics: nil, views: ["myViewKey": myView])

Im Behälter zentrieren

Ankerart

myView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
myView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true

NSLayoutConstraint Style

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0).active = true

Visual Format Sprachstil

NSLayoutConstraint.constraintsWithVisualFormat("V:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["myViewKey": myView, "viewKey": view])
NSLayoutConstraint.constraintsWithVisualFormat("H:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: ["myViewKey": myView, "viewKey": view])

So verwenden Sie das automatische Layout

Auto-Layout wird verwendet, um Ansichten so anzuordnen, dass sie auf jedem Gerät und der Ausrichtung gut aussehen. Einschränkungen sind die Regeln, die festlegen, wie alles festgelegt werden soll. Dazu gehören unter anderem das Anheften von Kanten, das Zentrieren und das Einstellen von Größen.

Das automatische Layout ist standardmäßig aktiviert. Sie können dies jedoch noch einmal überprüfen. Wenn Sie im Projektnavigator auf Main.storyboard klicken und dann den Dateiinspektor anzeigen . Stellen Sie sicher, dass Auto-Layout und Größenklassen aktiviert sind:

Automatische Layouteinschränkungen können im Interface Builder oder im Code festgelegt werden. Im Interface Builder finden Sie unten rechts die Werkzeuge für das automatische Layout. Wenn Sie darauf klicken, werden verschiedene Optionen zum Einstellen der Einschränkungen in einer Ansicht angezeigt.

Wenn Sie unterschiedliche Einschränkungen für unterschiedliche Gerätegrößen oder -ausrichtungen wünschen, können Sie sie in den Optionen für die Größenklassen unten in der Mitte einstellen.

Zentrumsbeschränkungen

Wählen Sie im Storyboard Ihre Schaltfläche (oder die Ansicht, die Sie zentrieren möchten). Klicken Sie dann rechts unten auf die Schaltfläche zum Ausrichten. Wählen Sie Horizontally in Container und Vertically in Container . Klicken Sie auf "Add 2 Constraints".

Wenn es noch nicht perfekt zentriert ist, müssen Sie möglicherweise noch etwas tun. Klicken Sie auf die Schaltfläche "Frames aktualisieren", die sich zwei neben der Schaltfläche "In Stapel einbetten" in der unteren Leiste befindet.

Sie können auch "Bilder nach Bedarf aktualisieren", indem Sie nach dem Auswählen der Ansicht zusammen ⌘ + ⌥ + = (Befehl + Wahl und gleich) drücken. Dies kann etwas Zeit sparen.

Wenn Sie jetzt Ihre App ausführen, sollte sie zentriert sein, unabhängig von der verwendeten Gerätegröße.

Eine andere Möglichkeit, Ansichten mit dem Interface Builder zu zentrieren, ist das Ziehen und Ziehen mit der Maus. UILabel Sie möchten ein UILabel in einer Ansicht UILabel . Öffnen Sie die Document Outline in Ihrem Storyboard, indem Sie unten links auf die Seitenleistenschaltfläche klicken. Klicken Sie bei gedrückter Strg-Taste (Steuerung) von der Beschriftung in die Ansicht, und eine blaue Linie sollte angezeigt werden:

Bei der Freigabe erscheint ein Menü mit Einschränkungsoptionen:

Wählen Sie "Horizontal in Container zentrieren" und "Vertikal in Container zentrieren". Aktualisieren Sie die Frames nach Bedarf und voila! Ein zentriertes Etikett.

Alternativ können Sie die Einschränkungen programmgesteuert hinzufügen. Erstellen Sie die Abhängigkeiten und fügen Sie sie den gewünschten UI-Elementen und -Sichten hinzu, wie im folgenden Beispiel beschrieben. Dort erstellen wir eine Schaltfläche und richten sie in der Mitte horizontal und vertikal zum übergeordneten Bereich aus:

Ziel c

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIButton *yourButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 18)];
    [yourButton setTitle:@"Button" forState:UIControlStateNormal];


    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; //Align veritcally center to superView

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //Align horizontally center to superView

    [self.view addSubview:yourButton]; //Add button to superView
}

Schnell

override func viewDidLoad() 
{
    super.viewDidLoad()
    let yourButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 18))
    yourButton.setTitle("Button", forState: .Normal)

    let centerVertically = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterX,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterX,
                                  multiplier: 1.0,
                                    constant: 0.0)
    let centerHorizontally = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterY,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterY,
                                  multiplier: 1.0,
                                    constant: 0.0)
    NSLayoutConstraint.activateConstraints([centerVertically, centerHorizontally])
}

Raumansichten gleichmäßig

Es ist üblich, zwei Ansichten nebeneinander und zentriert in ihrem Überblick zu haben. Die übliche Antwort für Stack Overflow besteht darin, diese beiden Ansichten in eine UIView und die UIView . Dies ist nicht notwendig oder empfohlen. Aus den UILayoutGuide- Dokumenten:

Das Hinzufügen von Dummy-Ansichten zu Ihrer Ansichtshierarchie ist mit einer Reihe von Kosten verbunden. Erstens gibt es die Kosten für die Erstellung und Pflege der Ansicht selbst. Zweitens ist die Dummy-Ansicht ein vollständiges Mitglied der Ansichtshierarchie, was bedeutet, dass sie zu jeder Aufgabe, die die Hierarchie durchführt, zusätzlichen Aufwand verursacht. Am schlimmsten ist, dass die unsichtbare Dummy-Ansicht Nachrichten abfangen kann, die für andere Ansichten vorgesehen sind, was Probleme verursacht, die sehr schwer zu finden sind.

Sie können UILayoutGuide dazu verwenden, anstatt die Schaltflächen zu einer unnötigen UIView . Ein UILayoutGuide ist im Wesentlichen ein rechteckiger Bereich, der mit dem automatischen Layout interagieren kann. Sie platzieren einen UILayoutGuide auf der linken und rechten Seite der Schaltflächen und legen deren Breite gleich fest. Dadurch werden die Tasten zentriert. So machen Sie es im Code:

Visual Format Sprachstil

view.addSubview(button1)
view.addSubview(button2)

let leftSpace = UILayoutGuide()
view.addLayoutGuide(leftSpace)

let rightSpace = UILayoutGuide()
view.addLayoutGuide(rightSpace)

let views = [
    "leftSpace" : leftSpace,
    "button1" : button1,
    "button2" : button2,
    "rightSpace" : rightSpace
]

// Lay the buttons and layout guides out horizontally in a line. 
// Put the layout guides on each end.
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[leftSpace][button1]-[button2][rightSpace]|", options: [], metrics: nil, views: views))

// Now set the layout guides widths equal, so that the space on the 
// left and the right of the buttons will be equal
leftSpace.widthAnchor.constraintEqualToAnchor(rightSpace.widthAnchor).active = true

Ankerart

let leadingSpace = UILayoutGuide()
let trailingSpace = UILayoutGuide()
view.addLayoutGuide(leadingSpace)
view.addLayoutGuide(trailingSpace)

leadingSpace.widthAnchor.constraintEqualToAnchor(trailingSpace.widthAnchor).active = true
    
leadingSpace.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
leadingSpace.trailingAnchor.constraintEqualToAnchor(button1.leadingAnchor).active = true
    
trailingSpace.leadingAnchor.constraintEqualToAnchor(button2.trailingAnchor).active = true
trailingSpace.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true

Sie müssen dazu auch vertikale Beschränkungen hinzufügen. Dadurch werden die Schaltflächen in der Ansicht zentriert, ohne "Dummy-Ansichten" hinzuzufügen! Dies erspart dem System, CPU-Zeit für das Anzeigen dieser "Dummy-Ansichten" zu verschwenden. In diesem Beispiel werden Schaltflächen verwendet. Sie können die Schaltflächen jedoch für jede Ansicht austauschen, für die Sie Einschränkungen festlegen möchten.

Wenn Sie iOS 8 oder eine frühere Version unterstützen, können Sie dieses Layout am einfachsten erstellen, indem Sie versteckte Dummy-Ansichten hinzufügen. Mit iOS 9 können Sie Dummy-Ansichten durch Layout-Anleitungen ersetzen.

Hinweis: Interface Builder unterstützt noch keine Layout-Handbücher (Xcode 7.2.1). Wenn Sie sie verwenden möchten, müssen Sie Ihre Einschränkungen im Code erstellen. Quelle .

UILabel intrinsische Größe

Wir müssen eine Ansicht erstellen, die einen Text mit einem Bildpräfix versehen wird. Text kann von variabler Länge sein. Wir müssen ein Ergebnis erzielen, bei dem sich Text + Bild immer in der Mitte einer übergeordneten Ansicht befindet.

Schritt 1: Erstellen Sie zunächst ein einzelnes Ansichtsprojekt und benennen Sie es nach Belieben. Öffnen Sie die Faustansicht des Storyboards. Beschreiben Sie eine Ansicht mit angemessener Größe und setzen Sie die Hintergrundfarbe auf gelb.Ich habe meinen Viewcontroller auf 3,5 ″ verkleinert view sollte so aussehen

Schritt 2: Jetzt fügen wir der gelben Ansicht Einschränkungen hinzu. Zuerst werden Breiten- und Höhenbeschränkungen hinzugefügt. (Warte eine Minute, haben wir nicht gesagt, dass die Ansicht dynamische Breite haben wird? Ok, wir werden später darauf zurückkommen.) Die folgenden Einschränkungen, wie in der Abbildung unten dargestellt, stören sich nicht mit dem width-Wert. Jeder Wert wird für die Breite gut sein. Lassen Sie ihn einfach groß genug, damit wir Autolayouts richtig hinzufügen können.

Nachdem Sie diese beiden Einschränkungen hinzugefügt haben, werden Sie feststellen, dass XCode Fehler ausgibt, da in der folgenden Abbildung diese angezeigt und verstanden werden können.

Wir haben zwei Fehler (Rot bedeutet Fehler). Wie oben erläutert, können Sie den Mehrdeutigkeits-Teil erneut aufrufen

Fehlende Einschränkungen: Benötigen Sie Einschränkungen für: X-Position: - Wie oben erläutert, haben wir der Ansicht eine Breite und eine Höhe gegeben, damit die „BOUNDS“ definiert werden, aber wir haben nicht den Ursprung angegeben, sodass der „FRAME“ nicht definiert ist. Autolayout kann nicht die X-Position unserer gelben Ansicht bestimmen

Fehlende Einschränkungen: Benötigen Sie Einschränkungen für: Y-Position: - Wie oben erläutert, haben wir der Ansicht eine Breite und eine Höhe gegeben, so dass die „BOUNDS“ definiert sind, der Ursprung jedoch nicht angegeben wurde, sodass der „FRAME“ nicht definiert ist. Autolayout kann nicht bestimmen, was die Y-Position unserer gelben Ansicht sein wird. Um dieses Problem zu lösen, müssen Sie Autolayout etwas geben, um X und Y zu resolieren. Da wir keine Frames setzen können, werden wir dies automatisch tun. Fügen Sie die folgenden Einschränkungen hinzu Bild unten werde ich es später erklären

Was wir getan haben, ist, dass wir ein "Vertikales Zentrum" und ein "Horizontales Zentrum" hinzugefügt haben. Diese Einschränkung sagt dem Autolayout, dass sich unsere gelbe Ansicht immer in der Mitte befindet. Horizontal ist also X in bestimmtem Gleichem mit vertikaler Beschränkung und Y wird bestimmt Möglicherweise muss der Rahmen angepasst werden).

Schritt 3: Inzwischen ist unsere gelbe Basisansicht fertig. Wir fügen das Präfixbild als Unteransicht unserer gelben Ansicht mit den folgenden Einschränkungen hinzu. Sie können ein beliebiges Bild Ihrer Wahl auswählen.

Da wir ein festes Maß für unser Präfixbild haben, haben wir eine feste Breite für diese Bildansicht. Fügen Sie die Einschränkungen hinzu und fahren Sie mit dem nächsten Schritt fort.

Schritt 4: Fügen Sie ein UILabel als Untersicht unserer gelben Ansicht hinzu und fügen Sie die folgenden Einschränkungen hinzu

Wie Sie sehen, habe ich unserem UILabel nur relative Beschränkungen auferlegt. Seine 8 Punkte aus dem Präfix image und 0,0,0 oben und unten aus der gelben Ansicht. Da die Breite dynamisch sein soll, geben wir keine Breiten- oder Höhenbeschränkungen an .

F: Warum bekommen wir jetzt keine Fehler, wir haben keine Breite und Höhe angegeben? Antwort: - Fehler oder Warnungen werden nur dann angezeigt, wenn das automatische Layout keine Elemente auflösen kann, die erforderlich sind, um eine Ansicht auf dem Bildschirm darzustellen. Die Breite oder der Ursprung der Komponente ist jedoch. Da unser Etikett relativ zu dem gelben Bild und dem Präfixbild und deren Rahmen ist ist klar definiert, dass autolayout den Rahmen unseres Labels berechnen kann.

Schritt 5: Wenn wir uns erinnern, werden wir feststellen, dass wir eine feste Ansicht für die gelbe Ansicht gegeben haben, aber wir möchten, dass sie abhängig vom Text unseres Etiketts dynamisch ist. So ändern wir unsere Breitenbeschränkung der gelben Ansicht. Breite der gelben Ansicht ist notwendig, um Mehrdeutigkeiten aufzulösen, wir möchten jedoch, dass sie zur Laufzeit basierend auf dem Inhalt von UILabel außer Kraft gesetzt werden. Wir wählen also unsere gelbe Ansicht aus, gehen zum Größeninspektor und reduzieren die Priorität der Breitenbeschränkung auf 1, so dass sie übersteuert wird. Folgen Sie der Abbildung unten.

Schritt 6: Wir möchten, dass UILabel nach Text expandiert und unsere gelbe Ansicht erweitert wird. Daher haben wir die Priorität der gelben Ansichtsbreite reduziert. Jetzt werden wir die Priorität der Textkomprimierungsbeständigkeit unseres UILabels erhöhen. Wir möchten, dass unsere Ansicht darunter fällt Nun, wir werden die Priorität der Inhaltsanpassung von UILabel erhöhen. Folgen Sie dem Bild unten

Wie Sie sehen, haben wir die Priorität der Inhalte auf 500 und die Priorität der Komprimierungsresistenz auf 751 erhöht. Damit wird die Priorität der Breitenbeschränkung mit 1 Priorität überwunden.

Jetzt erstellen und ausführen, werden Sie Folgendes sehen.

Wie man mit Auto Layout animiert

Ohne Auto-Layout wird die Animation im Laufe der Zeit geändert. Bei automatischem Layout bestimmen die Einschränkungen den Ansichtsrahmen. Daher müssen Sie die Einschränkungen stattdessen animieren. Diese Umkehrung macht es schwieriger, Animationen zu visualisieren.

Hier sind die Möglichkeiten, mit Auto-Layout zu animieren:

1. Ändern Sie die Konstante der Einschränkung nach der Erstellung mithilfe von periodischen Aufrufen ( CADisplayLink , dispatch_source_t , dispatch_after , NSTimer ). Rufen layoutIfNeeded dann layoutIfNeeded auf, um die Einschränkung zu aktualisieren. Beispiel:

Ziel c:

self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
    [self.view layoutIfNeeded];
}];

Schnell:

self.someConstraint.constant = 10.0
UIView.animate(withDuration: 0.25, animations: self.view.layoutIfNeeded)

2. Ändern Sie die Einschränkungen und rufen Sie [view layoutIfNeeded] in einem Animationsblock auf. Dies interpoliert zwischen den beiden Positionen und ignoriert Einschränkungen während der Animation.

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}]

3. Ändern Sie die Priorität der Einschränkungen . Dies ist weniger CPU-intensiv als das Hinzufügen und Entfernen von Einschränkungen.

4. Entfernen Sie alle Einschränkungen, und verwenden Sie Masken zum automatischen Ändern . Für später muss view.translatesAutoresizingMaskIntoConstraints = YES .

5. Verwenden Sie Einschränkungen, die die beabsichtigte Animation nicht beeinträchtigen .

6. Verwenden Sie eine Containeransicht . Positionieren Sie den Überblick mit Einschränkungen. Fügen Sie dann eine Unteransicht mit Einschränkungen hinzu, die der Animation nicht widersprechen, z. B. ein Zentrum relativ zum Superview. Dies entlädt einen Teil der Einschränkungen in das Superview, sodass die Animation in der Unteransicht nicht bekämpft wird.

7. Animieren Sie stattdessen Ansichten . Layer-Transformationen lösen das automatische Layout nicht aus.

CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];

8. Überschreiben Sie layoutSubviews . Rufen Sie [super layoutSubviews] und [super layoutSubviews] die Einschränkungen an.

9. Ändern Sie den Frame in viewDidLayoutSubviews . Das automatische Layout wird in layoutSubviews viewDidLayoutSubviews . Ändern Sie es in viewDidLayoutSubviews .

10. Deaktivieren Sie das automatische Layout und setzen Sie die Ansichten manuell. Sie können dies tun, indem Sie layoutSubviews / layout überschreiben, ohne die Implementierung der layoutSubviews aufzurufen.

Schneller Tipp: Wenn das übergeordnete layoutIfNeeded() der animierten Ansicht nicht interpoliert wird ( layoutIfNeeded() die Animation springt vom Anfangs- in den layoutIfNeeded() ), rufen Sie layoutIfNeeded() in der tiefsten Ansicht des übergeordneten layoutIfNeeded() der animierten Ansicht (mit anderen Worten) auf , das ist von der Animation nicht betroffen). Ich weiß nicht genau, warum das funktioniert.

Lösen Sie den UILabel-Prioritätskonflikt

Problem : Wenn Sie viele Beschriftungen in einer Ansicht verwenden, wird möglicherweise eine Warnung angezeigt :

Wie können wir diese Warnung beheben?

Lösung : Wir berechnen und setzen die Prioritäten in Reihenfolge. Die Prioritäten müssen sich von den Etiketten unterscheiden. Dies bedeutet, dass das, was wichtig ist, eine höhere Priorität erhält. In meinem Fall stelle ich beispielsweise die vertikalen Prioritäten für meine Etiketten so ein:

Ich habe die höchste Priorität für das 1. Label und die niedrigste für das 4. Label festgelegt.

In einem ViewController glaube ich, dass Sie die Auswirkungen dieser Prioritäten nur schwer erkennen können. Mit UITableViewCell + schätzen Sie die Zellenhöhe jedoch sehr deutlich.

Ich hoffe das hilft.

UILabel & Parentview-Größe Gemäß Text in UILabel

Schritt für Schritt Anleitung :-

Schritt 1: - Setzen Sie die Einschränkung auf UIView

1. Führend 2) oben. 3) Nachlaufen. (Von der Hauptansicht)

Schritt 2: - Setzen Sie die Einschränkung auf Label 1

1. Leading 2) Top 3) Trailing (Aus dem Superview)

Schritt 3: - Setzen Sie die Einschränkung auf Label 2

1. Leading 2) Top 3) Trailing (Aus dem Überblick)

Schritt 4: - Am schwierigsten geben Sie UILabel von UIView einen Boden.

Schritt 5: - (Optional) Legen Sie die Einschränkung auf UIButton fest

1. Führen 2) Unten 3) Nachlaufen 4) Feste Höhe (Von der Hauptansicht)

Ausgabe :-

Hinweis: - Stellen Sie sicher, dass Sie in der Eigenschaft Label die Anzahl der Zeilen = 0 festgelegt haben.

Ich hoffe, diese Informationen reichen aus, um die Autoresize-UIView nach der Höhe von UILabel und die Autoresize-UILabel nach Text zu verstehen.

Visual Format Language Basics: Einschränkungen im Code!

HVFL ist eine Sprache, mit der Benutzeroberflächenelemente auf einfache und schnelle Weise eingeschränkt werden können. Im Allgemeinen hat VFL gegenüber der traditionellen Benutzeroberflächenanpassung im Interface Builder einen Vorteil, da es deutlich lesbarer, zugänglicher und kompakter ist.

Hier ist ein Beispiel für VFL, bei dem drei UIViews von links nach rechts eingeschränkt sind, um superView.width mit aGradeView zu aGradeView

"H:|[bgView][aGradeView(40)][bGradeView(40)]|"

Es gibt zwei Achsen, auf die wir UI-Objekte einschränken können, horizontal und vertikal.

Jede Zeile von VFL beginnt immer mit H: oder V: Wenn keine vorhanden ist, ist die Standardoption H:

Weiter geht's, wir haben eine Pipeline. | Dieses Symbol oder die Pfeife bezieht sich auf den Überblick. Wenn Sie sich den Ausschnitt des VFL-Codes oben genauer ansehen, werden Sie zwei dieser Pipelines bemerken.

Dies bedeutet die zwei horizontalen Enden des Superview, die äußeren und äußeren Grenzen.

Als nächstes sehen Sie einige eckige Klammern, innerhalb der ersten eckigen Klammern haben wir bgView . Wenn wir eckige Klammern haben, bezieht sich dies auf ein UI-Element. Nun fragen Sie sich vielleicht, wie wir eine Verbindung zwischen dem Namen und dem eigentlichen UI-Element herstellen, einem Auslass vielleicht?

Ich werde das am Ende des Beitrags behandeln.

Wenn Sie sich das zweite Paar eckiger Klammern [aGradeView(50)] , werden auch einige Klammern darin eingeschlossen. Wenn dies vorhanden ist, wird die Breite / Höhe in Abhängigkeit von den Achsen definiert, in diesem Fall 50 Pixel in der Breite.

Die ersten eckigen Klammern [bgView] hatten keine explizit definierte Breite, was bedeutet, dass sie sich so weit wie möglich erstrecken wird.

Okay, das wars für die Grundlagen, mehr zu den fortgeschrittenen Sachen in einem anderen Beispiel.

zum Beispiel:

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // horizontal
    NSArray *blueH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueH];

    // vertical
    NSArray *blueVandRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueVandRedV];

    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redW];

Gemischte Verwendung des automatischen Layouts mit nicht automatischem Layout

In einigen UIKit möchten Sie möglicherweise einige zusätzliche Aktionen für automatische Layout- Berechnungen ausführen, die von UIKit selbst ausgeführt werden.

Beispiel: Wenn Sie über eine UIView , die über einen maskLayer , müssen Sie möglicherweise den maskLayer aktualisieren, sobald Auto Layout den frame UIView ändert

// CustomView.m
- (void)layoutSubviews {
    [super layoutSubviews];
    // now you can assume Auto Layout did its job
    // you can use view's frame in your calculations
    CALayer maskLayer = self.maskLayer;
    maskLayer.bounds = self.bounds;
    ...
}

oder wenn Sie zusätzliche Aktionen für das automatische Layout in ViewController

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // now you can assume all your subviews are positioned/resized correctly
    self.customView.frame = self.containerView.frame;
}

Proportionales Layout

Einschränkung erstellt als

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0)

oder aus mathematischer Sicht:

view.attribute * multiplier + constant          (1)

Sie können den Multiplikator verwenden, um ein proportionales Layout für verschiedene Größenfaktoren zu erstellen.

Beispiel:

Die Türkisansicht (V1) ist ein Quadrat mit einer Breite, die der Breite des Verhältnisses im Verhältnis 1: 1,1 entspricht

Gary Square (V2) ist eine Unteransicht von V1. Unterer Raum wird durch Konstante = 60, Nachlauf durch Multiplikator = 1,125 und Konstante = 0 festgelegt

Hinterer Raum proportional gesetzt, unterer Raum als Konstante.

Hinweis: Wenn view.attribute gleich 0 ist (z. B. führendes Leerzeichen), ist die Einschränkungsformel (1) gleich 0. Sie müssen das zweite Element der Einschränkung ändern oder die Einschränkung relativ zum Rand festlegen, um.attribute! 0

NSLayoutConstraint: Contraints im Code!

Wenn wir an einem Framework arbeiten und die Einschränkungen nicht zu komplex sind, sollten Sie Interface Builder oder NSLayoutConstraint lieber im Code verwenden, um es klein genug zu machen, anstatt Masonry oder SnapKit zu importieren.

zum Beispiel:

• Ziel c

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // 3.1 blueView
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    [self.view addConstraint:blueLeft];

    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
    [self.view addConstraint:blueTop];

    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:blueRight];

    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:50];
    [self.view addConstraint:blueHeight];

    // 3.2 redView
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
    [self.view addConstraint:redTop];

    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:redRight];

    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    [self.view addConstraint:redHeight];

    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redWidth];