如何设置约束关系来查看，而不是以编程方式设置子视图？

Question

我试图以编程方式设置几个视图。在我的主视图中，我添加了两个子视图，一个锚定到顶部，一个锚定到底部：

//Button View
        view.addSubview(buttonsLabel)
        buttonsLabel.translatesAutoresizingMaskIntoConstraints = false

        buttonsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        buttonsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        buttonsLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true

        buttonsLabel.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5, constant: -20).isActive = true


//Calculator View
        calcLabel.layer.cornerRadius = 25
        view.addSubview(calcLabel)

        calcLabel.translatesAutoresizingMaskIntoConstraints = false

        calcLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        calcLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        calcLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 40).isActive = true
        //calcLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true

        calcLabel.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5, constant: -40).isActive = true

这样可以正常工作，两个视图都是帧高的50％（减去常数），并且两者都显示（一个在顶部，一个在底部）。但是当我尝试添加第三个视图（其中75％的帧高度，并且应该放置在另外两个视图的顶部）时，布局被破坏并且所有内容几乎都移动到框架之外。

我试图再次将第三个视图锚定到底部：

    thirdView.layer.cornerRadius = 25
    view.addSubview(thirdView)

    thirdView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    thirdView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    thirdView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    thirdView.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.75).isActive = true

这就是一切应该是这样的（离开两个视图，右边第三个视图在顶部：

我是否正确地执行锚点和约束（或者是更好的方式）以及如何为第三个视图添加约束，以便它是帧高度的75％并且放置在图像中的所有内容之上。

Answer 1

你的代码看起来不错，问题就是在哪里，检查调试器中的视图层次结构以查看哪些约束失败，也许你忘了translatesAutoresizingMaskIntoConstraints作为beyowulf评论。你应该使用常量，这使代码更易于维护。

这是我的实施：

import UIKit

class ViewController: UIViewController {


    //MARK: - SubViews
    let topHalfView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.gray
        return view
    }()

    let bottomHalfView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.gray
        return view
    }()

    let threeQuarterView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.black
        return view
    }()




    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        //add, layout subviews with 9+ constraints
        setupViews()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    func setupViews() {
        self.view.addSubview(topHalfView)
        self.view.addSubview(bottomHalfView)
        self.view.addSubview(threeQuarterView)

        let guide = self.view.safeAreaLayoutGuide
        let spacing:CGFloat = 12
        let viewHeight = self.view.frame.height - spacing


        topHalfView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        topHalfView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: spacing).isActive = true
        topHalfView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -spacing).isActive = true
        topHalfView.heightAnchor.constraint(equalToConstant: viewHeight * 0.5).isActive = true

        bottomHalfView.topAnchor.constraint(equalTo: topHalfView.bottomAnchor, constant: spacing).isActive = true
        bottomHalfView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: spacing).isActive = true
        bottomHalfView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -spacing).isActive = true
        bottomHalfView.heightAnchor.constraint(equalToConstant: viewHeight * 0.5).isActive = true

        threeQuarterView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
        threeQuarterView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: spacing).isActive = true
        threeQuarterView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -spacing).isActive = true
        threeQuarterView.heightAnchor.constraint(equalToConstant: self.view.frame.height * 0.75).isActive = true
    }

}

视图层次结构：