avatar

Catalog
iOS 暗黑模式的适配总结

iOS DarkMode Adapter

​ 就在上个月,国内的自媒体就开始疯传苹果要求开发者适配暗黑模式,并且还有谣言说,苹果通知微信强制适配暗黑模式,第二天微信的官方团队就宣布暗黑模式已经适配并且在下一个版本中就可以见到了。果然没有过多久就真的体验到了广大群众千呼万唤的暗黑模式,但是作为一个iOS使用者,我并没有觉得微信的暗黑模式有多好用,甚至觉得有的时候还会给我带来一些麻烦,最好能在微信中做一个开关,让用户自己选择显示 什么模式。但是后来一想,如果这样做了那是不是就和好几年前很流行的那种主题功能很类似了……感觉在鬼打墙…….

我作为一个低端的iOS开发者,当iOS13 出来时候,我们第一时间也没有选择适配,我们选择的是一种简单快捷的方案,全局关闭暗黑模式。只要做如下操作:

1.在Info.plist 文件中,添加UIUserInterfaceStyle key 名字为 User Interface Style 值为String,

2.将UIUserInterfaceStyle key 的值设置为 Light

这样你们就会看到界面就和之前一样了,但是还有一个很细微的地方要处理,那就是状态栏的样子并不受上面添加的值影响,所以我们还要对状态栏做适配

Code
1
2
3
4
if (@available(iOS 13.0, *)) {
[UIApplication sharedApplication].statusBarStyle =UIStatusBarStyleDarkContent; }else{
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;
}

DarkMode 文字的颜色

​ 在测试的时候我发现,但我们用UILabel显示文字的时候,只要不去设置颜色,系统会自动的通过现实的模式自动的调节颜色。但是在实际的开发中,我们并不可能一直都用一个颜色,而且 也不可能都是和白色的。

​ 那么我们就来看看要怎么做到通过切换显示模式自动的切换文字的颜色呢?

​ 当你想到这个问题的时候,苹果都已经帮你解决了。在iOS13的SDK中哟这么一个函数

Code
1
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

​ 这是一个动态颜色的设置,那么我们只要写一个UIColor的Category 就好了,统计一下我们的项目中都用到了什么样的颜色,这个时候也要UI设计师给你设计一下在暗黑模式下,各个文字对应的颜色是什么。这样我们就可以完成了对文字颜色的适配,其实后来我发现 不只是文字,只要是涉及到颜色的地方都可以这么处理。

​ 下面是我简单的写了几个颜色,仅供参考:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface UIColor (DarkMode)

+ (UIColor *)textColor;

+ (UIColor *)viewControllerBackGroundColor;

@end

NS_ASSUME_NONNULL_END
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
	
#import "UIColor+DarkMode.h"

@implementation UIColor (DarkMode)
+ (UIColor *)colorWithHex:(UInt32)hex andAlpha:(CGFloat)alpha {
int r = (hex >> 16) & 0xFF;
int g = (hex >> 8) & 0xFF;
int b = (hex)&0xFF;

return [UIColor colorWithRed:r / 255.0f green:g / 255.0f blue:b / 255.0f alpha:alpha];
}
+ (UIColor *)textColor{
if (@available(iOS 13.0, *)) {
return [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trait) {
if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) {
return [UIColor whiteColor];
} else {
return [UIColor blackColor];
}
}];;
}else{
return [UIColor blackColor];
}
}

+ (UIColor *)viewControllerBackGroundColor{
if (@available(iOS 13.0, *)) {
return [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trait) {
if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) {
return [UIColor blackColor];
} else {
return [UIColor whiteColor];
}
}];;
}else{
return [UIColor whiteColor];
}
}
@end

DarkMode Image Assets

上面说完了颜色的适配,下面就要来说一下还有图片的适配:

1.创建一个Assets文件(或在现有的Assets文件中)

2.新建一个图片资源文件(或者颜色资源文件、或者其他资源文件)

3.选中该资源文件, 打开 Xcode ->View ->Inspectors ->Show Attributes Inspectors (或者Option+Command+4)视图,将Apperances 选项 改为Any,Dark

4.执行完第三步,资源文件将会有多个容器框,分别为 Any ApperanceDark Apperance. Any Apperance 应用于默认情况(Unspecified)与高亮情况(Light), Dark Apperance 应用于暗黑模式(Dark)

5.代码默认执行时,就可以正常通过名字使用了,系统会根据当前模式自动获取对应的资源文件

Donate
  • 微信
    微信
  • 支付寶
    支付寶