Adding full programamticly custom view to ViewController. AutoLayout problems - ios

Question

I really can't understand how to use layout when create custom view.
Main problem is in here:
rect.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.5),
rect.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1),
If I use multiplier it's work correctly. But if if I use constant:
rect.widthAnchor.constraint(equalToConstant: self.frame.width)
it's doesn't working.
How can I use any superView frame sizes for my custom view autoLayout constraint?
class MainView: UIView {
lazy var rect: UIView = {
let view = UIView()
view.backgroundColor = .green
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .red
layout()
}
func layout() {
addSubview(rect)
self.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
rect.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.5),
rect.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1),
rect.centerYAnchor.constraint(equalTo: centerYAnchor),
rect.centerXAnchor.constraint(equalTo: centerXAnchor)
])
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
class ViewController: UIViewController {
let mainView = MainView(frame: .zero)
override func loadView() {
self.view = mainView
}

Answer 1

If I use multiplier it's work correctly. But if if I use constant:
rect.widthAnchor.constraint(equalToConstant: self.frame.width)
This is bound to happen, In your viewController you instantiate your mainView as
let mainView = MainView(frame: .zero) This will trigger init of MainView with frame as zero
You call layout inside init
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .red
layout()
}
so you essentially call layout when MainView frame is Zero At this point if you set rect.widthAnchor.constraint(equalToConstant: self.frame.width) then what you are essentially saying is rect.widthAnchor.constraint(equalToConstant: 0)
hence width is set to zero
Please read the statement carefully, you are setting your rect width anchor to a constant which is 0 in this case, so even when in future stages of UI cycle your MainView gets proper width, your rect's width will always be zero because you set it to constant 0 value.
But I set mainView.frame = view.frame before self.view= mainView
Unfortunately for your rect this statement comes little late :) layout was called in init of mainView and hence rects width anchor was already set to a constant 0. Now though you update mainView.frame, your rect will never bother to update its width, why will it? It has its constraints already resolved to a constant value which is obviously '0' in this case :)
rect.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1),Why this works?
Here you say your rect's width anchor to be equal to width anchor of your MainView, you are not setting rect's width anchor to a constant rather, you are setting it to match the width anchor of MainView, so when MainView's frame finally sets to a proper value, your rect will also updates its width to match MainViews width.
Quite frankly multiplier: 1 makes no sense in this case, as you are trying to match the width of your rect to match the width of your MainView, if you want your rect's width to vary proportionally to width of MainView (like 50% of MainView width etc etc) only then multiplier makes sense
Autolayout constraints are nothing more than mathematical equations, understanding/visualising them properly is the key to get perfect UI with constraint
Hope this helps

Answer 2

How can I use any superView frame sizes for my custom view autoLayout constraint?
Simply remove multiplayer.
NSLayoutConstraint.activate([
rect.heightAnchor.constraint(equalTo: heightAnchor),
rect.widthAnchor.constraint(equalTo: widthAnchor),
rect.centerYAnchor.constraint(equalTo: centerYAnchor),
rect.centerXAnchor.constraint(equalTo: centerXAnchor)
])