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

Posted 2023-03-15

【中文标题】基于子视图的 UIStackView 容器视图高度

【英文标题】：UIStackView container view height based on subviews

【发布时间】：2019-01-28 23:19:14

【问题描述】：

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

【参考方案1】：

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

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

如果您发现标签的高度似乎没有环绕（无论是在情节提要还是模拟器上），则将标签的垂直内容拥抱优先级更改为 750。

【参考方案2】：

试试这个代码：

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

这个设置可以很容易地转换成故事板。