iOS 13 黑暗模式(Dark Mode)的适配

正文

记录适配黑暗模式中的注意点,若有不足和错误请指导,谢谢

目录

    1. 什么是黑暗模式,是否需要强制适配
    1. 如何获取当前模式,如何监听模式的切换
    1. 如何适配颜色
    1. 如何适配图片
    1. 如何适配状态栏
    1. 总结

1. 什么是黑暗模式,是否需要强制适配

  • 1.1 黑暗模式是iOS 13 推出的一种新的视觉效果,方便用户在夜里使用应用。再黑暗模式下,耗电量更低(拒说)。
  • 1.2 目前不需要强制适配。
  • 1.3 如果不需要适配,又不想影响我们的应用,可以禁止使用深色模式,或者指定我们的界面为某个固定模式
1. 全局设置指定模式 
   在App内禁用深色模式: 可以在Info.plist(全局) 中,设置 User Interface Style 为 Light。
2. 单界面指定某一固定模式
if (@available(iOS 13.0, *)) {
        //在单个页面内禁用深色模式使用overrideUserInterfaceStyle:
        self.view.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
        //在单个页面内禁用浅色模式使用overrideUserInterfaceStyle:
        self.view.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
    }

2. 如何获取当前模式,如何监听模式的切换

  • 2.1 获取当前模式
//获取当前模式
    if (@available(iOS 13.0, *)) {
        UIUserInterfaceStyle mode = self.traitCollection.userInterfaceStyle;
        if (mode == UIUserInterfaceStyleDark) {
            NSLog(@"深色模式");
        } else if (mode == UIUserInterfaceStyleLight) {
            NSLog(@"浅色模式");
        } else {
            NSLog(@"未知模式");
        }
    }
  • 2.2 获取模式切换监听
  • 监听系统模式的变化,需要我们在需要监听的Conttoller中,重写- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection方法
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection{
    NSLog(@"traitCollectionDidChange");
    [super traitCollectionDidChange:previousTraitCollection];
    // 注意:参数为变化前的traitCollection
    // 判断模式是否一样
    if (@available(iOS 13.0, *)) {
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {//模式发生了变化
        }
    }
}
  • 2.3 当再一个UIViewController监听变化时,会调用
-(void)viewWillLayoutSubviews{
    
}
-(void)viewDidLayoutSubviews{
    
}

-(void)updateViewConstraints{
    
}
  • 2.4 当再UIView中时
-(void)drawRect:(CGRect)rect{
    
}
-(void)layoutSubviews{
    
}
-(void)updateConstraints{
    
}
-(void)tintColorDidChange{
    
}

3. 颜色适配

  • 3.1 再UIColor类,新增了2个方法。用来定义一个可供切换的动态颜色,当模式发生变化时,使用该颜色的控件会发生颜色变化。
/* Create a dynamic color with a provider.
 * When methods are called on this color that need color component values,
 * the provider is called with UITraitCollection.currentTraitCollection.
 * The provider should use that trait collection to decide a more fundamental UIColor to return.
 * As much as possible, use the given trait collection to make that decision, not other state.
 */

+ (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);
  • 例如,我设置界面的背景颜色,当模式发生变化时,页面颜色会跟着变
//颜色适配
    if (@available(iOS 13.0, *)) {
         UIColor *viewColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
                return [UIColor redColor];
            }else if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark){
                return [UIColor greenColor];
            }else{
                return [UIColor orangeColor];
            }
        }];
        self.view.backgroundColor = viewColor;
    }

4. 图片适配

4.1 打开Assets.xcassets,点击已存在的一张图片(如果没有新建一个Image Set),打开右侧的工具栏,找到Appearances,按照自己的需求选择场景
4.2 选择后,再对应的模式放上对应的图片即可
4.3 调用

[UIImage imageNamed:@"xxxx"]

5. 状态栏适配

  • 5.1 iOS 12 状态栏只有2种状态
UIStatusBarStyleDefault  文字黑色
UIStatusBarStyleLightContent  文字白色
  • 5.2 iOS 13 状态栏新增一种状态
UIStatusBarStyleDefault 自动选择黑色或白色
UIStatusBarStyleDarkContent 文字黑色
UIStatusBarStyleLightContent 文字白色

5.3 使用

  • 当模式为Light 时,状态栏为: UIStatusBarStyleDarkContent
  • 当模式为Dark 时,状态栏为: UIStatusBarStyleDarkContent
  • 当为指定时,状态栏为: UIStatusBarStyleDefault

6. 总结

  • 6.1 需要监听模式之间的切换,来实现不同模式下的不同场景
  • 6.2 颜色适配需要使用动态颜色来定义,这样开发者就不用再模式切换时再去重新设置控件对应的颜色,颜色需要对应2种色值,我自己项目中使用plist文件来管理。
  • 6.3 图片适配需要编辑 Image Set 的 Appearances。然后放入对应的图片

结尾

可能也没什么了。写的不是很好,大家凑合着看,有问题欢迎指出,谢谢!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272