在 UIStackView 中自动配置组件（以编程方式）

Question

你好。如您所见，组件在 UIStackView 中重叠，我正在为此苦苦挣扎。

这里有一些代码片段

class BottomSheetController: UIViewController {
    lazy var headerLabel: UILabel = {
        let label = UILabel()
        label.text = "Workout"

        return label
    }()

    lazy var header: UIView = {
        let uiView = UIView()
        return uiView
    }()

    lazy var workoutInput: UITextField = {
        let textField = UITextField()

        textField.placeholder = "Find or add option"
        textField.sizeToFit()
        textField.clipsToBounds = true
        textField.backgroundColor = UIColor(red: 65 / 255.0, green: 65 / 255.0, blue: 65 / 255.0, alpha: 0.4)
        textField.layer.cornerRadius = 5

        textField.setImage(image: UIImage(named: "search_black")!)
        textField.setClearTextButton()

        return textField
    }()

    lazy var tagsView: UIScrollView = {
       let scrollView = UIScrollView()
        scrollView.backgroundColor = .red
        return scrollView
    }()

    lazy var containerStackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [header, workoutInput, tagsView])

        stackView.clipsToBounds = true
        stackView.axis = .vertical
        stackView.backgroundColor = .systemGray2

        return stackView
    }()

// ...

 private func setConstraint() {
    header.addSubview(headerLabel)
        header.addSubview(doneButton)


     containerStackView.snp.makeConstraints { make in
            make.top.left.right.bottom.equalToSuperview().inset(20)
        }
        headerLabel.snp.makeConstraints { make in
            make.top.centerX.equalToSuperview()
        }
        doneButton.snp.makeConstraints { make in
            make.top.right.equalToSuperview()
        }
        workoutInput.snp.makeConstraints {make in
            make.height.equalTo(40)
        }
  }
}

我的问题可能是，header 视图没有恒定的高度值

但我不想将幻数设置为 header 查看。而是分配与子视图对应的值 (workoutInput)

是否有调整高度的奇特方法？
如何防止组件重叠？

Answer 1

我相信您应该能够在 viewDidLoad() 函数中执行 header.frame.size.height = [height] 并且它应该像那样改变它。

Answer 2

您需要添加足够的约束以满足自动布局要求。

A UIView 没有固有尺寸...所以您的 header 最终高度为零。

进行一些更改以控制该视图的高度：

private func setConstraint() {
    header.addSubview(headerLabel)
    header.addSubview(doneButton)
    
    containerStackView.snp.makeConstraints { make in
        // constrain to safe area, not to superView
        make.top.left.right.bottom.equalTo(view.safeAreaLayoutGuide).inset(20)
    }
    headerLabel.snp.makeConstraints { make in
        make.top.centerX.equalToSuperview()
        // constrain label bottom to superview
        make.bottom.equalToSuperview()
    }
    doneButton.snp.makeConstraints { make in
        make.top.right.equalToSuperview()
        // constrain button bottom to superview
        make.bottom.equalToSuperview()
    }
    workoutInput.snp.makeConstraints {make in
        make.height.equalTo(40)
    }
}

附带说明一下，如果您为 UI 元素提供对比背景颜色，您会发现调试布局会容易得多，例如：

    header.backgroundColor = .systemTeal
    headerLabel.backgroundColor = .yellow
    doneButton.backgroundColor = .green

经过这些更改，您应该看到以下内容：

在 UIStackView 中自动配置组件（以编程方式）

Configure automatically components in UIStackView (Programatically)

ios

swift

uistackview

snapkit