iOS 暗黑模式适配
- 激活暗黑模式
在view或者controller中 overrideUserInterfaceStyle = .dark print(traitCollection.userInterfaceStyle) // dark
但是显然这样要适配的地方太多, 考虑到overrideUserInterfaceStyle这个属性的的影响关系链路为 UIScreen - UIWindow - UIController - UIPresentController - UIView 所以在xcode11后 // 不包括iPadOS
let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
scene?.window?.overrideUserInterfaceStyle = .dark
复制代码
- 如何响应暗黑模式
在Macos下可以切换暗黑模式后, 系统会自动刷新NSView的 updateLayer() 方法, 在UIView下则没有与之对应的方法, 但我们可以通过KVO监听的方式, 比如我们在个人设置里切换了模式, 那么就需要通知各个首页重新绘制必要的部分
// Use a property to keep a reference to the key-value observation object.
var observation: NSKeyValueObservation?
func applicationDidFinishLaunching(_ aNotification: Notification) {
observation = NSApp.observe(\.effectiveAppearance) { (app, _) in
app.effectiveAppearance.performAsCurrentDrawingAppearance {
// Invoke your non-view code that needs to be aware of the
// change in appearance.
}
}
}
复制代码
- 颜色适配
iOS 13 之前 UIColor 只能表示一种颜色,从 iOS 13 开始 UIColor 是一个动态的颜色,它可以在 LightMode 和 DarkMode 拥有不同的颜色。 如何自己创建一个动态的 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 使用如下:
let backgroundColor = UIColor { (trainCollection) -> UIColor in
if trainCollection.userInterfaceStyle == .dark {
return UIColor.black
} else {
return UIColor.white
}
}
复制代码
- 图片适配
打开 Assets.xcassets 把图片拖拽进去,我们可以看到这样的页面
image.png然后我们在右侧工具栏中点击最后一栏,点击 Appearances 选择 Any, Dark,如图所示
image.png 我们把 DarkMode 的图片拖进去,如图所示 image.png当然我们也可以使用代码方式:
// Image for light mode.
let lightImage: UIImage!
// Image for dark mode.
let darkImage: UIImage!
lightImage?.imageAsset?.register(darkImage, with: .init(userInterfaceStyle: .dark))
复制代码
这样lightImage就具备动态性了, 但这样的话每个图片都要改, 代码侵入性强, 代价大
4.其他 Status Bar 之前 Status Bar 有两种状态,default 和 lightContent 现在 Status Bar 有三种状态,default, darkContent 和 lightContent 现在的 darkContent 对应之前的 default,现在的 default 会根据情况自动选择 darkContent 和 lightContent 菊花 具体适配