iOS 深色模式适配
要求:iOS13.0以上
重点:需要所有界面进行适配,工作量巨大,需要从项目开始就进行适配;H5界面无法进行适配
实现方式:System Colors(常用)、Semantic Colors(常用)、Dynamic Colors(常用)、Asset Catalog、Border colors、Dynamic Images
1.System Colors:
Apple为了适配深色模式对UIKit中的UIColor进行了重新定义,具体颜色代码值可查看apple官方文档,例如将.red, .blue和 .yellow定义为.systemRed,.systemBlue和.systemYellow,这些新定义的System Colors在深色和浅色模式下表现为不同的颜色。
2.Semantic Colors:
对于一些需要进行文字显示的控件apple也做了深色模式的适配,Apple新加了Semantic Colors颜色方案,使用Semantic Colors时不需要纠结具体的值,只需要在合适的场景使用,例如当控件是Label时,在没有自定义字体颜色时,可以使用.label类型的的Semantic Colors,在浅色模式下显示黑色字体,在深色模式下显示白色字体;Semantic Colors包括.label,.separator,.link, .systemBackground和.systemFill。
3.Dynamic Colors(自定义颜色):
在实际开发中很多情况下我们都是需要自定义颜色的,Apple也给出了相应的方案,那就是通过UIColor.init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)这个方法进行创建自定义的semantic color。
为系统类UIColor写一个扩展
public extension UIColor { static func | (lightMode: UIColor, darkMode: UIColor) -> UIColor { guard #available(iOS 13.0, *) else { return lightMode } return UIColor { (traitCollection) -> UIColor in return traitCollection.userInterfaceStyle == .light ? lightMode : darkMode } } }
4.Asset Catalog:
在asset里面预先保存自定义颜色,在Any Appearence(浅色模式)和Dark Appearence(深色模式)分别添加一种颜色即可。一般用于高度重复的颜色,比如主题色等,需要UI高度统一颜色标准。
支持代码使用:view.backdroundcolor = Color(named: “自定义颜色名”)
5.Border colors:
Border colors在当主题模式发生改变时并不会自动的进行适配,所以需要手动的进行处理,可以通过traitCollectionDidChange(_:)这个方法在进行处理:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
traitCollection.hasDifferentColorAppearance(comparedTo: traitCollection) {
layer.backgroundColor = UIColor.layer.cgColor
}
}
6.Dynamic Images:
图片资源同样支持深色模式,需要使用Assets.xcassets,新建一个Assets.xcassets并在Attributes inspector点击Appearances选择Any, Dark,然后分别为Any Appearances和Dark Appearances配置响应的图片。
后台返回图片时需要自己用代码创建Assets。
尽量不要使用图片,无限的增加图片资源最终会导致包的大小会增加很多。
可以tintColor或者反转图片颜色解决改变图片颜色问题