iOS弹框揭秘：子视图如何动态驾驭父视图高度

前端

2023-09-12 23:10:48

使用 Auto Layout 构建高度可变的 iOS 弹框

在 iOS 开发中，弹框是常见的元素，用于向用户显示信息、收集输入或提供附加功能。但是，当弹框中包含的文本长度不定时，事情就会变得棘手，因为弹框的高度需要相应调整。

理解 Auto Layout

Auto Layout 是 iOS 中用于定义界面元素布局的强大系统。它允许开发者声明性地指定元素之间的约束，例如大小、位置和间距。Auto Layout 引擎会根据这些约束自动调整元素的布局。

约束子视图和父视图

要实现可变高度弹框，我们需要在子视图（包含文本）和父视图（弹框）之间建立约束：

垂直空间约束： 子视图顶部与父视图顶部之间的垂直间距
垂直间距约束： 子视图底部与父视图底部之间的垂直间距
水平间距约束： 子视图两侧与父视图两侧之间的水平间距

这些约束确保子视图垂直居中于父视图，并保持适当的边距。

设置 intrinsicContentSize

intrinsicContentSize 属性定义了子视图在没有外部约束时的理想大小。对于包含文本的子视图，intrinsicContentSize 将基于文本内容和字体大小进行计算。

我们可以覆盖 intrinsicContentSize 属性，以指定子视图的最小和最大大小。这确保了子视图不会因内容太少而过小，也不会因内容太多而过大。

代码示例

class CustomAlertView: UIView {

    private let titleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.font = UIFont.boldSystemFont(ofSize: 16)
        label.textAlignment = .center
        return label
    }()

    override var intrinsicContentSize: CGSize {
        let width = UIScreen.main.bounds.width * 0.8
        let height = titleLabel.intrinsicContentSize.height + 40
        return CGSize(width: width, height: height)
    }

    init(title: String) {
        super.init(frame: .zero)
        setupView()
        titleLabel.text = title
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupView() {
        addSubview(titleLabel)
        titleLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 20),
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
            titleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20)
        ])
    }
}