iOS13 暗黑模式的适配（Dark Mode）

尽管iOS13已经推出了大半年多的时间，但是依旧还是有不少APP还未适配iOS13。对此，苹果公司再次给开发者们发送电子邮件，提醒开发者们从2020年4月份开始所有新App喝App更新都需要使用iOS13 SDK构建，并且支持iPhone XS Max或更高版本设备。

20177888-020fcfba3808b853.png

苹果称：“使用iOS13，你的应用程序可以利用黑暗模式，iPhone的全新设计，使用Apple登录快速轻松地登录应用程序，以及ARKit 3、Core ML 3 和 Siri最新进展。使用Xcode 11G预览版构建你的应用程序，在运行最新GM中预览版的iOS设备上测试它们，并提交以供审核。”

话不多说！先看看黑白模式的效果图

20177888-02dfcd3c27cc076e.jpeg

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

iOS13 之前 UIColor只能表示一种颜色，而从 iOS13 开始UIColor是一个动态的颜色，在Light Mode和Dark Mode可以分别设置不同的颜色。

iOS13系统提供了一些动态颜色：

@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.backgroundColor = [UIColor systemBackgroundColor];
    // 设置文字颜色
    _titleLabel.textColor = [UIColor labelColor];
    // 设置数字颜色
    _detailLabel.textColor = [UIColor placeholderTextColor];

效果图

20177888-f8d3f15af67fa367.jpeg

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

这个时候有人会问了，如果我不想用系统的怎么办呢？

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

iOS13 UIColor增加了两个初始化方法，使用以下方法可以创建动态UIColor

+ (UIColor*)colorWithDynamicProvider:(UIColor* (^)(UITraitCollection*))dynamicProviderAPI_AVAILABLE(ios(13.0),tvos(13.0))API_UNAVAILABLE(watchos);
- (UIColor*)initWithDynamicProvider:(UIColor* (^)(UITraitCollection*))dynamicProviderAPI_AVAILABLE(ios(13.0),tvos(13.0))API_UNAVAILABLE(watchos);

这两个方法要求传一个block进去，当系统在LightMode和DarkMode之间相互切换时就会触发此回调。这个block会返回一个UITraitCollection类，我们需要使用其属性userInterfaceStyle，它是一个枚举类型，会告诉我们当前是LightMode还是DarkMode。

typedefNS_ENUM(NSInteger,UIUserInterfaceStyle) {
    UIUserInterfaceStyleUnspecified,
    UIUserInterfaceStyleLight,
    UIUserInterfaceStyleDark,
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);

现在我们来看看代码片段：

UIColor *color = [UIColor colorWithDynamicProvider:^UIColor* _Nonnull(UITraitCollection* _Nonnull trainCollection) {
    return [traitCollection userInterfaceStyle] == UIUserInterfaceStyleLight ? [UIColor redColor] : [UIColor yellowColor];
}];
_topView.backgroundColor = color;

当然！如果觉得麻烦可以把代码片段写成宏定义用起来就方便很多了。

#define KDarkColor(lightColor, DarkColor) [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {\
    return [traitCollection userInterfaceStyle] == UIUserInterfaceStyleLight ? lightColor : DarkColor;\
}]

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置颜色白 or 黑
    _topView.backgroundColor = KDarkColor([UIColor redColor], [UIColor yellowColor]);
}

效果图

20177888-68c3e74c7f67c5ab.jpeg

说完颜色，接下来我们来看看图片怎么适配

首先打开Assets.xcassets 新建一个Image set 并给他取个名：

20177888-4ef3c6dc04cec82d.png

然后在右侧菜单找到Appearances，选择Any，Dark 并拖两张图片进去

20177888-d142a41c21653200.png

// 设置图片
_imageView.image = [UIImage imageNamed:@"icon_logo"];

再来看看最终效果

20177888-02dfcd3c27cc076e.jpeg

是不是感觉不是那么难了？
好了祝大家代码越来越优秀！