情节提要中的高度约束以实现具有动态高度的自定义视图

时间:2019-07-02 13:12:15

标签: ios swift uiview

从这里开始迅速...如何为包装内容或换句话说具有动态高度的自定义视图设置约束高度?

在Android中,我们使用自动换行内容或将父级作为高度。匹配ios的等效父级将上,下,左,右约束设为0(如果我理解得很好),但是包装内容呢?

大多数情况下,自定义视图高度可以动态变化。当我从情节提要中拖出一个扩展自定义视图的视图时,我要求一个高度限制... Txs寻求帮助!

编辑:为什么有人在没有给出任何理由的情况下输入-1,这是一个愚蠢的问题吗?!

1 个答案:

答案 0 :(得分:1)

第一步是确保已正确配置自定义@IBDesignable视图。

这是一个简单的示例,其中包含一个UITextField和一个“帮助者” UILabel

文本视图设置为非滚动-允许它根据文本自动调整其自身的高度。在您键入和添加/删除文本时,它会增大/缩小。

将文本视图和标签添加到垂直UIStackView中,以使其非常非常容易布局:

@IBDesignable
class MyCustomView: UIView {

    let theTextView: UITextView = {
        let v = UITextView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.isScrollEnabled = false
        return v
    }()

    let helperLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.textAlignment = .center
        v.textColor = .white
        v.backgroundColor = .blue
        v.text = "Helper Text"
        return v
    }()

    let theStackView: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .vertical
        v.alignment = .fill
        v.distribution = .fill
        v.spacing = 8
        return v
    }()

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

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

    func commonInit() -> Void {

        // add the stack view as a subview
        addSubview(theStackView)

        // constrain the stack view top / bottom / leading / trailing
        // with 8-pts "padding" on each side
        NSLayoutConstraint.activate([

            theStackView.topAnchor.constraint(equalTo: topAnchor, constant: 8.0),
            theStackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),

            theStackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8.0),
            theStackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8.0),

            ])

        // add the text view and label to the stack view
        theStackView.addArrangedSubview(theTextView)
        theStackView.addArrangedSubview(helperLabel)

    }

}

现在,在情节提要中的新视图控制器中,添加普通的UIView并为其提供背景色(以便我们可以看到它)。添加40的前导约束和尾随约束,并添加“垂直居中”约束。它看起来应该类似于:

enter image description here

,情节提要会告诉您它需要一个约束条件:

enter image description here

在选择视图的情况下,转到Identity Inspector并将Class更改为MyCustomClass。如果您启用了“自动刷新视图”,则应更改为:

enter image description here

现在它在垂直方向上居中,并使用其自己的高度(由文本视图和标签的固有高度确定,嵌入在堆栈视图中)。不再需要 Y位置或高度的约束错误消息,而无需设置任何其他约束。

运行应用程序(并在文本视图中输入一些文本)时,您会得到以下提示:

enter image description here