5.2_封装子视图的添加与布局

在 UIKit 中，封装子视图的添加与布局是创建可重用和易于维护的自定义视图的关键步骤。通过精心组织子视图的添加和布局，你可以确保你的自定义视图在各种屏幕尺寸和方向上都能正确显示。让我们一起深入探讨如何有效地完成这项任务！🚀

添加子视图

首先，你需要将子视图添加到你的自定义 UIView 中。这通常在 init(frame:) 或 init(coder:) 方法中完成。确保在添加子视图之前，你已经创建了它们。

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

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

private func setupViews() {
    // 创建子视图
    let label = UILabel()
    let button = UIButton()

    // 添加子视图
    addSubview(label)
    addSubview(button)

    // 其他设置...
}

记住，setupViews() 方法是一个很好的地方来集中所有视图的创建和添加逻辑。这使得代码更易于阅读和维护。

使用 Auto Layout 进行布局

Auto Layout 是 iOS 中进行动态布局的首选方法。它允许你定义视图之间的约束，而不是硬编码的坐标和尺寸。

1. 禁用 translatesAutoresizingMaskIntoConstraints: 在添加约束之前，将每个子视图的 translatesAutoresizingMaskIntoConstraints 属性设置为 false。

   label.translatesAutoresizingMaskIntoConstraints = false
   button.translatesAutoresizingMaskIntoConstraints = false

2. 添加约束: 使用 NSLayoutConstraint 类来定义视图之间的关系。

   NSLayoutConstraint.activate([
       label.topAnchor.constraint(equalTo: topAnchor, constant: 10),
       label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
       button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 10),
       button.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10)
   ])

通过 Auto Layout，你可以创建适应不同屏幕尺寸和方向的灵活布局。

使用 Stack View 简化布局

UIStackView 是一个强大的工具，可以简化子视图的布局。它可以自动管理子视图的位置和大小，并根据需要进行调整。

1. 创建 Stack View: 创建一个 UIStackView 实例。

   let stackView = UIStackView()
   stackView.axis = .vertical // 或者 .horizontal
   stackView.distribution = .fillEqually
   stackView.alignment = .fill
   stackView.spacing = 10
   stackView.translatesAutoresizingMaskIntoConstraints = false

2. 添加子视图到 Stack View: 将子视图添加到 UIStackView 中。

   stackView.addArrangedSubview(label)
   stackView.addArrangedSubview(button)

3. 添加 Stack View 到父视图: 将 UIStackView 添加到你的自定义视图中，并设置约束。

   addSubview(stackView)
   NSLayoutConstraint.activate([
       stackView.topAnchor.constraint(equalTo: topAnchor, constant: 10),
       stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
       stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10),
       stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10)
   ])

UIStackView 可以显著减少你需要编写的约束数量，并使布局代码更易于理解。

示例：创建一个简单的登录界面

让我们创建一个简单的登录界面，其中包含一个标签、一个文本框和一个按钮。

class LoginView: UIView {

    let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "欢迎登录"
        label.font = UIFont.boldSystemFont(ofSize: 20)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    let usernameTextField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "用户名"
        textField.borderStyle = .roundedRect
        textField.translatesAutoresizingMaskIntoConstraints = false
        return textField
    }()

    let passwordTextField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "密码"
        textField.borderStyle = .roundedRect
        textField.isSecureTextEntry = true
        textField.translatesAutoresizingMaskIntoConstraints = false
        return textField
    }()

    let loginButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("登录", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()

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

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

    private func setupViews() {
        addSubview(titleLabel)
        addSubview(usernameTextField)
        addSubview(passwordTextField)
        addSubview(loginButton)

        NSLayoutConstraint.activate([
            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 20),
            titleLabel.centerXAnchor.constraint(equalTo: centerXAnchor),

            usernameTextField.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20),
            usernameTextField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            usernameTextField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),

            passwordTextField.topAnchor.constraint(equalTo: usernameTextField.bottomAnchor, constant: 10),
            passwordTextField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            passwordTextField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),

            loginButton.topAnchor.constraint(equalTo: passwordTextField.bottomAnchor, constant: 20),
            loginButton.centerXAnchor.constraint(equalTo: centerXAnchor)
        ])
    }
}

这个例子展示了如何使用 Auto Layout 将多个子视图添加到自定义视图中，并定义它们之间的关系。通过这种方式，你可以创建适应不同屏幕尺寸的灵活界面。🎉