Swift中如何为Tab Bar的SF Symbols图标添加下方名称

核心实现思路 #

将SF Symbols图标和对应的名称文本，放入垂直方向的布局容器中，让两者自动上下排列。

SwiftUI 代码示例 #

// 单个带名称的图标组件
VStack(spacing: 6) {
    Image(systemName: "house")
        .font(.title)
        .foregroundColor(.blue)
    Text("home")
        .font(.caption)
}

// 多个图标横向排列的场景
HStack(spacing: 24) {
    VStack(spacing: 6) {
        Image(systemName: "house")
            .font(.title)
        Text("home")
            .font(.caption)
    }
    VStack(spacing: 6) {
        Image(systemName: "line.3.horizontal")
            .font(.title)
        Text("menu")
            .font(.caption)
    }
    VStack(spacing: 6) {
        Image(systemName: "plus")
            .font(.title)
        Text("add new")
            .font(.caption)
    }
}

UIKit 代码示例 #

// 封装单个带名称的图标方法
func createNamedSymbolView(systemName: String, title: String) -> UIStackView {
    // 创建图标视图
    let iconView = UIImageView(image: UIImage(systemName: systemName))
    iconView.contentMode = .scaleAspectFit
    iconView.tintColor = .systemBlue
    
    // 创建名称标签
    let titleLabel = UILabel()
    titleLabel.text = title
    titleLabel.font = UIFont.systemFont(ofSize: 12)
    titleLabel.textAlignment = .center
    
    // 垂直布局容器
    let stackView = UIStackView(arrangedSubviews: [iconView, titleLabel])
    stackView.axis = .vertical
    stackView.spacing = 6
    stackView.alignment = .center
    
    return stackView
}

// 使用示例
let homeView = createNamedSymbolView(systemName: "house", title: "home")
let menuView = createNamedSymbolView(systemName: "line.3.horizontal", title: "menu")
let addNewView = createNamedSymbolView(systemName: "plus", title: "add new")

// 横向排列多个图标
let horizontalStack = UIStackView(arrangedSubviews: [homeView, menuView, addNewView])
horizontalStack.axis = .horizontal
horizontalStack.spacing = 24
horizontalStack.alignment = .center
horizontalStack.translatesAutoresizingMaskIntoConstraints = false

// 添加到父视图
view.addSubview(horizontalStack)
NSLayoutConstraint.activate([
    horizontalStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    horizontalStack.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

样式调整技巧 #

• 修改spacing值可以调整图标和文字的间距
• 通过font、foregroundColor/tintColor自定义图标和文字的样式
• 若需要适配不同尺寸，可给图标添加固定大小约束

内容的提问来源于stack exchange，提问作者user14723892