Swift Storyboard -使图标和多行文字水平居中

基础概念

Swift Storyboard 是苹果公司提供的一种可视化界面设计工具，用于 iOS、macOS、watchOS 和 tvOS 应用的界面布局。通过 Storyboard，开发者可以拖放 UI 控件到画布上，并通过 Auto Layout 和 Size Classes 来管理控件的布局。

类型

Single View Application：单视图应用，只有一个主视图。
Tabbed Application：标签页应用，多个视图通过标签页切换。
Navigation-Based Application：导航应用，通过导航控制器管理多个视图。

应用场景

iOS 应用的界面布局。
macOS、watchOS 和 tvOS 应用的界面设计。

问题：使图标和多行文字水平居中

原因

在 Storyboard 中，图标和多行文字水平居中通常需要使用 Auto Layout 来实现。

解决方法

添加图标和文字控件：
- 将图标（UIImageView）和文字（UILabel）拖放到 ViewController 的视图中。

设置 Auto Layout：
- 选择图标，点击右下角的约束按钮（Add Constraints），设置以下约束：
  - Leading 和 Trailing 约束到父视图的 Leading 和 Trailing。
  - Top 约束到父视图的 Top。
- 选择文字控件，设置以下约束：
  - Leading 和 Trailing 约束到父视图的 Leading 和 Trailing。
  - Top 约束到图标的 Bottom。
  - 设置文字控件的 numberOfLines 属性为 0，以支持多行显示。
调整约束优先级（可选）：
- 如果需要文字在图标下方居中，可以调整文字控件的 Vertical Content Hugging Priority 和 Vertical Content Compression Resistance Priority。

示例代码

虽然 Storyboard 是可视化的，但也可以通过代码来设置约束：

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let iconImageView = UIImageView(image: UIImage(named: "icon"))
        iconImageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(iconImageView)
        
        let textLabel = UILabel()
        textLabel.text = "This is a multi-line text label."
        textLabel.numberOfLines = 0
        textLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textLabel)
        
        NSLayoutConstraint.activate([
            iconImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            iconImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -50),
            
            textLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            textLabel.topAnchor.constraint(equalTo: iconImageView.bottomAnchor, constant: 20),
            textLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}