iOS 暗黑模式适配（方法介绍篇）

2024-06-03 04:38
文章标签 模式 方法 介绍 ios 适配 暗黑

本文主要是介绍iOS 暗黑模式适配（方法介绍篇），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

适配目标

根据苹果的设计思路，适配暗黑模式是通过UIKit提供的基础对象进行颜色和图片的控制
image.png
image.png

一些系统提供的控件已经适配了暗黑模式，剩下的就是适配我们自己写的一些控件特性了。

开始适配

一、暂时还未适配
如果你的 App 暂时未适配，或者App界面不适合在暗黑模式下展示。
可以暂时通过在工程的info.plist 中添加UIUserInterfaceStyle配置为Light模式，这样就不会受到系统模式变更的影响了：
image.png

二、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);

image.png
如果修改一个VC的模式为UIUserInterfaceStyleDark模式,那么他的子控件，子VC如果不单独设置模式的话，将会和他一样。View同理。

三、颜色适配

完成颜色适配，我们App中的适配工作就差不多完成一大半了。

1、使用系统提供的颜色

系统颜色 Dynamic colors

iOS 13，系统为我们提供了很多的颜色，使用这些颜色，开发者什么都不需要做，系统会自动完成暗黑模式的适配。

1.1、系统颜色

labelColor :文本颜色
secondaryLabelColor : 辅助内容的文本标签颜色
tertiaryLabelColor ：三级
linkColor: 超链接标签颜色
separatorColor/opaqueseparatorColor：分隔符（细边框或者分割线）
systembackgroundColor ：界面背景色
.........

1.2、动态的灰度颜色
image.png

image.png

相关的颜色在不同模式下的对比，可以直接参考
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中自定义颜色
image.png
不过适配的是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可以查看全部图标。苹果在自己的应用中使用，也推荐开发者使用。
image.png
如果你使用了苹果给开发者提供的 SF Symbols 图标符号库，那么模式切换什么都不用做

if (@available(iOS 13.0, *)) {UIImage *normalImage = [UIImage systemImageNamed:@"star.fill"];[btn setImage:normalImage forState:UIControlStateNormal];
}

可以看到两种模式下图标的颜色不一样.png

2、Assets.xcassets 适配图片

image.png
切换模式的时候，系统会自动加载不同模式下的图片

self.localImageView.image = [UIImage imageNamed:@"LightAndDarkHeaderImage"];

image.png

三、监听当前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、右图：真机中的开关
image.png

这篇关于iOS 暗黑模式适配（方法介绍篇）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1026031。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
MySQL数据库双机热备的配置方法详解

MySQL数据库双机热备的配置方法详解

《MySQL数据库双机热备的配置方法详解》在企业级应用中,数据库的高可用性和数据的安全性是至关重要的,MySQL作为最流行的开源关系型数据库管理系统之一,提供了多种方式来实现高可用性,其中双机热备（M... 目录1. 环境准备1.1 安装mysql1.2 配置MySQL1.2.1 主服务器配置1.2.2 从
阅读更多...
Python版本信息获取方法详解与实战

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1
阅读更多...
Python实现字典转字符串的五种方法

Python实现字典转字符串的五种方法

《Python实现字典转字符串的五种方法》本文介绍了在Python中如何将字典数据结构转换为字符串格式的多种方法,首先可以通过内置的str()函数进行简单转换;其次利用ison.dumps()函数能够... 目录1、使用json模块的dumps方法：2、使用str方法：3、使用循环和字符串拼接：4、使用字符
阅读更多...
Python版本与package版本兼容性检查方法总结

Python版本与package版本兼容性检查方法总结

《Python版本与package版本兼容性检查方法总结》：本文主要介绍Python版本与package版本兼容性检查方法的相关资料,文中提供四种检查方法,分别是pip查询、conda管理、PyP... 目录引言为什么会出现兼容性问题方法一：用 pip 官方命令查询可用版本方法二：conda 管理包环境方法
阅读更多...
Linux云服务器手动配置DNS的方法步骤

Linux云服务器手动配置DNS的方法步骤

《Linux云服务器手动配置DNS的方法步骤》在Linux云服务器上手动配置DNS（域名系统）是确保服务器能够正常解析域名的重要步骤,以下是详细的配置方法,包括系统文件的修改和常见问题的解决方案,需要... 目录1. 为什么需要手动配置 DNS？2. 手动配置 DNS 的方法方法 1：修改 /etc/res
阅读更多...
JavaScript对象转数组的三种方法实现

JavaScript对象转数组的三种方法实现

《JavaScript对象转数组的三种方法实现》本文介绍了在JavaScript中将对象转换为数组的三种实用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友... 目录方法1：使用Object.keys()和Array.map()方法2：使用Object.entr
阅读更多...
SpringBoot中ResponseEntity的使用方法举例详解

SpringBoot中ResponseEntity的使用方法举例详解

《SpringBoot中ResponseEntity的使用方法举例详解》ResponseEntity是Spring的一个用于表示HTTP响应的全功能对象,它可以包含响应的状态码、头信息及响应体内容,下... 目录一、ResponseEntity概述基本特点：二、ResponseEntity的基本用法1. 创
阅读更多...
java中判断json key是否存在的几种方法

java中判断json key是否存在的几种方法

《java中判断jsonkey是否存在的几种方法》在使用Java处理JSON数据时,如何判断某一个key是否存在？本文就来介绍三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目http://www.chinasem.cn录第一种方法是使用 jsONObject 的 has 方法
阅读更多...
java中ssh2执行多条命令的四种方法

java中ssh2执行多条命令的四种方法

《java中ssh2执行多条命令的四种方法》本文主要介绍了java中ssh2执行多条命令的四种方法,包括分号分隔、管道分隔、EOF块、脚本调用,可确保环境配置生效,提升操作效率,具有一定的参考价值,感... 目录1 使用分号隔开2 使用管道符号隔开3 使用写EOF的方式4 使用脚本的方式大家平时有没有遇到自
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2