iOS13 暗黑模式的适配（Dark Mode）
2020-05-12 本文已影响0人
丶BEGIN丶
尽管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
是不是感觉不是那么难了？
好了 祝大家代码越来越优秀 ！
