如何以编程方式创建带有约束的视图

Question

我觉得这很容易完成，但我似乎无法弄明白。我对不使用情节提要并尝试学习如何以编程方式为我的观点设置约束还很陌生。我在情节提要中轻松创建了我想要的视图，但似乎无法以编程方式获取它。

我让我的视图控制器有我的父视图，然后我调用容器视图。我想象在容器视图中我设置了我的约束，但我无法让我的视图高度保持不变，每次我改变到不同的设备

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

以下是您的操作方式：

首先，您不需要为 containerView 定义框架，因为 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)
    }
}

如何以编程方式创建带有约束的视图

How to create this view with constraints programtically

xcode

constraints

view

uiview

swift