Using Auto Layout to align a custom UIView to the view programatically - swift

Question

I am trying to align a custom UIView to the center of view using auto layout but I am getting a blank screen.
Please can someone advise on where my code is incorrect?
My Controller's code:
import UIKit
class TestViewController: UIViewController{
var margin: UILayoutGuide!
override func viewDidLoad() {
super.viewDidLoad()
margin = self.view.layoutMarginsGuide
let size = CGRect.init(x: 0, y: 0, width: 200, height: 100)
let sq1 = Square.init(frame: size, color: UIColor.blue)
view.addSubview(sq1)
sq1.translatesAutoresizingMaskIntoConstraints = false
sq1.centerXAnchor.constraint(equalTo: margin.centerXAnchor).isActive = true
sq1.topAnchor.constraint(greaterThanOrEqualTo: margin.topAnchor, constant: 20).isActive = true
sq1.leadingAnchor.constraint(greaterThanOrEqualTo: margin.leadingAnchor, constant: 20).isActive = true
sq1.trailingAnchor.constraint(greaterThanOrEqualTo: margin.trailingAnchor, constant: 20).isActive = true
}
}
My Custom View's code:
class Square: UIView{
init(frame: CGRect, color: UIColor) {
super.init(frame: frame)
makeSquare(frame: frame, colour: color)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func makeSquare(frame: CGRect, colour: UIColor){
self.layer.frame = self.bounds
self.layer.backgroundColor = colour.cgColor
}
}

Answer 1

You need a height constraint , also don't mix frame layout with auto layout you should use either of them
sq1.heightAnchor.constraint(equalToConstant:200).isActive = true
Also if you set leading and trailing
sq1.leadingAnchor.constraint(greaterThanOrEqualTo: margin.leadingAnchor, constant: 20).isActive = true
sq1.trailingAnchor.constraint(greaterThanOrEqualTo: margin.trailingAnchor, constant: 20).isActive = true
then no need for a centerX
sq1.centerXAnchor.constraint(equalTo: margin.centerXAnchor).isActive = true
NSLayoutConstraint.activate([
sq1.topAnchor.constraint(equalTo: margin.topAnchor, constant: 20),
sq1.leadingAnchor.constraint(equalTo: margin.leadingAnchor, constant: 20),
sq1.trailingAnchor.constraint(equalTo: margin.trailingAnchor, constant: -20),
sq1.heightAnchor.constraint(equalToConstant: 200)
])

Answer 2

After some small additions:
class Square: UIView {
init(color: UIColor) {
// The view is ignored with auto layout.
super.init(frame: .zero)
backgroundColor = color
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Then in the viewDidLoad function:
override func viewDidLoad() {
super.viewDidLoad()
let sq = Square(color: .orange)
sq.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(sq)
sq.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
sq.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
// -40 to compensate for the leading and trailing.
sq.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1, constant: -40).isActive = true
sq.heightAnchor.constraint(equalTo: sq.widthAnchor).isActive = true
// Do any additional setup after loading the view.
}
I've taken the freedom to set the height equal to the width, as you create a square, but not sure if you want that. Hope this helps!

Answer 3

try it
class Square: UIView {
func setColor(colour: UIColor){
self.backgroundColor = colour
}
}
call this func in ViewDidLoad
func initView() {
self.view.backgroundColor = .red
margin = self.view.layoutMarginsGuide
let sq1 = Square()
view.addSubview(sq1)
sq1.translatesAutoresizingMaskIntoConstraints = false
sq1.centerXAnchor.constraint(equalTo: margin.centerXAnchor).isActive = true
sq1.topAnchor.constraint(greaterThanOrEqualTo: margin.topAnchor, constant: 20).isActive = true
sq1.widthAnchor.constraint(equalToConstant: 200).isActive = true
sq1.heightAnchor.constraint(equalToConstant: 200).isActive = true
sq1.setColor( colour: UIColor.blue)
}
result