适配目标
根据苹果的设计思路,适配暗黑模式是通过UIKit提供的基础对象进行颜色和图片的控制
一些系统提供的控件已经适配了暗黑模式,剩下的就是适配我们自己写的一些控件特性了。
开始适配
一、暂时还未适配
如果你的 App 暂时未适配,或者App界面不适合在暗黑模式下展示。
可以暂时通过在工程的info.plist 中添加UIUserInterfaceStyle配置为Light模式,这样就不会受到系统模式变更的影响了:
二、overrideUserInterfaceStyle
属性
在 iOS 13中,UIView
、UIViewController
、UIWindow
有了一个 overrideUserInterfaceStyle
的新属性,可以更改显示的模式。
/* 设置 `overrideUserInterfaceStyle` 使当前控制器和他的子控件有
一个明确的 `UIUserInterfaceStyle`. 设置之后不会影响程序,或者其他的父视图
默认是 UIUserInterfaceStyleUnspecified<不确定模式,跟随系统模式的变化而变化>
*/
@property (nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle API_AVAILABLE(tvos(13.0), ios(13.0)) API_UNAVAILABLE(watchos);
typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
UIUserInterfaceStyleUnspecified, // 不确定模式,跟随系统模式的变化而变化
UIUserInterfaceStyleLight, // Light模式,跟随系统模式的变化而变化
UIUserInterfaceStyleDark, // Dark模式
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);
如果修改一个VC的模式为UIUserInterfaceStyleDark模式,那么他的子控件,子VC如果不单独设置模式的话,将会和他一样。View同理。
三、颜色适配
完成颜色适配,我们App中的适配工作就差不多完成一大半了。
1、使用系统提供的颜色
系统颜色 Dynamic colors
iOS 13,系统为我们提供了很多的颜色,使用这些颜色,开发者什么都不需要做,系统会自动完成暗黑模式的适配。
1.1、系统颜色
labelColor :文本颜色
secondaryLabelColor : 辅助内容的文本标签颜色
tertiaryLabelColor :三级
linkColor: 超链接标签颜色
separatorColor/opaqueseparatorColor:分隔符(细边框或者分割线)
systembackgroundColor :界面背景色
.........
1.2、动态的灰度颜色
相关的颜色在不同模式下的对比,可以直接参考
https://noahgilmore.com/blog/dark-mode-uicolor-compatibility/
这哥们写的比较全。
1.3、语义化颜色
@property (class, nonatomic, readonly) UIColor *systemBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
/* 2. systemGroupedBackground
* Use this stack for views with grouped content, such as grouped tables and
* platter-based designs. These are like grouped table views, but you may use these
* colors in places where a table view wouldn't make sense.
*/
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
。。。。。。
2、在Assets.xcassets中自定义颜色
不过适配的是iOS11以上
if (@available(iOS 11.0, *)) {
UIColor *color = [UIColor colorNamed:@"LightAndDarkHeaderColor"];
} else {
// Fallback on earlier versions
}
3、使用UIColor新提供的方法
把生成的UIColor对象直接赋值给View的
// 类方法
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 对象方法
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
UIColor *color1 = nil;
if (@available(iOS 13.0, *)) {
color1 = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
return [UIColor redColor];
} else {
return [UIColor greenColor];
}
}];
UIColor *color2 = [[UIColor alloc] initWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
return [UIColor redColor];
} else {
return [UIColor greenColor];
}
}];
self.view.backgroundColor = color1;
} else {
}
self.view.backgroundColor = color1;
二、图片资源适配
1、SF Symbols
苹果在 WWDC19 上引入了 SF Symbols 。SF Symbols是一个巨大的矢量图标库(超过1500),可供开发人员在自己的 App 中使用。
更多可以查看关于 SF Symbols 的download the SF Symbols app
,下载.dmg可以查看全部图标。苹果在自己的应用中使用,也推荐开发者使用。
如果你使用了苹果给开发者提供的 SF Symbols 图标符号库,那么模式切换什么都不用做
if (@available(iOS 13.0, *)) {
UIImage *normalImage = [UIImage systemImageNamed:@"star.fill"];
[btn setImage:normalImage forState:UIControlStateNormal];
}
2、Assets.xcassets 适配图片
切换模式的时候,系统会自动加载不同模式下的图片
self.localImageView.image = [UIImage imageNamed:@"LightAndDarkHeaderImage"];
三、监听当前View或者VC的模式改变
使用- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
回调方法
监听当前层级模式是否发生变化,来修改相关控件的显示样式。
有一些界面元素我们是没法直接用UIColor
提供的新方法进行修改的,需要在模式发生变化的回调中进行修改,比如CALayer
// 这种写法是没法让CALayer跟随模式变化而变化的
if (@available(iOS 13.0, *)) {
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(100, 100, 100, 100);
layer.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
return [UIColor redColor];
} else {
return [UIColor greenColor];
}
}].CGColor;
[self.view.layer addSublayer:layer];
}
- (void)createUI {
if (@available(iOS 13.0, *)) {
self.layerColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
return [UIColor redColor];
} else {
return [UIColor greenColor];
}
}];
self.layer = [CALayer layer];
self.layer.frame = CGRectMake(100, 100, 100, 100);
self.layer.backgroundColor = self.layerColor.CGColor;
[self.view.layer addSublayer:self.layer];
}
}
// 当iOS界面环境发生变化时,系统调用该方法。
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
if (@available(iOS 13.0, *)) {
// 判断当前的颜色是否发生变化,因为屏幕旋转也会走该回调
if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
// 设置layer的背景颜色
self.layer.backgroundColor = self.layerColor.CGColor;
}
}
}
如何调试暗黑模式
1、左图:Xcode中的调试开关,可以调试真机和模拟器
2、右图:真机中的开关
接下来适配我们的项目:
iOS 暗黑模式适配(项目实战篇)