如何用编程方式创建这个带有约束条件的视图？

Question

我觉得这是很简单就能完成的，但我似乎想不通。我是一个相当新的不使用storyboard的人，并试图学习如何为我的视图设置我的约束条件的程序化。我在storyboard中很容易地创建了我想要的视图，但似乎无法以程序化的方式获得它。

我的视图控制器有我的父视图，然后我调用一个容器视图。我想在容器视图中设置我的约束条件，但我不能让我的视图的高度在每次更换不同的设备时都保持不变。

class ViewController: UIViewController {
override func viewDidLoad() {
    super.viewDidLoad()
    var clariView = ClariContainerView()
    view.addSubview(clariView)
}

}

这是我的视图控制器，然后我的ClariContainerView看起来像这样。

class ClariContainerView: UIView {

lazy var clariQuestionView: UIView = {
    let containerView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 0))
    containerView.backgroundColor = .blue
    containerView.translatesAutoresizingMaskIntoConstraints = false
    return containerView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    setupView()
}


required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupView()
}

public func setupView() {
    addSubview(clariQuestionView)
    setupLayout()
}

public func setupLayout() {
    NSLayoutConstraint.activate([
        clariQuestionView.heightAnchor.constraint(equalToConstant: 169)
    ])
}

}

我想重新创建的是这样的。

我需要蓝色视图的高度永远是169.

Answer 1

下面是你如何做到这一点。

• 首先，你不需要为你的容器视图定义一个框架，因为... translatesAutoresizingMaskIntoConstraints = false语句是指定你将使用自动布局，因此框架将被忽略。

    lazy var clariQuestionView: UIView = {
        let containerView = UIView()
        containerView.backgroundColor = .blue
        containerView.translatesAutoresizingMaskIntoConstraints = false
        return containerView
    }()

• 下面是你如何定义你的约束条件。你需要设置高度，还需要将视图固定在self.view的底部、前缘和后缘。

    public func setupLayout() {
        NSLayoutConstraint.activate([
            clariQuestionView.heightAnchor.constraint(equalToConstant: 169),
            clariQuestionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            clariQuestionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            clariQuestionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
        ])
    }

Answer 2

对于这样一个基本的布局，你其实不需要在其中添加 heightAnchor. 这里有一个简单的方法来实现所需的行为+奖励--根据设备的高度调整代码片段。safeAreaInsets.

class ClariContainerView: UIView {
    lazy var clariQuestionView: UIView = {
        let desiredContainerHeigh = 169
        // If you want, you can use commented code to adjust height according to the device's safe area.
        // This might be needed if you want to keep the same height over safe area on all devices.
        // let safeAreaAdjustment = UIApplication.shared.keyWindow?.rootViewController?.view.safeAreaInsets.bottom ?? 0
        let containerView = UIView(frame: CGRect(x: 0, y: UIScreen.main.bounds.height - 169, width: UIScreen.main.bounds.width, height: 169))
        containerView.backgroundColor = .blue
        containerView.translatesAutoresizingMaskIntoConstraints = true
        return containerView
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    public func setupView() {
        addSubview(clariQuestionView)
    }
}