UIKit — UITabBar

appearance #

UITabBar.appearance() 是 UIKit 中用于自定义整个应用 UITabBar 外观的全局入口点。通过 appearance(),你可以为所有的 UITabBar 设置全局样式,包括背景颜色、图标颜色、文字颜色、透明度等。此外,UITabBarAppearance 类自 iOS 13 引入,为更加细粒度的 UITabBar 外观控制提供支持,比如选中状态的分离设置。

以下将从 UITabBar.appearance()作用范围、主要属性、分类和示例 等方面系统介绍。


1. 什么是 UITabBar.appearance() #

  • 作用范围
    appearance() 是 UIKit 提供的一个类型方法,用于修改视图类型(如 UITabBar 的视觉风格),全局生效。这意味着当你通过 UITabBar.appearance() 修改任何属性时,整个应用中用于管理 UITabBarTabViewUITabBarController 都会反映出这些更改,从而达到统一的样式。

  • 通常定制内容

    • 背景样式:背景颜色、透明度、模糊效果等。
    • 字体样式:选中和未选中文字的大小、颜色。
    • 图标样式:选中和未选中图标颜色及大小。
    • 系统分割线和阴影:分割线、顶部阴影配置。
    • 选中效果:比如高亮的底部圆点样式。

2. UITabBar.appearance()UITabBarAppearance 配合使用 #

iOS 13 开始,Apple 推荐使用 UITabBarAppearance 来处理样式配置。其设计允许你为 UITabBar 提供更多的细粒度控制,包括以下部分:

  • standardAppearance:常规状态的外观。
  • scrollEdgeAppearance:与内容滚动相关的外观。
  • compactAppearance(仅 iPad):紧凑样式的外观。

因此,使用 UITabBar.appearance() 通常需要结合 UITabBarAppearance,以实现对视觉的全面自定义。


UITabBarAppearance 属性说明 #

UITabBarAppearance 的主要属性分为以下几类:

属性分类子属性功能说明
BackgroundbackgroundColorbackgroundEffectshadowColor定义背景颜色、模糊效果、阴影颜色。例如设置一个固定的背景色或半透明效果。
DividershadowImagebackgroundImage自定义分割线样式(如隐藏分割线或设置图片作为底部分隔线)。
Item StylesstackedLayoutAppearanceinlineLayoutAppearancecompactInlineLayoutAppearance定义不同布局模式(叠放模式/嵌套模式/紧凑内联模式)下图标和文字的颜色、字体风格。具体包括未选中样式(normal)和选中样式(selected)。
Highlight & TinticonColortitleTextAttributes设置图标颜色及文字样式,如指定字体颜色和大小,选中时的高亮颜色控制等

3. UITabBar.appearance() 主要属性分类 #

以下是完整的 UITabBar.appearance() 样式和属性,按功能分类说明:


3.1 背景样式 #

属性功能描述示例代码
backgroundColor设置底部 TabBar 背景颜色。UITabBar.appearance().backgroundColor = .blue
backgroundEffect配置背景模糊效果,常用值 .systemUltraThinMaterial.systemChromeMaterial 等。UITabBar.appearance().backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
shadowImage自定义或隐藏 TabBar 的顶部分割线(阴影图像)。不需要分割线可以设置为 UIImage()UITabBar.appearance().shadowImage = UIImage()
shadowColor设置底部导航栏的阴影颜色,设置为 nil 可以禁用阴影。UITabBar.appearance().shadowColor = nil
isTranslucent是否启用半透明样式。默认为 true 半透明状态,使用 false 时会固定颜色显示。UITabBar.appearance().isTranslucent = false

3.2 文本样式 #

属性功能描述示例代码
titleTextAttributes控制未选中状态下 TabItem 的文字大小、字体和颜色。设置为 selected 控制选中文字样式。UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont.systemFont(ofSize: 18, weight: .bold)], for: .selected)
selectedItemTintColor自定义选中时文字的颜色。UITabBar.appearance().tintColor = UIColor.red
unselectedItemTintColor自定义未选中文字的颜色。UITabBar.appearance().unselectedItemTintColor = .gray

3.3 图标样式 #

属性功能描述示例代码
iconColor设置图标的颜色(未选中和选中颜色可通过 normalselected 来区分设置)。appearance.stackedLayoutAppearance.normal.iconColor = UIColor.gray
imageInsets设置图标的内边距。UITabBarItem.appearance().imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -5, right: 0)

3.4 分割线和阴影 #

属性功能描述示例代码
standardAppearance配置默认状态下的 UITabBarAppearanceUITabBar.appearance().standardAppearance = appearance
scrollEdgeAppearance配置与内容滚动边缘相关时的 UITabBarAppearanceUITabBar.appearance().scrollEdgeAppearance = appearance

4. 示例代码 #

以下是一个全面的示例,展示了如何用 UITabBar.appearance()UITabBarAppearance 来自定义 Tab Bar 的背景颜色、图标颜色、文字样式和选中效果:

完整示例:自定义 TabBar 外观 #

import SwiftUI

struct CustomTabView: View {
    init() {
        // 配置 UITabBarAppearance
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground() // 使用不透明背景
        
        // 背景颜色和阴影
        appearance.backgroundColor = UIColor.systemBlue // 背景颜色
        appearance.shadowColor = UIColor.gray // 阴影颜色
        
        // 配置未选中和选中样式
        let normalAttributes: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 14, weight: .regular),
            .foregroundColor: UIColor.lightGray
        ]
        let selectedAttributes: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 16, weight: .bold),
            .foregroundColor: UIColor.white
        ]
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = normalAttributes // 未选中文字样式
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = selectedAttributes // 选中文字样式
        appearance.stackedLayoutAppearance.normal.iconColor = UIColor.lightGray // 未选中图标颜色
        appearance.stackedLayoutAppearance.selected.iconColor = UIColor.white // 选中图标颜色
        
        // 应用于所有 TabBar
        UITabBar.appearance().standardAppearance = appearance
        if #available(iOS 15.0, *) {
            UITabBar.appearance().scrollEdgeAppearance = appearance
        }
        UITabBar.appearance().isTranslucent = false // 禁用透明效果
    }
    
    var body: some View {
        TabView {
            Text("Home Screen")
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            
            Text("Profile Screen")
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profile")
                }
        }
    }
}
  • 效果:
    • 背景颜色为蓝色,不透明。
    • 未选中文字为灰色,选中文字为白色且加粗。
    • 图标颜色在选中和未选中时分别为白色和浅灰色。
    • 阴影颜色为灰色。

5. 总结:如何选择属性 #

性质推荐用属性
修改背景颜色.backgroundColor 结合 UITabBarAppearance 调整全局外观。
修改文字颜色和字体属性titleTextAttributesselectedItemTintColorunselectedItemTintColor,通过 NSAttributedString.Key 自定义文字样式。
修改图标颜色和大小iconColor 配合 UITabBarAppearance,必要时调整 imageInsets 改变图标间距。
隐藏分割线或阴影通过 .shadowImage = UIImage().shadowColor = nil 隐藏顶部分割线和阴影。
高度自定义或完全自定义 TabBar必须使用 UIKit 的自定义 UITabBarController,并手动调整 frame

通过以上方式,UITabBar.appearance()UITabBarAppearance 能够实现对 TabBar 的全自定义,满足绝大多数外观需求。

本文共 1979 字,上次修改于 Jan 12, 2025