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

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

你可能感兴趣的:(iOS13 暗黑模式的适配(Dark Mode))