iOS 13适配——暗黑模式

缺乏、安全感 2023-07-13 11:00 7阅读 0赞

暗黑模式介绍  
[Implementing Dark Mode on iOS][]  
[How To Adopt Dark Mode In Your iOS App][]  
[Adopting iOS Dark Mode][]  
[Supporting Dark Mode in Your Interface][]

iOS13有什么亮点？

iOS 13.0正式版发布以来，最大的亮点还是新增的支持Dark Mode（暗黑模式）。

暗黑模式可以有效地舒缓眼睛?

我觉得更多的是心理上的安慰。  
原理上来说`暗黑模式`仅仅是关闭了背景亮度，同时调整了可视内容的颜色，比如暗黑模式下文字以白色为主等等。它实际上并没有改变屏幕的“频闪”问题，当你长时间看屏幕的时候依旧会有视觉疲劳的症状。  
当然，`暗黑模式`也让用户在暗黑的环境下更友好地体验产品，能让主题元素更加凸显。  
另外，据说暗黑模式下可以让拥有OLED 屏幕的iPhone更加省电，电池续航更久。因为OLED 屏幕在暗黑模式下主要通过直接熄灭来达到纯黑效果，因此可以有效的降低耗电量。

App 要做暗黑的适配吗？

首先，目前iPhone自带软件基本上适配了暗黑模式，开启暗黑模式后，打开软件都是黑底白字。  
其次，对于开发者而言，苹果也提供了相应的 API 接口，以供开发者使用。  
最后，貌似没有强制要求，建议开发者根据自己的APP 类型来选择是否兼容暗黑模式。

如果自己的 App不想适配暗黑模式，要怎么做？

如果要使app一直保持黑色或者白色模式，可以在`info.plist`文件里面设置属性`User Interface Style`值为`Light`或者`Dark`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70]

> 注意：属性值`Light`或`Dark`需要`首字母大写`，否则无效。

App暗黑模式的适配怎么做？

适配包含两方面，颜色适配和图片适配。

颜色适配要怎么做？

方法1  
使用系统颜色`systemBackgroundColor`，浅色模式下显示白色，深色模式下显示黑色；存在问题，只能显示白色或黑色。

self.view.backgroundColor = UIColor.systemBackgroundColor;

或使用系统颜色`labelColor`，浅色模式下显示黑色，深色模式下显示白色；  
存在问题，只能显示黑色或白色。

label.textColor = UIColor.labelColor;

> 常用的系统动态模式颜色：文本颜色`labelColor`、辅助内容的文本标签颜色`secondaryLabelColor`、三级`tertiaryLabelColor`、超链接标签颜色`linkColor`、分隔符（细边框或者分割线）`separatorColor`或`opaqueseparatorColor`、界面背景色`systembackgroundColor`等。

方法2  
根据模式，实时显示自定义颜色。  
iOS13系统已经提供了相应的 API用于处理颜色，如下所示：

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
    - (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;

// 设置自定义颜色
    UIColor *textColor = UIColor.greenColor;
    if (@available(iOS 13.0, *)) { 
    	textColor = [UIColor colorWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) { 
    		if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) { 
    			return UIColor.orangeColor;
    		}
    		return UIColor.greenColor;
    	}];
    }
    // 显示自定义颜色
    label.textColor = textColor;

方法3  
根据模式，实时监听修改颜色

// 使用示例，如 layer 对应的颜色适配需要使用监听才有效
    - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
    { 
        if (@available(iOS 13.0, *)) { 
     		if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) { 
     			// iOS13 暗黑模式
     			label.layer.borderColor = UIColor.redColor.CGColor;
     		} else { 
     			// iOS13 普通模式
     			label.layer.borderColor = UIColor.yellowColor.CGColor;
     		}
     	} else { 
    
    	}
    }

除了代码实现，有没有其他方式可以实现颜色的暗黑适配呀？

前面3种方法都是直接通过代码来实现，还有第4种方法是通过在`Assets.xcassets`里定义颜色来实现。

方法4  
步骤1：选择`Assets.xcassets`，显示后鼠标点击右键出现菜单，选择`New Color Set`  
步骤2：创建后，选中并重命名，如`textColor`，后进行操作显示`Appearances`，选择属性`Any, Dark`，最后分别设置两种颜色  
步骤3：通过函数`+ (nullable UIColor *)colorNamed:(NSString *)name`获取颜色，并进行赋值使用

label.textColor = [UIColor colorNamed:@"textColor"];

设置如图示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70 1]

> `Apperances`设置方法：选中该资源文件， 打开 Xcode ->View ->Inspectors ->Show Attributes Inspectors （或者Option+Command+4）视图，将 Apperances 选项 改为Any，Dark

我的 App 适配了暗黑模式，但是我想App 里的有些界面不要暗黑模式的适配，有什么办法吗？

若想要某个UI 保持白色模式，或黑色模式，可以设置属性`overrideUserInterfaceStyle` 的值为`UIUserInterfaceStyleLight`或值为`UIUserInterfaceStyleDark`。

前面告诉了我颜色的暗黑模式适配，那图片适配的暗黑模式适配又是怎么实现的？

方法1  
通过代码实现

> 注意：图标资源可以保存在`Assets.xcassets`，也可以直接在项目中创建资源目录保存。

// 定义不同模式的图标
    UIImage *image = [UIImage imageNamed:@"lightName"];
    if (@available(iOS 13.0, *)) { 
    	UIImage *imgs = [UIImage imageNamed:lightName inBundle:nil compatibleWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]];
    	[imgs.imageAsset registerImage:[UIImage imageNamed:@"darkName"] withTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark]];
    	image = [imgs.imageAsset imageWithTraitCollection:UITraitCollection.currentTraitCollection];
    }
    // 获取并使用图标
    imageView.image = image;

方法2  
通过设置`Assets.xcassets`实现

> 注意：该方法时，图标资源必须保存在`Assets.xcassets`。

步骤1 设置图标，并重命名为`icon`，如图示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70 2]  
步骤2 使用

imageView.image = [UIImage imageNamed:@"icon"];

介绍完了颜色，图片在暗黑模式下的适配，给我总结下呗

既是总结，也是强调，在暗黑模式的适配过程中的注意事项：  
1、`layer` 颜色的适配，只能使用回调方法`- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection`监听处理；  
2、可以在`Info.plist`添加属性`User Interface Style`并设值为`Light`或`Dark`，使 app 保持白色模式，或黑色模式；  
3、可以使用设置属性`overrideUserInterfaceStyle`值为`UIUserInterfaceStyleLight`或`UIUserInterfaceStyleDark`，使某个UI 保持为白色模式，或黑色模式；

另外，补充下开发中可以通过调用`UITraitCollection.currentTraitCollection.userInterfaceStyle`获取当前模式，以便可以根据不同的模式执行不同的操作。  
如：

if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) { 
     	NSLog(@"DarkMode");
    } else { 
     	NSLog(@"LightMode");
    }

以上纯属个人认知，不足之外，还请大家留言共同学习讨论。

[Implementing Dark Mode on iOS]: https://developer.apple.com/videos/play/wwdc2019/214/
[How To Adopt Dark Mode In Your iOS App]: https://www.fivestars.blog/code/ios-dark-mode-how-to.html
[Adopting iOS Dark Mode]: https://developer.apple.com/documentation/uikit/appearance_customization/adopting_ios_dark_mode
[Supporting Dark Mode in Your Interface]: https://developer.apple.com/documentation/xcode/supporting_dark_mode_in_your_interface
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020031300050532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020031122284134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200311222400899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg==,size_16,color_FFFFFF,t_70