以下文章来源于京东零售技术,作者平台研发姚琦
什么是暗黑模式?
iOS 13 苹果推出了暗黑模式,暗黑模式在夜间可以更好的保护视力,也可以节省 App 电量消耗。但是 Apple 提供的暗黑模式只支持 iOS 13,为了给用户带来更好的体验,我们希望 iOS 13 以下的系统也可以支持暗黑模式。另外我们还给用户提供了自主选择的权利,可以在 App 内手动关闭暗黑模式,不跟随系统主题变化。
京东 App 涉及业务模块众多,整个适配工作量巨大,为了解决上述问题,并让各模块通过统一的接口快速接入,我们开发了暗黑基础组件,提供以下能力:
- 支持 iOS 9 及以上系统,同时兼容 iOS 13 系统暗黑模式
- 支持整体切量、降级
- 支持跟随系统模式,也可以选择不跟随,使用 App 内部的模式
- 内置调试工具,帮助开发者快速调试,提升效率
- 支持颜色模式扩展
基础组件设计方案如下:
业务接入
业务接入时需要调用基础组件提供的jdbappearance_bindUpdater方法,传入一个Block并在其中处理UI更新的逻辑,基础组件会绑定Block和UIView,然后将UIView存储在HashTable中,在合适的时机通过遍历HashTable和执行绑定的Block来更新UI。业务组件的接入方案如下:
需要注意的是,遍历HashTable的时候并不是所有的Block都会执行,这里会判断UIView的window是否存在,如果window有值,就执行UIView绑定的Block,否则会先把这个Block标记为稍后执行,当UIView下次出现在window中时(didMoveToWindow 被调用的时候)就会执行这个Block。
另外不用担心Block会在每次 didMoveToWindow 时被调用,因为只有颜色模式变化的时候,Block才会被标记为稍后执行。
如果涉及接口调用等异步场景,是否会增加接入成本呢?我们通过下面的代码示例看一下业务是如何进行适配的:
// 接入前
cell.viewA.backgroundColor = [UIColor redColor];
cell.viewB.image = [UIImage imageNamed:@"xxx"];
// 接入后
@weakify(cell)
[cell jdbappearance_bindUpdater:^(JDBAppearance *apperance, UIView *bindView) {
@strongify(cell)
cell.viewA.backgroundColor = [UIColor jdbappearance_colorBR];
cell.viewB.image = [UIImage jdbappearance_imageNamed:@[@"light_xx", @"dark_xx"]];
}];
因为每次调用jdbappearance_bindUpdater 时,会立刻执行一次Block,所以不论是否涉及异步场景,接入方式都是统一的,并不会带来额外的接入成本。
自定义Updater:
Block机制基本可以满足所有的适配场景,但是实际开发中,我们可能希望有一些便捷的方法,比如直接调用一个方法jd_setBackgroundColor设置UIView的背景色。
这样的需求也是可以满足的,我们来看一下如何封装这样的API:
@implementation UIView (CustomUpdater)
- (void)jdb_setBackgroundColor:(NSArray *)colors
{
[self jdbappearance_bindUpdater:^(JDBAppearance * _Nonnull appearance, UIView * _Nonnull bindView) {
bindView.backgroundColor = [UIColor jdbappearance_colorWithHex:colors];
} updaterKey:@"jdb_setBackgroundColor"];
}
@end
注意绑定Block的时候需要指定一个updaterKey,updaterKey允许一个UIView绑定多个Block。使用方式也很简单,并且不需要考虑循环引用的问题:
[cell jdb_setBackgroundColor:@[@"#FFFFFF", @"#1D1B1B"]];
App内切换暗黑模式
这个功能允许用户在 App 内手动开启或者关闭暗黑模式,但是存在一个问题:
如果系统开启了暗黑,但是 App 内关闭了,此时一些系统控件的颜色仍然是深色的(例如通过UIImagePickerController调起的系统相册),从而导致系统控件颜色和 App 颜色不一致。
在阐述解决方案之前,先来介绍一下UITraitCollection:
UITraitCollection是 iOS 8 开始新增的一个类,管理着 App 中的用户界面相关的一些系统特征,每个视图都拥有自己的UITraitCollection。
iOS 13 颜色模式相关的信息,就存储在userInterfaceStyle属性中。如果我们想给视图单独指定userInterfaceStyle,需要使用 iOS 13 新增的 API overrideUserInterfaceStyle,另外设置overrideUserInterfaceStyle是对子视图生效的。
可是这么多视图,我们应该修改谁的属性呢?下面这张图描述了视图之间的层级关系以及UITraitCollection的传递路线:
UITraitCollection是自上而下传递的,但是 UIScreen 和 UIWindowScene 并未提供 overrideUserInterfaceStyle 这个API,我们只能修改UIWindow的属性,使UIWindow及其所有子视图展示我们设置的颜色:
- 如果开启了暗黑,将所有window的overrideUserInterfaceStyle设置为
UIUserInterfaceStyleDark。 - 如果关闭了暗黑,将所有window的overrideUserInterfaceStyle设置为
UIUserInterfaceStyleLight。
如果在 overrideUserInterfaceStyle 修改后,又有新的 window 出现,这种情况要怎么处理呢?我们注册了UIWindowDidBecomeVisibleNotification通知,这个通知会在一个 UIWindow 对象变为可见的时候发出,在接收到通知后,设置这个window的overrideUserInterfaceStyle属性。
总结:通过修改window的overrideUserInterfaceStyle属性,大多数系统控件的颜色都能和App的颜色保持一致。
监听系统模式切换
为什么要提这个呢?用traitCollectionDidChange监听不就可以了吗?
因为我们发现,在修改overrideUserInterfaceStyle后,当切换系统颜色模式时,window及其子视图的traitCollectionDidChange并没有被调用。
虽然官方文档中并没有找到明确的说明,但是经过验证,只要我们将window的 overrideUserInterfaceStyle设置为UIUserInterfaceStyleDark 或 UIUserInterfaceStyleLight,window 及其子视图我们都没法监听。只有默认的UIUserInterfaceStyleUnspecified才会生效。
那怎么办呢?我们刚刚把所有window的 overrideUserInterfaceStyle都改了😂😂😂
办法总比困难多!仔细来分析一下,我们修改window的overrideUserInterfaceStyle是为了同步修改系统控件的颜色。那我们是不是可以创建一个独立的ObserveWindow,在切换模式的时候,如果是ObserveWindow就跳过,只修改其他window的overrideUserInterfaceStyle。这样就可以在ObserveWindow中实现traitCollectionDidChange方法,处理监听系统模式切换以及更新 App UI 的逻辑:
@implementatiton ObserveWindow
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
if (@available(iOS 13.0, *)) {
if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
// 1. 修改 App 内部样式
// 2. 修改其他 window 的 overrideUserInterfaceStyle
// 3. 通知业务更新 UI
}
}
}
@end
多任务界面快照
在适配过程中,我们发现一个问题:在多任务界面,会出现 App 展示的颜色和系统颜色模式刚好相反。
进一步分析后,发现 App 在进入后台时,traitCollectionDidChange 执行了2次,这两次执行过程中系统的 userInterfaceStyle 分别是 UIUserInterfaceStyleDark 和 UIUserInterfaceStyleLight。
这是为什么呢?我们查看了下traitCollectionDidChange被调用时的堆栈:
看了堆栈就明白了,系统在进入后台时会创建快照,这个快照其实就是系统多任务界面展示的快照,调用2次是为了分别对深色和浅色进行快照,当进入多任务界面时,系统会根据当前的颜色模式展示正确的快照。
为什么我们会遇到颜色模式相反的问题呢,这里要先介绍一下“跟随系统”的功能:
App 中有一个开关,用来控制是否跟随系统颜色模式。当用户首次选择切换到暗黑模式,会默认开启跟随系统,此时 App 模式会和系统模式保持一致。如果关闭“跟随系统”的开关,则不再监听系统模式的切换,以 App 内用户选择的模式为准。
当关闭“跟随系统”的开关后,App 内的颜色模式有可能和系统的不一致,当出现不一致的时候,快照就会出错,比如Dark模式截取了Light模式的图。为了避免这种错误,我们加了一个判断条件,只有“跟随系统”开启的情况下才会开启快照功能。
修改后的traitCollectionDidChange实现如下:
-(void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
if (@available(iOS 13.0, *)) {
UIApplicationState state = [UIApplication sharedApplication].applicationState;
if (state == UIApplicationStateBackground) {
// 系统切换到后台时,会对颜色模式取反截2张图
JDBAppearanceManager *manager = [JDBAppearanceManager sharedInstance];
if (manager.followSystemMode) {
// 如果跟随系统,就更新UI,系统会在UI更新完成后进行快照
}
} else {
// 触发场景:系统控制中心切换模式、后台进入前台、Xcode调试菜单切换模式
if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
// 1. 修改 App 内部样式
// 2. 修改其他 window 的 overrideUserInterfaceStyle
// 3. 通知业务更新 UI
}
}
}
}
个性化定制
基础组件的定位,除了为京东 App 的暗黑模式适配提供支持,我们还希望可以给更多的 App 使用。暗黑基础组件在支持现有功能的基础上,也支持个性化定制功能或者API,接入方可以根据自己的需求灵活选择:
- App 内部切换开关
- 多任务快照
- 自定义 Updater
- 自定义颜色模式
希望大家不要重复采坑
本文详细介绍了京东 App iOS 暗黑模式适配过程中踩过的坑,以及整个方案的实现原理,希望对大家有所帮助。
欢迎点击“京东智联云”了解更多精彩内容!