iOS13-适配夜间模式/深色外观(Dark Mode)

今天的 WWDC 19 上发布了 iOS 13,我们来看下如何适配 DarkMode

首先我们来看下效果图


效果图.gif

如何适配 DarkMode

DarkMode 主要从两个方面来适配,一是颜色,二是图片,适配的代码不是很多,接下来让我们一起来看看具体是怎么操作的吧。

颜色适配

iOS 13 之前 UIColor 只能表示一种颜色,从 iOS 13 开始 UIColor 是一个动态的颜色,它可以在 LightMode 和 DarkMode 拥有不同的颜色。
iOS 13 下 UIColor 增加了很多动态颜色,我们来看下用系统提供的颜色能实现怎么样的效果。

// UIColor 增加的颜色
@available(iOS 13.0, *)
open class var systemBackground: UIColor { get }
@available(iOS 13.0, *)
open class var label: UIColor { get }
@available(iOS 13.0, *)
open class var placeholderText: UIColor { get }
...

view.backgroundColor = UIColor.systemBackground
label.textColor = UIColor.label
placeholderLabel.textColor = UIColor.placeholderText
效果图

怎么样,看起来和 iOS 13 之前设置一个颜色的方法一样吧,用这种动态颜色,系统直接替我们完成了适配的工作,是不是很方便呢。

如何自己创建一个动态的 UIColor

上面我们说到系统提供了一些动态的颜色供我们使用,但是在正常开发中,系统提供的颜色肯定是不够用的,所以我们要自己创建动态颜色。

iOS 13 下 UIColor 增加了一个初始化方法,我们可以用这个初始化方法来创建动态颜色。

@available(iOS 13.0, *)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

这个方法要求传一个闭包进去,当系统从 LightMode 和 DarkMode 之间切换的时候就会触发这个回调。
这个闭包返回一个 UITraitCollection 类,我们要用这个类的 userInterfaceStyle 属性。
userInterfaceStyle 是一个枚举,声明如下

@available(iOS 12.0, *)
public enum UIUserInterfaceStyle : Int {
    case unspecified
    case light
    case dark
}

这个枚举会告诉我们当前是 LightMode or DarkMode


现在我们创建两个 UIColor 并赋值给 view.backgroundColorlabel,代码如下

let backgroundColor = UIColor { (trainCollection) -> UIColor in
    if trainCollection.userInterfaceStyle == .dark {
        return UIColor.black
    } else {
        return UIColor.white
    }
}
view.backgroundColor = backgroundColor

let labelColor = UIColor { (trainCollection) -> UIColor in
    if trainCollection.userInterfaceStyle == .dark {
        return UIColor.white
    } else {
        return UIColor.black
    }
}
label.textColor = labelColor

现在,我们做完了动图中背景色和文本颜色的适配,接下来我们看看图片如何适配

图片适配

打开 Assets.xcassets
把图片拖拽进去,我们可以看到这样的页面

然后我们在右侧工具栏中点击最后一栏,点击 Appearances 选择 Any, Dark,如图所示

我们把 DarkMode 的图片拖进去,如图所示

最后我们加上 ImageView 的代码

imageView.image = UIImage(named: "icon")

现在我们就已经完成颜色和图片的 DarkMode 适配,是不是很简单呢 (手动滑稽)


如何获取当前模式 (Light or Dark)

我们可以看到,不管是颜色还是图片,适配都是系统完成的,我们不用关心现在是什么样的样式。
但是在某些场景下,我们可能会有根据当前样式来做一些其他适配的需求,这时我们就需要知道现在什么样式。
我们可以在 UIViewControllerUIView 中调用 traitCollection.userInterfaceStyle 来获取当前视图的样式,代码如下

if trainCollection.userInterfaceStyle == .dark {
    // Dark
} else {
    // Light
}

那么我们什么时候需要用这样的方法做适配呢,比如说当我们使用 CGColor 的时候,上面说到 UIColor 在 iOS 13 下变成了一个动态颜色,但是 CGColor 仍然只能表示单一的颜色,所以当我们使用到 CGColor 的时候,我们就可以用上面的方法做适配。

颜色

对于 CGColor 我们还有还有另一种适配方法,代码如下

let resolvedColor = labelColor.resolvedColor(with: traitCollection)
layer.borderColor = resolvedColor.cgColor

resolvedColor 方法会根据传递进去的 traitCollection 返回对应的颜色。

图片

对于 UIImage 我们也有类似的方法,代码如下

let image = UIImage(named: "icon")
let resovledImage = image?.imageAsset?.image(with: traitCollection)

如何监听模式变化

上面我们说了如何获取当前模式,但是我们要搭配监听方法一起使用,当 light dark 模式切换的时候,要把上面的代码再执行一遍。系统为我们提供了一个回调方法,当 light dark 切换时就会触发这个方法。

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
        // 适配代码
    }
}

题外话
如果你觉得这样为 CGColor 做适配很麻烦,那么不妨试试 XYColor 这个框架。

如何改变当前模式

我们可以看到在动图中是直接改系统的模式,从而让 App 的模式修改,但是对于某些有夜间模式功能的 App 来说,如果用户打开了夜间模式,那么即使现在系统是 light 模式,也要强制用 dark 模式。
我们可以用以下代码将当前 UIViewControllerUIView 的模式。

overrideUserInterfaceStyle = .dark
print(traitCollection.userInterfaceStyle)  // dark

我们可以看到设置了 overrideUserInterfaceStyle 之后,traitCollection.userInterfaceStyle 就是我们设置后的模式了。

需要给每一个 Controller 和 View 都设置一遍吗

答案是不需要,我们先来看一张图。


当我们设置一个 controller 为 dark 之后,这个 controller 下的 view,都会是 dark mode,但是后续 present 的 controller 仍然是跟随系统的样式。

因为苹果对 overrideUserInterfaceStyle 属性的解释是这样的。
当我们在一个普通的 controlle, view 上重写这个属性,只会影响当前的视图,不会影响前面的 controller 和后续 present 的 controller。
但是当我们在 window 上设置 overrideUserInterfaceStyle 的时候,就会影响 window 下所有的 controller, view,包括后续推出的 controller。

但是当我们在 window.rootViewController 上设置 overrideUserInterfaceStyle 的时候,就会影响 rootViewController 下所有的 controller, view,包括后续推出的 controller。 感谢 hostname 指出错误

我们回到刚刚的问题上,如果 App 打开夜间模式,那么很简单我们只需要设置 windowoverrideUserInterfaceStyle 属性就好了。

题外话:当我们用 Xcode11 创建项目,我们会发现项目结构发生了变化,windowAppDelegate 移到 SceneDelegate 中。
那么如何获取 SceneDelegate 中的 window 呢,代码如下

// 这里就简单介绍一下,实际项目中,如果是iOS应用这么写没问题,但是对于iPadOS应用还需要判断scene的状态是否激活
let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
scene?.window?.overrideUserInterfaceStyle = .dark

其他内容

Status Bar

之前 Status Bar 有两种状态,defaultlightContent
现在 Status Bar 有三种状态,default, darkContentlightContent
现在的 darkContent 对应之前的 default,现在的 default 会根据情况自动选择 darkContentlightContent

UIActivityIndicatorView

之前的 UIActivityIndicatorView 有三种 style 分别为 whiteLarge, whitegray现在全部废弃
增加两种 style 分别为 mediumlarge,指示器颜色用 color 属性修改。

如何在模式切换时打印日志

Arguments 中的 Arguments Passed On Launch 里面添加下面这行命令。
-UITraitCollectionChangeLoggingEnabled YES


以上是 iOS 13 如何适配 Dark Mode 的全部内容,如有错误欢迎指出。
WWDC链接 Implementing Dark Mode on iOS

如果你想知道 iOS 13 还增加了什么新特性可以阅读这篇文章

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

推荐阅读更多精彩内容