iOS 13适配——暗黑模式

暗黑模式介绍
Implementing Dark Mode on iOS
How To Adopt Dark Mode In Your iOS App
Adopting iOS Dark Mode
Supporting Dark Mode in Your Interface

iOS13有什么亮点?

iOS 13.0正式版发布以来,最大的亮点还是新增的支持Dark Mode(暗黑模式)。

暗黑模式可以有效地舒缓眼睛?

我觉得更多的是心理上的安慰。
原理上来说暗黑模式仅仅是关闭了背景亮度,同时调整了可视内容的颜色,比如暗黑模式下文字以白色为主等等。它实际上并没有改变屏幕的“频闪”问题,当你长时间看屏幕的时候依旧会有视觉疲劳的症状。
当然,暗黑模式也让用户在暗黑的环境下更友好地体验产品,能让主题元素更加凸显。
另外,据说暗黑模式下可以让拥有OLED 屏幕的iPhone更加省电,电池续航更久。因为OLED 屏幕在暗黑模式下主要通过直接熄灭来达到纯黑效果,因此可以有效的降低耗电量。

App 要做暗黑的适配吗?

首先,目前iPhone自带软件基本上适配了暗黑模式,开启暗黑模式后,打开软件都是黑底白字。
其次,对于开发者而言,苹果也提供了相应的 API 接口,以供开发者使用。
最后,貌似没有强制要求,建议开发者根据自己的APP 类型来选择是否兼容暗黑模式。

如果自己的 App不想适配暗黑模式,要怎么做?

如果要使app一直保持黑色或者白色模式,可以在info.plist文件里面设置属性User Interface Style值为Light或者Dark
在这里插入图片描述

注意:属性值LightDark需要首字母大写,否则无效。

App暗黑模式的适配怎么做?

适配包含两方面,颜色适配和图片适配。

颜色适配要怎么做?

方法1
使用系统颜色systemBackgroundColor,浅色模式下显示白色,深色模式下显示黑色;存在问题,只能显示白色或黑色。

self.view.backgroundColor = UIColor.systemBackgroundColor;

或使用系统颜色labelColor,浅色模式下显示黑色,深色模式下显示白色;
存在问题,只能显示黑色或白色。

label.textColor = UIColor.labelColor;

常用的系统动态模式颜色:文本颜色labelColor、辅助内容的文本标签颜色secondaryLabelColor、三级tertiaryLabelColor、超链接标签颜色linkColor、分隔符(细边框或者分割线)separatorColoropaqueseparatorColor、界面背景色systembackgroundColor等。

方法2
根据模式,实时显示自定义颜色。
iOS13系统已经提供了相应的 API用于处理颜色,如下所示:

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
// 设置自定义颜色
UIColor *textColor = UIColor.greenColor;
if (@available(iOS 13.0, *)) {
	textColor = [UIColor colorWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) {
		if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
			return UIColor.orangeColor;
		}
		return UIColor.greenColor;
	}];
}
// 显示自定义颜色
label.textColor = textColor;

方法3
根据模式,实时监听修改颜色

// 使用示例,如 layer 对应的颜色适配需要使用监听才有效
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
    if (@available(iOS 13.0, *)) {
 		if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
 			// iOS13 暗黑模式
 			label.layer.borderColor = UIColor.redColor.CGColor;
 		} else {
 			// iOS13 普通模式
 			label.layer.borderColor = UIColor.yellowColor.CGColor;
 		}
 	} else {

	}
}

除了代码实现,有没有其他方式可以实现颜色的暗黑适配呀?

前面3种方法都是直接通过代码来实现,还有第4种方法是通过在Assets.xcassets里定义颜色来实现。

方法4
步骤1:选择Assets.xcassets,显示后鼠标点击右键出现菜单,选择New Color Set
步骤2:创建后,选中并重命名,如textColor,后进行操作显示Appearances,选择属性Any, Dark,最后分别设置两种颜色
步骤3:通过函数+ (nullable UIColor *)colorNamed:(NSString *)name获取颜色,并进行赋值使用

label.textColor = [UIColor colorNamed:@"textColor"];

设置如图示
在这里插入图片描述

Apperances设置方法:选中该资源文件, 打开 Xcode ->View ->Inspectors ->Show Attributes Inspectors (或者Option+Command+4)视图,将 Apperances 选项 改为Any,Dark

我的 App 适配了暗黑模式,但是我想App 里的有些界面不要暗黑模式的适配,有什么办法吗?

若想要某个UI 保持白色模式,或黑色模式,可以设置属性overrideUserInterfaceStyle 的值为UIUserInterfaceStyleLight或值为UIUserInterfaceStyleDark

前面告诉了我颜色的暗黑模式适配,那图片适配的暗黑模式适配又是怎么实现的?

方法1
通过代码实现

注意:图标资源可以保存在Assets.xcassets,也可以直接在项目中创建资源目录保存。

// 定义不同模式的图标
UIImage *image = [UIImage imageNamed:@"lightName"];
if (@available(iOS 13.0, *)) {
	UIImage *imgs = [UIImage imageNamed:lightName inBundle:nil compatibleWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]];
	[imgs.imageAsset registerImage:[UIImage imageNamed:@"darkName"] withTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark]];
	image = [imgs.imageAsset imageWithTraitCollection:UITraitCollection.currentTraitCollection];
}
// 获取并使用图标
imageView.image = image;

方法2
通过设置Assets.xcassets实现

注意:该方法时,图标资源必须保存在Assets.xcassets

步骤1 设置图标,并重命名为icon,如图示
在这里插入图片描述
步骤2 使用

imageView.image = [UIImage imageNamed:@"icon"];

介绍完了颜色,图片在暗黑模式下的适配,给我总结下呗

既是总结,也是强调,在暗黑模式的适配过程中的注意事项:
1、layer 颜色的适配,只能使用回调方法- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection监听处理;
2、可以在Info.plist添加属性User Interface Style并设值为LightDark,使 app 保持白色模式,或黑色模式;
3、可以使用设置属性overrideUserInterfaceStyle值为UIUserInterfaceStyleLightUIUserInterfaceStyleDark,使某个UI 保持为白色模式,或黑色模式;

另外,补充下开发中可以通过调用UITraitCollection.currentTraitCollection.userInterfaceStyle获取当前模式,以便可以根据不同的模式执行不同的操作。
如:

if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
 	NSLog(@"DarkMode");
} else {
 	NSLog(@"LightMode");
}

以上纯属个人认知,不足之外,还请大家留言共同学习讨论。

发布了804 篇原创文章 · 获赞 135 · 访问量 142万+

猜你喜欢

转载自blog.csdn.net/potato512/article/details/104805528