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

时间:2019-01-28 23:19:15

标签: ios swift autolayout uilabel uistackview

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

enter image description here

2 个答案:

答案 0 :(得分: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
        }
    }
}

这里的重要部分是stackviewlabel的初始化以及在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

此设置可以轻松转换为情节提要。

答案 1 :(得分:1)

我认为您做对了。但这是关键:

  1. 不为stackView设置高度。
  2. 设置标签的顶部,底部,左侧,尾部约束以进行查看。
  3. 运行。在模拟器上应该没问题。

如果发现标签的高度似乎没有变化(在情节提要或模拟器上都没有),则将标签的“垂直内容拥抱优先级”更改为750。

enter image description here