How to write the manual AutoLayout constraint? - autolayout

Question

I'm a novice iOS developer and I want to learn how to write the manual AutoLayout constraint. As I had found the link which visually allow how AutoLayout works. Please refer the below link for more information.
URL : https://autolayoutconstraints.com/
But it does not allow how it works when other component over there and their relation accordingly.
Thank you for such a prompt response, I wish I could be clearer on my issue.

Answer 1

I suppose by manual you mean apply constraints via Code.
Autolayout has been constantly evolving ever since it come to existence.
To apply constrains via code, you can use any of these three techniques. (Easiest and the newest technique at bottom)
Old verbose constraining using method, (constraintWithItem)
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c
Visual Format Language
(https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage.html)
Layout Anchors (https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/uid/TP40010853-CH16-SW5)
You can google the bold's to know more.
But these is nothing better than https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1
This document has examples that apply constraint, with other component (view) and their relations.

Answer 2

are you asking how to set up your constraint programatically? If yes do you plan on using the story board at all or implementing everything programatically?
if you want to do it all programatically it would look something like:
class someViewController: UIViewController{
let myLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Hello"
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubView(myLabel)
myLabel.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
myLabel.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
myLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
myLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
}
}
This would create a label in your ViewController and pin it to the left right and bottom with a set height of 50 pixels. You can find any one of your constraints for the item by looking for it's anchor and setting it to the desired value. Make sure to set translatesAutoresizingMaskIntoConstraints to false otherwise your constraints won't be followed.

Answer 3

You can use a 3rd party library like Snapkit or SwiftyLayout.