美文网首页iOS常用
iOS13 暗黑模式的适配(Dark Mode)

iOS13 暗黑模式的适配(Dark Mode)

作者: 丶BEGIN丶 | 来源:发表于2020-05-12 15:43 被阅读0次

尽管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解决的问题总结

    自己适配iOS13解决的问题总结 1.暗黑模式Dark Mode iOS 13 推出暗黑模式,UIView默认背景...

  • UITraitCollection详解

    最近在适配iOS13 有个Dark Mode的暗黑模式, 为了适配这个模式不得不在UIView和UIViewCon...

  • UITraitCollection详解

    收录:原文地址 先说问题 最近在适配iOS13 有个Dark Mode的暗黑模式, 为了适配这个模式不得不在UIV...

  • iOS13新特性

    Dark Mode 暗黑模式 Dark Mode样式image.png UIColor拥有了动态属性 iOS13之...

  • 2019-09-20

    收录可以用到的东西iOS新闻应用源码,高仿今日头条源码等iOS13 暗黑模式(Dark Mode)适配之OC版高仿...

  • iOS13适配(更新中)

    对于iOS13适配汇总以及遇到的问题 Dark Model iOS 13推出了暗黑模式Dark Model,UIK...

  • iOS 13 适配要点总结

    1. 暗黑模式Dark Mode 如果不打算适配 Dark Mode,可以直接在Info.plist中添加一栏:U...

  • iOS13 暗黑模式(Dark Mode)适配

    获取当前模式 (Light or Dark)通过 UITraitCollection.currentTraitCo...

  • iOS13适配暗黑模式(Dark Mode)

    暗黑模式简介不赘述,直接写用法。 苹果官方使用链接入口 暗黑模式的原理 其实就是将原本的资源文件,创建出两种模式,...

  • iOS13 暗黑模式(Dark Mode)适配(oc)

    目录 1.适配暗黑模式(Dark Mode)1.1颜色适配* 系统动态颜色** 自定义动态UIColor(代码自定...

网友评论

    本文标题:iOS13 暗黑模式的适配(Dark Mode)

    本文链接:https://www.haomeiwen.com/subject/ffibnhtx.html