代码之家 › 专栏 › 技术社区 › RjC

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

anchor constraints swift ios

RjC · 技术社区 · 7 年前

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

//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%,并像图像中一样放置在所有视图的顶部。

1 回复 | 直到 7 年前

RLoniello 7 年前

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

}

视图层次结构: