iOS13 暗黑模式(Dark Mode)适配之OC版

痛定思痛。 2023-10-09 11:18 10阅读 0赞

## 目录 ##

*  **一、适配Dark Mode**
    
     *  **颜色适配**
     *  **图片适配**
 *  **二、获取当前模式(Light or Dark)**
 *  **三、其他内容**
 *  **四、总结**

**首先看看我们的效果图:**

![format_png][]

适配效果图

# 一、适配Dark Mode #

开发者主要从颜色和图片两个方面进行适配，我们不需要关心切换模式时该如何操作，这些都由系统帮我们实现

## 1 颜色适配 ##

*  iOS13 之前 `UIColor`只能表示一种颜色，而从 iOS13 开始`UIColor`是一个动态的颜色，在`Light Mode`和`Dark Mode`可以分别设置不同的颜色。
 *  iOS13系统提供了一些动态颜色
 *   @property (class, nonatomic, readonly) UIColor \*systemBrownColor        API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemIndigoColor       API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemGray2Color        API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemGray3Color        API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemGray4Color        API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemGray5Color        API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemGray6Color        API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*labelColor              API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*secondaryLabelColor     API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*tertiaryLabelColor      API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*quaternaryLabelColor    API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*linkColor               API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*placeholderTextColor    API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*separatorColor          API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*opaqueSeparatorColor    API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemBackgroundColor                   API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*secondarySystemBackgroundColor          API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*tertiarySystemBackgroundColor           API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemGroupedBackgroundColor            API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*secondarySystemGroupedBackgroundColor   API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*tertiarySystemGroupedBackgroundColor    API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*systemFillColor                         API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*secondarySystemFillColor                API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*tertiarySystemFillColor                 API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
    
    @property (class, nonatomic, readonly) UIColor \*quaternarySystemFillColor               API\_AVAILABLE(ios(13.0)) API\_UNAVAILABLE(tvos, watchos);
 *  ① 实例
 *  \[self.view setBackgroundColor:\[UIColor systemBackgroundColor\]\];
    
    \[self.titleLabel setTextColor:\[UIColor labelColor\]\];
    
    \[self.detailLabel setTextColor:\[UIColor placeholderTextColor\]\];
 *  ② 效果展示

![format_png 1][]

系统UIColor样式

用法和iOS13之前的一样，使用系统提供的这些动态颜色，不需要其他的适配操作

### ③ 自定义动态UIColor ###

在实际开发过程，系统提供的这些颜色还远远不够，因此我们需要创建更多的动态颜色

初始化动态UIColor方法

iOS13 `UIColor`增加了两个初始化方法，使用以下方法可以创建动态UIColor  
注:一个是类方法，一个是实例方法

\+ (UIColor \*)colorWithDynamicProvider:(UIColor \* (^)(UITraitCollection \*))dynamicProvider API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);

\- (UIColor \*)initWithDynamicProvider:(UIColor \* (^)(UITraitCollection \*))dynamicProvider API\_AVAILABLE(ios(13.0), tvos(13.0)) API\_UNAVAILABLE(watchos);

*  这两个方法要求传一个`block`进去
 *  当系统在`LightMode`和`DarkMode`之间相互切换时就会触发此回调
 *  这个`block`会返回一个`UITraitCollection`类
 *  我们需要使用其属性`userInterfaceStyle`，它是一个枚举类型，会告诉我们当前是`LightMode`还是`DarkMode`
 *  typedef NS\_ENUM(NSInteger, UIUserInterfaceStyle) \{
    
        UIUserInterfaceStyleUnspecified,
    
        UIUserInterfaceStyleLight,
    
        UIUserInterfaceStyleDark,
    
    \} API\_AVAILABLE(tvos(10.0
 *  实例
 *   
    
    UIColor \*dyColor = \[UIColor colorWithDynamicProvider:^UIColor \* \_Nonnull(UITraitCollection \* \_Nonnull trainCollection) \{
    
            if (\[trainCollection userInterfaceStyle\] == UIUserInterfaceStyleLight) \{
    
                return \[UIColor redColor\];
    
            \}
    
            else \{
    
                return \[UIColor greenColor\];
    
            \}
    
        \}\];
    
        
    
    \[self.bgView setBackgroundColor:dyColor\]

### 效果展示 ###

![format_png 2][]

自定义UIColor效果

接下来我们看看如何适配图片

## 2.图片适配 ##

*  打开`Assets.xcassets`
 *  新建一个`Image set`

![format_png 3][]

默认显示效果

*  打开右侧工具栏，点击最后一栏，找到`Appearances`，选择`Any，Dark`
    
    ![format_png 4][]
    
    侧边栏

*  将两种模式下不同的图片资源都拖进去

![format_png 5][]

两种不同模式

*  使用该图片
 *  \[\_logoImage setImage:\[UIImage imageNamed:@"icon\_logo"\]\];

![format_png 6][]

最终效果图

大功告成，完成颜色和图片的`Dark Mode`适配，是不是很easy呢

### ① 获取当前模式(Light or Dark) ###

有时候我们需要知道当前处于什么模式，并根据不同的模式执行不同的操作  
iOS13中`CGColor`依然只能表示单一的颜色  
通过调用`UITraitCollection.currentTraitCollection.userInterfaceStyle`  
获取当前模式

实例

if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) \{

\[self.titleLabel setText:@"DarkMode"\];

else \{

\[self.titleLabel setText:@"LightMode"\];

# 三、其他 #

## 1.监听模式切换 ##

> 有时我们需要监听系统模式的变化，并作出响应  
> 那么我们就需要在需要监听的viewController中，重写下列函数
> 
>  
> 
> // 注意:参数为变化前的traitCollection
> 
> \- (void)traitCollectionDidChange:(UITraitCollection \*)previousTraitCollection;
> 
>  
> 
> // 判断两个UITraitCollection对象是否不同
> 
> \- (BOOL)hasDifferentColorAppearanceComparedToTraitCollection:(UITraitCollection \*)traitCollection;
> 
> ① 示例

\- (void)traitCollectionDidChange:(UITraitCollection \*)previousTraitCollection \{

\[super traitCollectionDidChange:previousTraitCollection\];

// trait发生了改变

if (\[self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection\]) \{

// 执行操作

## 2.CGColor适配 ##

> 我们知道iOS13后，`UIColor`能够表示动态颜色，但是CGColor依然只能表示一种颜色，那么对于CALayer等对象如何适配暗黑模式呢?当然是利用上一节提到的监听模式切换的方法啦。

### ① 方式一:`resolvedColor` ###

// 通过当前traitCollection得到对应UIColor

// 将UIColor转换为CGColor

\- (UIColor \*)resolvedColorWithTraitCollection:(UITraitCollection \*)traitCollection;`实例`

\- (void)traitCollectionDidChange:(UITraitCollection \*)previousTraitCollection \{

\[super traitCollectionDidChange:previousTraitCollection\];

UIColor \*dyColor = \[UIColor colorWithDynamicProvider:^UIColor \* \_Nonnull(UITraitCollection \* \_Nonnull trainCollection) \{

if (\[trainCollection userInterfaceStyle\] == UIUserInterfaceStyleLight) \{

return \[UIColor redColor\];

else \{

return \[UIColor greenColor\];

\}\];

UIColor \*resolvedColor = \[dyColor resolvedColorWithTraitCollection:previousTraitCollection\];

layer.backgroundColor = resolvedColor.CGColor;

### ② 方式二:`performAsCurrent` ###

// 使用当前trainCollection调用此方法

\- (void)performAsCurrentTraitCollection:(void (^)(void))actions;

示例

\- (void)traitCollectionDidChange:(UITraitCollection \*)previousTraitCollection \{

\[super traitCollectionDidChange:previousTraitCollection\];

UIColor \*dyColor = \[UIColor colorWithDynamicProvider:^UIColor \* \_Nonnull(UITraitCollection \* \_Nonnull trainCollection) \{

if (\[trainCollection userInterfaceStyle\] == UIUserInterfaceStyleLight) \{

return \[UIColor redColor\];

else \{

return \[UIColor greenColor\];

\}\];

\[self.traitCollection performAsCurrentTraitCollection:^\{

layer.backgroundColor = dyColor.CGColor;

\}\];

### 方式三:最简单的方法 ###

直接设置为一个动态UIColor的CGColor即可

\- (void)traitCollectionDidChange:(UITraitCollection \*)previousTraitCollection \{

\[super traitCollectionDidChange:previousTraitCollection\];

UIColor \*dyColor = \[UIColor colorWithDynamicProvider:^UIColor \* \_Nonnull(UITraitCollection \* \_Nonnull trainCollection) \{

if (\[trainCollection userInterfaceStyle\] == UIUserInterfaceStyleLight) \{

return \[UIColor redColor\];

else \{

return \[UIColor greenColor\];

\}\];

layer.backgroundColor = dyColor.CGColor;

⚠️!!! **设置layer颜色都是在`traitCollectionDidChange`中，意味着如果没有发生模式切换，layer将会没有颜色，需要设置一个基本颜色**

## 3.模式切换时打印log ##

> 模式切换时自动打印log，就不需要我们一次又一次的执行po命令了

*  在Xcode菜单栏`Product`\->`Scheme`\->`Edit Scheme`
 *  选择`Run`\->`Arguments`\->`Arguments Passed On Launch`
 *  添加以下命令即可
    
     *  `-UITraitCollectionChangeLoggingEnabled YES`
        
        ![format_png 7][]
        
        模式切换打印log

## 4.强行设置App模式 ##

> 当系统设置为`Light Mode`时，对某些App的个别页面希望一直显示`Dark Mode`下的样式，这个时候就需要强行设置当前`ViewController`的模式了

// 设置当前view或viewCongtroller的模式

@property(nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle;

示例

// 设置为Dark Mode即可

\[self setOverrideUserInterfaceStyle:UIUserInterfaceStyleDark\];

⚠️ 注意!!!

*  当我们强行设置当前**viewController**为**Dark Mode**后，这个**viewController**下的**view**都是**Dark Mode**
 *  由这个**ViewController present**出的**ViewController**不会受到影响，依然跟随系统的模式
 *  要想一键设置App下所有的**ViewController**都是**Dark Mode**，请直接在**Window**上执行`overrideUserInterfaceStyle`
 *  对`window.rootViewController`强行设置`Dark Mode`也不会影响后续**present**出的**ViewController**的模式

## 5.NSAttributedString优化 ##

> 对于UILabel、UITextField、UITextView，在设置NSAttributedString时也要考虑适配`Dark Mode`，否则在切换模式时会与背景色融合，造成不好的体验

### 不建议的做法 ###

NSDictionary \*dic = @\{NSFontAttributeName:\[UIFont systemFontOfSize:16\]\};

NSAttributedString \*str = \[\[NSAttributedString alloc\] initWithString:@"富文本文案" attributes:dic\];推荐的做法

// 添加一个NSForegroundColorAttributeName属性

NSDictionary \*dic = @\{NSFontAttributeName:\[UIFont systemFontOfSize:16\],NSForegroundColorAttributeName:\[UIColor labelColor\]\};

NSAttributedString \*str = \[\[NSAttributedString alloc\] initWithString:@"富文本文案" attributes:dic\];

# 五、总结 #

> 总的来说，iOS13主要有以下变化:  
> 1.支持 **Dark Mode**  
> 2.**UIColor**变为动态颜色  
> 3.更新**StatusBar**样式  
> 4.更新**UIActivityIndicatorView**样式

完整iOS13新特性请参考以下文章:  
[iOS13 新特性简介][iOS13]  
[iOS13-适配夜间模式/深色外观(Dark Mode)][iOS13-_Dark Mode]  
)

iOS13最主要的是推出了暗黑模式Dark Mode，目前App Store榜单上的App已经开始积极适配了  
9月份会发布iOS13正式版本，2020年苹果可能要求开发者必须适配Dark Mode，否则不予上架  
Status Bar 样式被修改  
UIActivityIndicatorView 原有的三种样式**全部被废弃**，推出两种新的样式

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLTdmMTJiMWU1M2YyNTBiNGQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLTAyOGE2NDI4NWJkOGRmZDAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLTgzYzI5MDI4ZWQ0NzZkYmEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLWY1NzliZmViNjkyYTdlZTgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzk0?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLWNhNzdlNDlmMzRhYTVmOTcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTE2?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLWVlYjU1NGJmNWJiMTg2NTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvOTcy?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLTczMmQxNzJjYjgyNWE3MjcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84MDY4NzQzLTRlMTczN2Y1YzQ5NjA2MTcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMA?x-oss-process=image/format,png
[iOS13]: https://www.jianshu.com/p/2036e821e912
[iOS13-_Dark Mode]: https://www.jianshu.com/p/e6616e44cf60