基于子视图的 UIStackView 容器视图高度

Question

这是我的简单示例。我有 1 个垂直堆栈视图和 1 个子视图。我希望子视图的高度基于其中标签的固有高度，这样我就可以为整个堆栈视图保持动态高度。如何才能做到这一点？谢谢

Answer 1

试试这个代码：

class DyanmicTextLabelViewController: UIViewController {

    private var didAddConstraint = false

    private let label: UILabel = {
        let view = UILabel()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.setContentHuggingPriority(.required, for: .vertical)
        view.setContentCompressionResistancePriority(.required, for: .vertical)
        view.text = "Layout anchors let you create constraints in an easy-to-read, compact format. They expose a number of methods for creating different types of constraints, as shown in Listing 13-1."
        view.numberOfLines = 0
        return view
    }()
    private lazy var container: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)
        view.backgroundColor = .red
        return view
    }()
    private lazy var stackview : UIStackView = {
        let view = UIStackView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.axis = .horizontal
        view.distribution = .fill
        view.addArrangedSubview(container)
        return view
    }()

    override func loadView() {
        super.loadView()

        view.addSubview(stackview)
        view.setNeedsUpdateConstraints()

        view.backgroundColor = .white
    }


    override func updateViewConstraints() {
        super.updateViewConstraints()

        if didAddConstraint == false {
            didAddConstraint = true

            // stackview constraints
            stackview.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true

            let topAnchor = stackview.topAnchor.constraint(equalTo: view.topAnchor)
            topAnchor.constant = 20
            topAnchor.isActive = true

            stackview.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true

            // label constraint
            // example for giving label a left padding
            let labelLeft = label.leftAnchor.constraint(equalTo: container.leftAnchor)
            labelLeft.constant = 16.0
            labelLeft.isActive = true

            label.topAnchor.constraint(equalTo: container.topAnchor).isActive = true
            label.rightAnchor.constraint(equalTo: container.rightAnchor).isActive = true
            label.bottomAnchor.constraint(equalTo: container.bottomAnchor).isActive = true
        }
    }
}

这里的重要部分是 stackview、label 的初始化和 label

上的约束设置

label初始化

private let label: UILabel = {
    let view = UILabel()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.setContentHuggingPriority(.required, for: .vertical)
    view.setContentCompressionResistancePriority(.required, for: .vertical)
    view.text = "Layout anchors let you create constraints in an easy-to-read, compact format. They expose a number of methods for creating different types of constraints, as shown in Listing 13-1."
    view.numberOfLines = 0
    return view
}()

stackview初始化

private lazy var stackview : UIStackView = {
    let view = UIStackView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.axis = .horizontal
    view.distribution = .fill
    view.addArrangedSubview(container)
    return view
}()

label约束

// label constraint
// example for giving label a left padding
let labelLeft = label.leftAnchor.constraint(equalTo: container.leftAnchor)
labelLeft.constant = 16.0
labelLeft.isActive = true

label.topAnchor.constraint(equalTo: container.topAnchor).isActive = true
label.rightAnchor.constraint(equalTo: container.rightAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: container.bottomAnchor).isActive = true

此设置可以很容易地转换为故事板。

Answer 2

我认为你做对了。但这是关键：

不要为 stackView 设置高度。
设置标签顶部、底部、左侧、尾随约束以查看。
运行。在模拟器上应该没问题。

如果您发现标签的高度似乎没有环绕（无论是在故事板还是模拟器上），请将标签的 Vertical Content Hugging Priority 更改为 750。

基于子视图的 UIStackView 容器视图高度

UIStackView container view height based on subviews

uilabel

ios

autolayout

swift

uistackview