iOS 暗黑模式适配（方法介绍篇）

适配目标

根据苹果的设计思路，适配暗黑模式是通过UIKit提供的基础对象进行颜色和图片的控制

image.png

image.png

一些系统提供的控件已经适配了暗黑模式，剩下的就是适配我们自己写的一些控件特性了。

开始适配

一、暂时还未适配
如果你的 App 暂时未适配，或者App界面不适合在暗黑模式下展示。
可以暂时通过在工程的info.plist 中添加UIUserInterfaceStyle配置为Light模式，这样就不会受到系统模式变更的影响了：

image.png

二、overrideUserInterfaceStyle属性
在 iOS 13中，UIView、UIViewController 、UIWindow 有了一个 overrideUserInterfaceStyle 的新属性，可以更改显示的模式。

/* 设置 `overrideUserInterfaceStyle` 使当前控制器和他的子控件有
一个明确的 `UIUserInterfaceStyle`. 设置之后不会影响程序，或者其他的父视图
默认是 UIUserInterfaceStyleUnspecified<不确定模式，跟随系统模式的变化而变化>
 */
@property (nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle API_AVAILABLE(tvos(13.0), ios(13.0)) API_UNAVAILABLE(watchos);

typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
    UIUserInterfaceStyleUnspecified,  // 不确定模式，跟随系统模式的变化而变化
    UIUserInterfaceStyleLight,        // Light模式，跟随系统模式的变化而变化
    UIUserInterfaceStyleDark,         // Dark模式
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);
image.png

如果修改一个VC的模式为UIUserInterfaceStyleDark模式,那么他的子控件，子VC如果不单独设置模式的话，将会和他一样。View同理。

三、颜色适配

完成颜色适配，我们App中的适配工作就差不多完成一大半了。

1、使用系统提供的颜色

系统颜色 Dynamic colors

iOS 13，系统为我们提供了很多的颜色，使用这些颜色，开发者什么都不需要做，系统会自动完成暗黑模式的适配。

1.1、系统颜色

labelColor :文本颜色
secondaryLabelColor : 辅助内容的文本标签颜色
tertiaryLabelColor ：三级
linkColor: 超链接标签颜色
separatorColor/opaqueseparatorColor：分隔符（细边框或者分割线）
systembackgroundColor ：界面背景色
.........

1.2、动态的灰度颜色

image.png

image.png

相关的颜色在不同模式下的对比，可以直接参考
https://noahgilmore.com/blog/dark-mode-uicolor-compatibility/
这哥们写的比较全。

1.3、语义化颜色

@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);

/* 2. systemGroupedBackground
 *    Use this stack for views with grouped content, such as grouped tables and
 *    platter-based designs. These are like grouped table views, but you may use these
 *    colors in places where a table view wouldn't make sense.
 */
@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);
。。。。。。

2、在Assets.xcassets中自定义颜色

image.png

不过适配的是iOS11以上

if (@available(iOS 11.0, *)) {
    UIColor *color = [UIColor colorNamed:@"LightAndDarkHeaderColor"];
} else {
     // Fallback on earlier versions
}

3、使用UIColor新提供的方法
把生成的UIColor对象直接赋值给View的

// 类方法
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 对象方法
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

UIColor *color1 = nil;
if (@available(iOS 13.0, *)) {
    color1 = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            return [UIColor redColor];
        } else {
            return [UIColor greenColor];
        }
    }];
    
    UIColor *color2 = [[UIColor alloc] initWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
       if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                return [UIColor redColor];
            } else {
                return [UIColor greenColor];
            }
        }];
    self.view.backgroundColor = color1;
    
} else {
    
}
self.view.backgroundColor = color1;

二、图片资源适配

1、SF Symbols
苹果在 WWDC19 上引入了 SF Symbols 。SF Symbols是一个巨大的矢量图标库（超过1500），可供开发人员在自己的 App 中使用。

更多可以查看关于 SF Symbols 的download the SF Symbols app
，下载.dmg可以查看全部图标。苹果在自己的应用中使用，也推荐开发者使用。

image.png

如果你使用了苹果给开发者提供的 SF Symbols 图标符号库，那么模式切换什么都不用做

if (@available(iOS 13.0, *)) {
    UIImage *normalImage = [UIImage systemImageNamed:@"star.fill"];
    [btn setImage:normalImage forState:UIControlStateNormal];
}
可以看到两种模式下图标的颜色不一样.png

2、Assets.xcassets 适配图片

image.png

切换模式的时候，系统会自动加载不同模式下的图片

self.localImageView.image = [UIImage imageNamed:@"LightAndDarkHeaderImage"];
image.png

三、监听当前View或者VC的模式改变
使用- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection回调方法
监听当前层级模式是否发生变化，来修改相关控件的显示样式。
有一些界面元素我们是没法直接用UIColor提供的新方法进行修改的，需要在模式发生变化的回调中进行修改，比如CALayer

// 这种写法是没法让CALayer跟随模式变化而变化的
if (@available(iOS 13.0, *)) {
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            return [UIColor redColor];
        } else {
            return [UIColor greenColor];
        }
    }].CGColor;
    [self.view.layer addSublayer:layer];
}

- (void)createUI {
    if (@available(iOS 13.0, *)) {
        self.layerColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                return [UIColor redColor];
            } else {
                return [UIColor greenColor];
            }
        }];
        self.layer = [CALayer layer];
        self.layer.frame = CGRectMake(100, 100, 100, 100);
        self.layer.backgroundColor = self.layerColor.CGColor;
        [self.view.layer addSublayer:self.layer];
    }
}
// 当iOS界面环境发生变化时，系统调用该方法。
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    if (@available(iOS 13.0, *)) {
        // 判断当前的颜色是否发生变化，因为屏幕旋转也会走该回调
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            
            // 设置layer的背景颜色
            self.layer.backgroundColor = self.layerColor.CGColor;
        }
    }
}

如何调试暗黑模式
1、左图：Xcode中的调试开关，可以调试真机和模拟器
2、右图：真机中的开关

image.png

接下来适配我们的项目：
iOS 暗黑模式适配(项目实战篇)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,185评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,652评论 3赞 393
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,524评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,339评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,387评论 6赞 391
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,287评论 1赞 301
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,130评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,985评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,420评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,477评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,088评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2赞 354