iOS 暗黑模式适配(方法介绍篇)

2024-06-03 04:38

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

适配目标

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

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

开始适配

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

二、overrideUserInterfaceStyle属性
在 iOS 13中,UIViewUIViewControllerUIWindow 有了一个 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

相关文章

PHP轻松处理千万行数据的方法详解

《PHP轻松处理千万行数据的方法详解》说到处理大数据集,PHP通常不是第一个想到的语言,但如果你曾经需要处理数百万行数据而不让服务器崩溃或内存耗尽,你就会知道PHP用对了工具有多强大,下面小编就... 目录问题的本质php 中的数据流处理:为什么必不可少生成器:内存高效的迭代方式流量控制:避免系统过载一次性

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

JavaScript中的高级调试方法全攻略指南

《JavaScript中的高级调试方法全攻略指南》什么是高级JavaScript调试技巧,它比console.log有何优势,如何使用断点调试定位问题,通过本文,我们将深入解答这些问题,带您从理论到实... 目录观点与案例结合观点1观点2观点3观点4观点5高级调试技巧详解实战案例断点调试:定位变量错误性能分

Python中 try / except / else / finally 异常处理方法详解

《Python中try/except/else/finally异常处理方法详解》:本文主要介绍Python中try/except/else/finally异常处理方法的相关资料,涵... 目录1. 基本结构2. 各部分的作用tryexceptelsefinally3. 执行流程总结4. 常见用法(1)多个e

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》:本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言:为什么"相等"判断如此重要?方法1:使用some()+includes()(适合小数组)方法2

504 Gateway Timeout网关超时的根源及完美解决方法

《504GatewayTimeout网关超时的根源及完美解决方法》在日常开发和运维过程中,504GatewayTimeout错误是常见的网络问题之一,尤其是在使用反向代理(如Nginx)或... 目录引言为什么会出现 504 错误?1. 探索 504 Gateway Timeout 错误的根源 1.1 后端

Java中HashMap的用法详细介绍

《Java中HashMap的用法详细介绍》JavaHashMap是一种高效的数据结构,用于存储键值对,它是基于哈希表实现的,提供快速的插入、删除和查找操作,:本文主要介绍Java中HashMap... 目录一.HashMap1.基本概念2.底层数据结构:3.HashCode和equals方法为什么重写Has

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

python 线程池顺序执行的方法实现

《python线程池顺序执行的方法实现》在Python中,线程池默认是并发执行任务的,但若需要实现任务的顺序执行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录方案一:强制单线程(伪顺序执行)方案二:按提交顺序获取结果方案三:任务间依赖控制方案四:队列顺序消

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口:SpringApplication.run()2. SpringApplicat