Ich bin Kyoya, Praktikantin bei einer selbst entwickelten Venture-Firma. Da ich diesmal in der Praxis AutoLayout im Code festgelegt habe, werde ich es ausgeben.
Jeder, der CSS berührt hat, wird es wissen, aber ich denke, es ist in Ordnung, wenn Sie es als iPhone-Version von Responsive Design betrachten. Es gibt heute mehr als 15 Arten von iPhones auf dem Markt, und die Anzahl der Bildschirme nimmt entsprechend zu. Wenn Sie also nicht auf das reaktionsschnelle Design achten, funktioniert das iphone11, aber das iphone8 bricht das Design! Es könnte so sein ... Daher ist AutoLayout eine Technologie für responsives Design.
AutoLayout kann sowohl mit IB (Interface Builder Storyboard) als auch mit Code zusammengestellt werden und hat Vor- und Nachteile. Mit IB können Layouts auch für Anfänger intuitiv und visuell erstellt werden, und Code hat den Vorteil, dass er bei der Entwicklung mit mehreren Personen einfach zu überprüfen ist. Dieses Mal werde ich AutopLayout im Code erklären.
Dieser XX-Anker wird häufig beim Erstellen von Layouts mit Code verwendet. Anker wird im Japanischen oft als "Schiffsanker" übersetzt. Ikari wird verwendet, um das Schiff zu reparieren. Es ist also in Ordnung, wenn Sie es als etwas betrachten, das das Layout (die Eigenschaft) repariert. Verwenden Sie es wie folgt.
testButton.topAnchor.constraint(equalTo:view.bottomAnchor)
(Einschränkung ~ wird später erklärt.) Ich möchte, dass Sie hier verstehen, dass die Oberseite des TestButton an der Unterseite der Ansicht befestigt ist. Mit anderen Worten, die Oberseite (oben) von testButton ist fest (Anker) ... oben + Anker = topAnchor !!! Es gibt auch leftAnchor, rightAnchor, bottomAnchor, heightAnchor, widthAnchor und so weiter. Für links, rechts, unten wird die Position von oben, unten, links und rechts wie bei topAnchor festgelegt. Beachten Sie jedoch, dass Höhe und Breite Einschränkungen in Bezug auf Höhe und Breite unterliegen.
Ich werde die Einschränkung erklären, die ich später erklären werde. Einschränkung bedeutet auf Japanisch festgelegt. Mit anderen Worten bedeutet es, den Anker einzuschränken. Es gibt verschiedene Arten von Einschränkungen, z. B. die Einschränkung (equalTo: NSLayoutAnchor), die angibt, wo sie angehängt werden soll, die Einschränkung (equalTo: NSLayoutAnchor, die Konstante: Int), die angibt, wo und wie viel getrennt werden soll, und die Konstante (GreaterThanOrEqualTo), die angibt, wo und wie viel getrennt werden soll. : NSLayoutAnchor) usw., aber Sie sollten sich daran erinnern, was Sie gerade gesagt haben. Kehren wir zum obigen Beispiel zurück
tesuButton.topAnchor.constraint(equalTo:view.bottomAnchor)
Dies bedeutet, dass Sie topAnchor an den bottomAnchor der Ansicht anhängen sollten. Ich habe es auch so ausgedrückt
testButton.topAnchor.constraint(equalTo:view.bottomAnchor,constant:0)
Dies bedeutet, dass sich der obere Anker in einem Abstand von 0 Pixel vom unteren Anker der Ansicht befinden sollte. Wenn Sie beispielsweise die Schaltfläche und die Schaltflächenbreite auf 20 Pixel einstellen möchten, können Sie wie folgt schreiben.
let button1 = UIButton()
let button2 = UIButton()
button1.rightAnchor.constraint(equalTo: button2.leftAnchor, constant: 20)
//Das Folgende ist auch in Ordnung.
// button2.leftAnchor.constraint(equalTo: button1.rightAnchor, constant: 20)
Wenn sich Taste 1 links und Taste 2 rechts befindet, sollte die Position auf der rechten Seite von Taste 1 um 20 Pixel von der Position auf der linken Seite von Taste 2 getrennt sein.
Bitte beachten Sie, dass sich die Argumentnamen geringfügig von HeightAnchor.constraint (sameToConstant :) unterscheiden, um diese Einschränkungen festzulegen.
Wie oben erwähnt, kann Anchor.constarint als Einschränkung verwendet werden. Dieser Code informiert das Programm jedoch nur über Einschränkungen und spiegelt diese nicht in der Ansicht wider. Sie müssen die von Ihnen geschriebenen Einschränkungen aktivieren.
let constraints = [
button1.rightAnchor.constraint(equalTo: button2.leftAnchor, constant: 20),
button1.topAnchor.constraint(equalTo: testLabel.bottomAnchor, constant: 30),
]
NSLayoutConstraint.activate(constarints)
Durch Übergeben eines Arrays mit Einschränkungen auf diese Weise als Argument können die Einschränkungen in der Ansicht wiedergegeben werden. Dieser Vorgang sollte in viewDidLoad durchgeführt werden.
Vergessen Sie nicht, diese Eigenschaft festzulegen, bevor Sie AutoLayout verarbeiten
let object = Object("Etwas, das Sie einschränken möchten")
object.translatesAutoresizingMaskIntoConstraints = false
Diese Eigenschaft mit dem Namen translatesAutoresizingMaskIntoConstraints wird für jede Ansicht bereitgestellt. Mit diesem Wert wird jedoch festgelegt, ob der vor dem automatischen Layout verwendete automatische Größenlayoutmechanismus in das automatische Layout konvertiert werden soll. Da der Anfangswert true ist, entspricht das Layout möglicherweise nicht den Erwartungen, es sei denn, Sie setzen es manuell auf false.
○○ Anker hat eine Einschränkung und Sie können verstehen, wie es ist, aber es gibt einen kleinen Widerstand, wenn Sie es selbst verwenden. (Obwohl die Analogie in der Programmierung sicherlich leicht zu verstehen ist, ist es besser, sie technisch zu verstehen, wenn man sie verwendet), daher werde ich ein wenig technisch sprechen. Das von Apple bereitgestellte UIKit-Framework (eine Sammlung von Schaltflächen, Ansichten usw.) verfügt grundsätzlich über Eigenschaften der NSLayoutAnchor-Klasse. Und die NSLayoutAnchor-Klasse hat eine Methode namens constarint (gleich ~~). Wenn Sie also XX Anchor deklarieren, können Sie die Constraint-Methode verwenden. Wenn Sie dies verstehen, können Sie es sicher verwenden, wenn Sie es in Zukunft verwenden, also als Referenz
Das ist alles für diesen Artikel. Ich möchte auch über Auto Layout mit IB und Layout Timing posten. Vielen Dank.