1. UIColor
的体系结构介绍
#
UIColor
是 UIKit (适用于 iOS 和 iPadOS)的颜色表示类,用于定义和管理颜色。它是 UIKit 的核心组成部分之一,你可以使用它来设置任何 UI 组件的颜色(比如背景颜色、文本颜色等)。UIColor
提供了多种定义颜色的方式,包括固定颜色、动态颜色(深浅模式适配)、系统颜色、以及自定义颜色。
1.1 UIColor
的常见定义方式
#
在实际开发中,UIColor
提供了几种常见的颜色定义方式:
1. 固定颜色 #
使用系统提供的静态颜色:
let redColor = UIColor.red // 系统内置的红色
let blueColor = UIColor.blue // 蓝色
2. 自定义颜色 #
可以通过 RGBA 方式自定义颜色:
let customColor = UIColor(red: 0.5, green: 0.7, blue: 0.9, alpha: 1.0)
- 参数含义:
red
、green
、blue
:取值范围为 0.0 ~ 1.0。alpha
:用于设置透明度,取值范围为 0.0(完全透明)到 1.0(完全不透明)。
3. Hex 定义颜色 #
通过扩展来支持使用十六进制定义颜色(便于和设计稿配合):
extension UIColor {
convenience init(hex: String) {
var hex = hex.trimmingCharacters(in: .whitespacesAndNewlines)
hex = hex.hasPrefix("#") ? String(hex.dropFirst()) : hex
var rgb: UInt64 = 0
Scanner(string: hex).scanHexInt64(&rgb)
self.init(
red: CGFloat((rgb >> 16) & 0xFF) / 255.0,
green: CGFloat((rgb >> 8) & 0xFF) / 255.0,
blue: CGFloat(rgb & 0xFF) / 255.0,
alpha: 1.0
)
}
}
let hexColor = UIColor(hex: "#FF5733") // 自定义十六进制颜色
4. 动态颜色 (深浅模式适配) #
支持在 浅色模式 和 深色模式 下动态响应用户设置。
let dynamicColor = UIColor { traitCollection in
return traitCollection.userInterfaceStyle == .dark ? UIColor.white : UIColor.black
}
5. 系统颜色 #
使用系统提供的 Adaptive Colors(自适应颜色),如 UIColor.systemBackground
适配用户界面风格。
let systemColor = UIColor.systemBackground
1.2 UIColor
的特性
#
- 内置静态颜色
- 系统预定义了一些常用颜色,如
UIColor.red
、UIColor.black
等。
- 动态颜色
UIColor
支持动态颜色,适配深色模式和浅色模式。例如,UIColor.systemBackground
会根据用户的设置为白色或黑色。
- 支持各种颜色格式
- 能使用 RGB、HSB(Hue Saturation Brightness,色相饱和度和亮度)、十六进制或现有的命名颜色。
- 可与其他组件集成
UIColor
被广泛使用在 UIKit 组件(UIView
、UILabel
等), 也可以与CGColor
结合,用于 Core Graphics 绘图。
2. systemBackground
是什么颜色?
#
UIColor.systemBackground
是 适配浅色模式和深色模式的背景颜色,根据用户界面的风格动态变化。
定义: #
它是 UIKit 提供的一个 动态颜色 (Dynamic Color),在浅色模式下显示为 白色,在深色模式下显示为 黑色。
系统背景颜色默认规则: #
浅色模式(Light Mode):
UIColor.systemBackground = UIColor.white
(白色背景)
深色模式(Dark Mode):
UIColor.systemBackground = UIColor.black
(黑色背景)
这种颜色主要用于界面主体的背景色,可以确保应用在各种显示设置下具有良好的可读性和一致的用户体验。
使用案例: #
view.backgroundColor = UIColor.systemBackground
2.1 动态颜色的工作原理 #
动态颜色会根据当前设备的 用户界面风格(UITraitCollection
) 动态调整颜色值。当用户切换浅色模式和深色模式时,动态颜色会自动适配。
示例:检查当前模式对应的颜色 #
if UITraitCollection.current.userInterfaceStyle == .dark {
print("Dark mode - UIColor.systemBackground is black")
} else {
print("Light mode - UIColor.systemBackground is white")
}
动态效果演示 #
let dynamicTextColor = UIColor { traitCollection in
return traitCollection.userInterfaceStyle == .dark ? UIColor.white : UIColor.black
}
// 设置 UILabel 的文字颜色,可动态更新
label.textColor = dynamicTextColor
动态颜色的作用与用途 #
- 当用户启用 动态切换(Dynamic Mode) 时,App 使用统一的系统颜色可以确保:
- 颜色在浅/深模式之间一致适配。
- 增强视觉对比度,提高可读性。
- 保证 Accessibility(辅助功能)兼容性,系统动态颜色已经过优化。
2.2 与其他动态颜色的区别 #
.systemBackground
是众多动态颜色之一,Swift 提供了更多动态颜色,供你在不同场景下进行选择:
动态颜色 | 浅色模式(Light Mode) | 深色模式(Dark Mode) | 用途 |
---|---|---|---|
.systemBackground | 白色 | 黑色 | 用于主要背景色。 |
.secondarySystemBackground | 浅灰色 | 深灰色 | 用于次要背景,比如卡片或层叠的 UI 背景。 |
.tertiarySystemBackground | 更浅的灰色 | 更深的灰色 | UI 中的最次级背景,如嵌套组件背景。 |
.label | 黑色 | 白色 | 文字的主要颜色。 |
.secondaryLabel | 深灰 | 浅灰 | 次级文字。 |
.tertiaryLabel | 更浅灰 | 更深灰 | 占位文本或提示类的文字。 |
.systemGroupedBackground | 浅灰色 | 深灰色 | 使用在分组 TABLE 或集合背景(列表背景)。 |
.separator | 浅黑线条 | 深灰线条 | 视图之间的分割线颜色。 |
3. 实际应用场景 #
3.1 系统背景自适应 #
当 App 要求在「深色模式 / 浅色模式」无缝切换时,可以直接使用动态颜色如 systemBackground
进行适配。
view.backgroundColor = UIColor.systemBackground
3.2 设置 Label 的颜色 #
可以为 UILabel
动态设置颜色,让它在用户切换模式时自动调整显示。
label.textColor = UIColor.label // 主文字
3.3 配合 Core Graphics 使用 #
如果你使用颜色进行自定义绘图,可以从 UIColor
转换到 CGColor
:
let fillColor = UIColor.systemBackground.cgColor
context.setFillColor(fillColor)
4. 动态颜色的重要性 #
适配深/浅色模式:
- 动态颜色允许 App 在不同的 UI 风格下保持良好显示效果,避免硬编码颜色带来的适配问题。
可读性提升:
- 系统颜色和动态颜色为不同的内容设计了合理的对比度,能确保良好的视觉体验。
自动变化:
- 当用户设置深色模式时,系统会自动动态调整颜色,不额外增加开发者负担。
保持一致性:
- UIKit 提供的系统颜色是和系统风格一致的,使用它可以让 App 界面更匹配平台设计规范(Human Interface Guidelines)。
总结 #
UIColor
是什么?UIColor
是 UIKit 提供的一个强大颜色管理类,支持多种颜色定义方式(固定颜色、自定义颜色、动态颜色等),功能范围涵盖 App 色彩的所有核心场景。UIColor.systemBackground
是什么?- 它是一种动态背景颜色:在浅色模式下为白色,在深色模式下为黑色。
- 常用于整个界面的主要背景。
什么时候用?
- 当需要适配深/浅色模式时,使用
UIColor.systemBackground
可以确保背景颜色自动调整。 - 如果背景颜色不需动态变化,直接使用固定颜色即可(如
UIColor.white
)。
- 当需要适配深/浅色模式时,使用