I'm kyoya, an intern at a self-developed venture company. Since I set AutoLayout in the code this time in practice, I will output it.
Anyone who has touched CSS will know, but I think it's okay if you think of it as an iphone version of responsive design. There are more than 15 types of iphones on the market today, and the number of screens is increasing accordingly. So if you don't pay attention to the responsive design, the design will collapse on the iphone8 even though it works on the iphone11! It could be like that ... Therefore, AutoLayout is a technology used for responsive design.
AutoLayout can be assembled with both IB (Interface Builder storyboard) and code, and both have advantages and disadvantages. With IB, you can intuitively and visually compose a layout that even beginners can easily understand, and with code, there are advantages such as easy review when developing with multiple people. This time I'll explain AutopLayout in code.
This XX Anchor is often used when creating layouts with code. Anchor is often translated in Japanese as "ship anchor". Ikari is used to fix the ship, so it's okay if you think of it as something that fixes the layout (property). Use it as follows.
testButton.topAnchor.constraint(equalTo:view.bottomAnchor)
(constraint ~ will be explained later.) What I want you to understand here is that the top side of the testButton is fixed (attached) to the bottom side of the view. In other words, the upper side (top) of testButton is fixed (anchor) ... top + anchor = topAnchor !!! There are also leftAnchor, rightAnchor, bottomAnchor, heightAnchor, widthAnchor and so on. For left, right, bottom, the position is determined vertically and horizontally like topAnchor, but please note that height and width are restrictions on height and width.
I will explain the constraint that I will explain later. constraint means fixed in Japanese. In other words, it means to constrain Anchor. There are different types of constraints: constraint (equalTo: NSLayoutAnchor) that indicates where to attach, constraint (equalTo: NSLayoutAnchor, constant: Int) that indicates where and how much to separate, and constartint (greaterThanOrEqualTo) that indicates where and how much to separate : NSLayoutAnchor) etc., but you should remember what you just said. Let's go back to the above example
tesuButton.topAnchor.constraint(equalTo:view.bottomAnchor)
This means that you should attach topAnchor to view's bottomAnchor. I also put it like this
testButton.topAnchor.constraint(equalTo:view.bottomAnchor,constant:0)
This means that topAnchor should be at a distance of 0px from bottomAnchor in view. For example, if you want to make the button and button width 20px, you can write as follows.
let button1 = UIButton()
let button2 = UIButton()
button1.rightAnchor.constraint(equalTo: button2.leftAnchor, constant: 20)
//The following is also okay.
// button2.leftAnchor.constraint(equalTo: button1.rightAnchor, constant: 20)
If Button 1 is on the left and Button 2 is on the right, the position on the right side of Button 1 should be separated from the position on the left side of Button 2 by 20px.
Please note that the argument names are slightly different from HeightAnchor.constraint (equalToConstant :) for how to set these constraints.
As mentioned above, Anchor.constarint can be used as a constraint. However, this code only informs the program that there are restrictions and does not reflect it in the view. You need to activate the constraints you wrote.
let constraints = [
button1.rightAnchor.constraint(equalTo: button2.leftAnchor, constant: 20),
button1.topAnchor.constraint(equalTo: testLabel.bottomAnchor, constant: 30),
]
NSLayoutConstraint.activate(constarints)
By passing an array with constraints in this way as an argument, the constraints can be reflected in the view. This process should be done in viewDidLoad.
Don't forget to set this property before processing AutoLayout
let object = Object("Something you want to constrain")
object.translatesAutoresizingMaskIntoConstraints = false
This property called translatesAutoresizingMaskIntoConstraints is provided for each view, but it is a value that sets whether to convert the Autosizing layout mechanism used before Auto Layout to Auto Layout. Since the initial value is true, the layout may not be as expected unless you manually set it to false.
○○ Anchor has a constraint and you can understand how it is, but there is a little resistance when you use it yourself. (Although the parable is certainly easy to understand in programming, it is better to understand it technically when using it), so I will talk a little technically. The UIKit framework provided by Apple (a collection of buttons, views, etc.) basically has properties of the NSLayoutAnchor class. And the NSLayoutAnchor class has a method called constarint (equal ~~). So if you declare XX Anchor, you can use the constraint method. If you understand this, you can use it with confidence when you use it in the future, so for your reference
That's all for this article. I would also like to post about Auto Layout using IB and layout timing. Thank you very much.