Je suis kyoya, stagiaire dans une entreprise auto-développée. Cette fois, j'ai mis AutoLayout dans le code en pratique, donc je vais le sortir.
Quiconque a touché CSS le saura, mais je pense que ce n'est pas grave si vous le considérez comme une version iPhone de conception réactive. Il existe aujourd'hui plus de 15 types d'iphones sur le marché et le nombre d'écrans augmente en conséquence. Donc, si vous ne faites pas attention au design réactif, l'iphone11 fonctionnera, mais l'iphone8 cassera le design! Ça pourrait être comme ça ... Par conséquent, AutoLayout est une technologie utilisée pour la conception réactive.
AutoLayout peut être assemblé avec IB (Storyboard Interface Builder) et le code, et les deux présentent des avantages et des inconvénients. Avec IB, les mises en page peuvent être configurées de manière intuitive et visuelle, même pour les débutants, et le code a l'avantage d'être facile à réviser lors du développement avec plusieurs personnes. Cette fois, je vais expliquer AutopLayout dans le code.
Cette XX Anchor est souvent utilisée lors de la création de mises en page avec du code. L'ancre est souvent traduite en japonais par «l'ancre du navire». Ikari est utilisé pour réparer le vaisseau, donc ce n'est pas grave si vous le considérez comme quelque chose qui corrige la disposition (propriété). Utilisez-le comme suit.
testButton.topAnchor.constraint(equalTo:view.bottomAnchor)
(la contrainte ~ sera expliquée plus tard.) Ce que je veux que vous compreniez ici, c'est que le côté supérieur du testButton est fixé (attaché) au côté inférieur de la vue. En d'autres termes, le côté supérieur (haut) de testButton est fixe (ancre) ... top + anchor = topAnchor !!! Il y a aussi leftAnchor, rightAnchor, bottomAnchor, heightAnchor, widthAnchor et ainsi de suite. Pour gauche, droite, bas, la position du haut, du bas, de la gauche et de la droite est déterminée de la même manière que topAnchor, mais veuillez noter que la hauteur et la largeur sont des restrictions de hauteur et de largeur.
J'expliquerai la contrainte que j'expliquerai plus tard. contrainte signifie fixe en japonais. En d'autres termes, cela signifie contraindre Anchor. Il existe différents types de contraintes: contrainte (equalTo: NSLayoutAnchor) qui indique où attacher, contrainte (equalTo: NSLayoutAnchor, constant: Int) qui indique où et combien séparer, et constartint (greaterThanOrEqualTo) qui indique où et combien séparer. : NSLayoutAnchor) etc., mais vous devez vous rappeler ce que vous venez de dire. Revenons à l'exemple ci-dessus
tesuButton.topAnchor.constraint(equalTo:view.bottomAnchor)
Cela signifie que vous devez attacher topAnchor à la vue bottomAnchor. Je le mets aussi comme ça
testButton.topAnchor.constraint(equalTo:view.bottomAnchor,constant:0)
Cela signifie que l'ancre supérieure doit être à une distance de 0 px de l'ancre inférieure de la vue. Par exemple, si vous souhaitez que le bouton et le bouton aient une largeur de 20 px, vous pouvez écrire comme suit.
let button1 = UIButton()
let button2 = UIButton()
button1.rightAnchor.constraint(equalTo: button2.leftAnchor, constant: 20)
//Ce qui suit est également correct.
// button2.leftAnchor.constraint(equalTo: button1.rightAnchor, constant: 20)
Si le bouton 1 est à gauche et le bouton 2 à droite, la position sur le côté droit du bouton 1 doit être séparée de la position sur le côté gauche du bouton 2 de 20 px.
Veuillez noter que les noms d'argument sont légèrement différents de HeightAnchor.constraint (equalToConstant :) pour savoir comment définir ces contraintes.
Comme mentionné ci-dessus, Anchor.constarint peut être utilisé comme contrainte. Cependant, ce code informe uniquement le programme qu'il existe des restrictions et ne le reflète pas dans la vue. Vous devez activer les contraintes que vous avez écrites.
let constraints = [
button1.rightAnchor.constraint(equalTo: button2.leftAnchor, constant: 20),
button1.topAnchor.constraint(equalTo: testLabel.bottomAnchor, constant: 30),
]
NSLayoutConstraint.activate(constarints)
En passant un tableau avec des contraintes de cette manière comme argument, les contraintes peuvent être reflétées dans la vue. Ce processus doit être effectué dans viewDidLoad.
N'oubliez pas de définir cette propriété avant de traiter la mise en page automatique
let object = Object("Quelque chose que vous voulez contraindre")
object.translatesAutoresizingMaskIntoConstraints = false
Cette propriété appelée translatesAutoresizingMaskIntoConstraints est fournie pour chaque vue, mais c'est une valeur qui définit s'il faut convertir le mécanisme de mise en page de dimensionnement automatique utilisé avant la mise en page automatique en mise en page automatique. Étant donné que la valeur initiale est true, la disposition peut ne pas être comme prévu, sauf si vous la définissez manuellement sur false.
○○ Anchor a une contrainte et vous pouvez comprendre comment il est, mais il y a un peu de résistance lorsque vous l'utilisez vous-même. (Bien que l'analogie soit certainement facile à comprendre en programmation, il vaut mieux la comprendre techniquement lors de son utilisation), je vais donc en parler un peu techniquement. Le framework UIKit fourni par Apple (une collection de boutons, vues, etc.) a essentiellement des propriétés de la classe NSLayoutAnchor. Et la classe NSLayoutAnchor a une méthode appelée constarint (égal à ~~). Donc, si vous déclarez XX Anchor, vous pouvez utiliser la méthode de contrainte. Si vous comprenez cela, vous pouvez l'utiliser en toute confiance lorsque vous l'utiliserez à l'avenir, donc pour votre référence
C'est tout pour cet article. Je voudrais également publier un article sur la mise en page automatique utilisant IB et la synchronisation de la mise en page. Merci beaucoup.