iOS - iOS13的Dark Mode 暗模式的适配

"在macOS和iOS中,用户可以选择采用系统范围的明暗外观。深色外观被称为深色模式,实现了许多应用程序已经采用的界面风格。用户选择自己喜欢的美观,也可以根据环境照明条件或特定的时间表选择切换界面。"

所以在iOS 13版本之后,需要支持界面中的暗模式,通过更新颜色、图像和行为,以便在黑暗模式处于活动状态时自动适应应用程序

当前文字测试版本:
Xcode:Version 12.4 (12D4e)
iPhone:iOS 14.4.2
语言:Swift
模式:可通过手机直接操作查看具体的效果变化

适配方案:

1、颜色

  • 点击Assets.xcassets,点击底部的“+”,选择Color Set


    颜色适配
  • 生成了一个Color Set,自己起一个名字,点击右边的 Appereance,选择 Any,Light,Dark,然后根据不同的模式下,配置上不同的颜色即可,如下:

Color Set
  • 在iOS开发使用需要适配的颜色时候,直接通过以下设置。
  • 在该处的可以在Swift的全局配置文件,将字体颜色和背景颜色分别确定好,提前配置好,然后在开发过程中直接使用即可
//swiftDemoColor 就是你设置的Color Set
 self.view.backgroundColor = UIColor(named: "swiftDemoColor")

2、图片

  • 和设置颜色相同,点击Assets.xcassets,点击底部的“+”,选择Image Set,配置 Appereance,在Any,Light,Dark下分别设置上自己的图片即可,这里不做赘述

3、系统其他的操作:代码中

  • 通过下述代码可获取当前的模式
UITraitCollection.current.userInterfaceStyle
//
//userInterfaceStyle 为UIUserInterfaceStyle的枚举样式,如下:
//public enum UIUserInterfaceStyle : Int {
//    case unspecified = 0
//    case light = 1
//    case dark = 2
//}
  • UIViewController 监听当前系统的显示模式的改变方法,下面为具体的监听方法,可在基类中直接设置该监听,然后根据监听到的变化去设置想处理的界面
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if #available(iOS 13.0, *) {
            if self.traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
                if UITraitCollection.current.userInterfaceStyle == .dark {
                      //暗黑模式
                    self.view.backgroundColor = UIColor.black
                } else {
                      //其他模式
                    self.view.backgroundColor = UIColor.white
                }
            } else {
                // Fallback on earlier versions
            }
        }
}

参考的网站:Apple Developer -> 文稿 -> 外观定制->支持界面的暗模式,跳转链接如下:
苹果官网的指导适配暗模式的网站

  • 在切换了APP主题的时候,我们的界面UIViewController UIView都会有方法进行监听,重新绘制,可根据网站的的方法进行更新


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

推荐阅读更多精彩内容