UIKit — UIColor

1. UIColor 的体系结构介绍 #

UIColorUIKit (适用于 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)
  • 参数含义
    • redgreenblue:取值范围为 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 的特性 #

  1. 内置静态颜色
  • 系统预定义了一些常用颜色,如 UIColor.redUIColor.black 等。
  1. 动态颜色
  • UIColor 支持动态颜色,适配深色模式和浅色模式。例如,UIColor.systemBackground 会根据用户的设置为白色或黑色。
  1. 支持各种颜色格式
  • 能使用 RGB、HSB(Hue Saturation Brightness,色相饱和度和亮度)、十六进制或现有的命名颜色。
  1. 可与其他组件集成
  • UIColor 被广泛使用在 UIKit 组件(UIViewUILabel 等), 也可以与 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. 动态颜色的重要性 #

  1. 适配深/浅色模式:

    • 动态颜色允许 App 在不同的 UI 风格下保持良好显示效果,避免硬编码颜色带来的适配问题。
  2. 可读性提升:

    • 系统颜色和动态颜色为不同的内容设计了合理的对比度,能确保良好的视觉体验。
  3. 自动变化:

    • 当用户设置深色模式时,系统会自动动态调整颜色,不额外增加开发者负担。
  4. 保持一致性:

    • UIKit 提供的系统颜色是和系统风格一致的,使用它可以让 App 界面更匹配平台设计规范(Human Interface Guidelines)。

总结 #

  • UIColor 是什么? UIColor 是 UIKit 提供的一个强大颜色管理类,支持多种颜色定义方式(固定颜色、自定义颜色、动态颜色等),功能范围涵盖 App 色彩的所有核心场景。

  • UIColor.systemBackground 是什么?

    • 它是一种动态背景颜色:在浅色模式下为白色,在深色模式下为黑色。
    • 常用于整个界面的主要背景。
  • 什么时候用?

    • 当需要适配深/浅色模式时,使用 UIColor.systemBackground 可以确保背景颜色自动调整。
    • 如果背景颜色不需动态变化,直接使用固定颜色即可(如 UIColor.white)。
本文共 2009 字,上次修改于 Jan 8, 2025