appearance #
UITabBar.appearance()
是 UIKit 中用于自定义整个应用 UITabBar
外观的全局入口点。通过 appearance()
,你可以为所有的 UITabBar
设置全局样式,包括背景颜色、图标颜色、文字颜色、透明度等。此外,UITabBarAppearance
类自 iOS 13 引入,为更加细粒度的 UITabBar
外观控制提供支持,比如选中状态的分离设置。
以下将从 UITabBar.appearance()
的 作用范围、主要属性、分类和示例 等方面系统介绍。
1. 什么是 UITabBar.appearance()
?
#
作用范围:
appearance()
是 UIKit 提供的一个类型方法,用于修改视图类型(如UITabBar
的视觉风格),全局生效。这意味着当你通过UITabBar.appearance()
修改任何属性时,整个应用中用于管理UITabBar
的TabView
或UITabBarController
都会反映出这些更改,从而达到统一的样式。通常定制内容:
- 背景样式:背景颜色、透明度、模糊效果等。
- 字体样式:选中和未选中文字的大小、颜色。
- 图标样式:选中和未选中图标颜色及大小。
- 系统分割线和阴影:分割线、顶部阴影配置。
- 选中效果:比如高亮的底部圆点样式。
2. UITabBar.appearance()
与 UITabBarAppearance
配合使用
#
从 iOS 13 开始,Apple 推荐使用 UITabBarAppearance
来处理样式配置。其设计允许你为 UITabBar
提供更多的细粒度控制,包括以下部分:
- standardAppearance:常规状态的外观。
- scrollEdgeAppearance:与内容滚动相关的外观。
- compactAppearance(仅 iPad):紧凑样式的外观。
因此,使用 UITabBar.appearance()
通常需要结合 UITabBarAppearance
,以实现对视觉的全面自定义。
UITabBarAppearance 属性说明 #
UITabBarAppearance
的主要属性分为以下几类:
属性分类 | 子属性 | 功能说明 |
---|---|---|
Background | backgroundColor 、backgroundEffect 、shadowColor | 定义背景颜色、模糊效果、阴影颜色。例如设置一个固定的背景色或半透明效果。 |
Divider | shadowImage 和 backgroundImage | 自定义分割线样式(如隐藏分割线或设置图片作为底部分隔线)。 |
Item Styles | stackedLayoutAppearance 、inlineLayoutAppearance 、compactInlineLayoutAppearance | 定义不同布局模式(叠放模式/嵌套模式/紧凑内联模式)下图标和文字的颜色、字体风格。具体包括未选中样式(normal )和选中样式(selected )。 |
Highlight & Tint | iconColor 、titleTextAttributes | 设置图标颜色及文字样式,如指定字体颜色和大小,选中时的高亮颜色控制等 |
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 | 设置图标的颜色(未选中和选中颜色可通过 normal 和 selected 来区分设置)。 | appearance.stackedLayoutAppearance.normal.iconColor = UIColor.gray |
imageInsets | 设置图标的内边距。 | UITabBarItem.appearance().imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -5, right: 0) |
3.4 分割线和阴影 #
属性 | 功能描述 | 示例代码 |
---|---|---|
standardAppearance | 配置默认状态下的 UITabBarAppearance | UITabBar.appearance().standardAppearance = appearance |
scrollEdgeAppearance | 配置与内容滚动边缘相关时的 UITabBarAppearance 。 | UITabBar.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 调整全局外观。 |
修改文字颜色和字体属性 | titleTextAttributes 或 selectedItemTintColor 和 unselectedItemTintColor ,通过 NSAttributedString.Key 自定义文字样式。 |
修改图标颜色和大小 | iconColor 配合 UITabBarAppearance ,必要时调整 imageInsets 改变图标间距。 |
隐藏分割线或阴影 | 通过 .shadowImage = UIImage() 和 .shadowColor = nil 隐藏顶部分割线和阴影。 |
高度自定义或完全自定义 TabBar | 必须使用 UIKit 的自定义 UITabBarController ,并手动调整 frame 。 |
通过以上方式,UITabBar.appearance()
和 UITabBarAppearance
能够实现对 TabBar
的全自定义,满足绝大多数外观需求。