如何以编程方式将约束关系设置为视图而不是子视图?

How to set constraint relationship to view, not subviews programmatically?

我正在尝试以编程方式设置几个视图。在我的主视图上,我添加了两个子视图,一个固定在顶部,一个固定在底部:

//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% 并像图像中一样放置在所有内容之上.

您的代码看起来不错问题出在其他地方,请检查调试器中的视图层次结构以查看哪些约束失败,也许您忘记了 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
    }

}

视图层次结构: