实现一个支持Auto Layout且内容自适应的自定义标签视图

题目

实现一个支持Auto Layout且内容自适应的自定义标签视图

信息

• 类型：问答
• 难度：⭐⭐

考点

Auto Layout, 自定义UIView, 固有内容尺寸, 布局约束, 内容自适应

快速回答

要实现支持Auto Layout且内容自适应的自定义UIView，需要：

• 重写intrinsicContentSize属性返回视图的固有内容尺寸
• 在内容变化时调用invalidateIntrinsicContentSize()更新布局
• 正确设置子视图的约束，避免使用固定尺寸约束
• 处理contentHuggingPriority和contentCompressionResistancePriority优先级

在iOS开发中，创建支持Auto Layout且内容自适应的自定义视图是常见需求。以下以自定义标签视图（TagView）为例说明实现要点：

核心原理

Auto Layout依赖固有内容尺寸（Intrinsic Content Size）实现内容自适应。系统组件如UILabel、UIButton默认支持此特性。自定义视图需：

• 重写intrinsicContentSize计算内容实际尺寸
• 内容变化时调用invalidateIntrinsicContentSize()触发布局更新

代码实现示例

class TagView: UIView {
    private let label = UILabel()

    var text: String? {
        didSet {
            label.text = text
            invalidateIntrinsicContentSize()  // 内容变化时通知系统
        }
    }

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

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

    private func setup() {
        addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false

        // 设置内部约束
        NSLayoutConstraint.activate([
            label.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
        ])

        backgroundColor = .systemBlue
        layer.cornerRadius = 8
    }

    // 关键：返回内容固有尺寸
    override var intrinsicContentSize: CGSize {
        let labelSize = label.intrinsicContentSize
        return CGSize(
            width: labelSize.width + 24,  // 左右padding总和
            height: labelSize.height + 16  // 上下padding总和
        )
    }
}

最佳实践

• 约束设置：子视图使用相对约束（如edge anchors），避免固定宽高
• 优先级管理：
  • 设置setContentHuggingPriority(.required, for: .horizontal)防止过度拉伸
  • 设置setContentCompressionResistancePriority(.required, for: .vertical)防止内容截断
• 性能优化：复杂视图在layoutSubviews()中计算尺寸，避免频繁调用invalidateIntrinsicContentSize

常见错误

• 错误1：未调用invalidateIntrinsicContentSize()导致布局不更新
• 错误2：在intrinsicContentSize中使用frame（应使用intrinsicContentSize或自动布局API）
• 错误3：未正确处理优先级导致布局冲突（控制台出现Unable to simultaneously satisfy constraints）

扩展知识

• Size Classes：通过traitCollectionDidChange适配不同屏幕尺寸
• 性能监测：使用Debug View Hierarchy检查约束冲突
• 动态文本：响应UIContentSizeCategoryDidChange通知支持字体缩放
• SwiftUI集成：通过UIViewRepresentable封装自定义视图供SwiftUI使用