Использование Auto Layout для программного выравнивания пользовательского UIView с представлением

Question

Я пытаюсь выровнять пользовательский UIView по центру вида, используя автоматическую компоновку, но у меня пустой экран.

Может кто-нибудь посоветует, где мой код неверен?

---

Код моего контроллера:

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


    }

}

---

Код моего пользовательского просмотра:

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

После некоторых небольших дополнений:

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")
    }

}

Затем в функции viewDidLoad:

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.
}

Я взял на себя свободу устанавливать высоту, равную ширине, какВы создаете квадрат, но не уверены, что хотите этого.Надеюсь, это поможет!

Answer 2

попробуйте

class Square: UIView {


     func setColor(colour: UIColor){
        self.backgroundColor = colour
    }

}

вызовите эту функцию в 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)

}

результат

Answer 3

Вам нужно ограничение по высоте, также не смешивайте макет кадра с автоматическим макетом, вы должны использовать любой из них

sq1.heightAnchor.constraint(equalToConstant:200).isActive = true

Также, если вы установите ведущий и трейлинг

sq1.leadingAnchor.constraint(greaterThanOrEqualTo: margin.leadingAnchor, constant: 20).isActive = true
sq1.trailingAnchor.constraint(greaterThanOrEqualTo: margin.trailingAnchor, constant: 20).isActive = true

тогда нет необходимости в центреX

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) 
])