ios适配暗黑模式-图片、颜色
一、适配Dark mode:颜色适配、图片适配
其实适配Dark模式,开发者主要从颜色和图片两个方面进行适配,我们不需要关心切换模式时改如何操作,这些都是系统帮我们实现,我们只需要做好适应两套模式的资源就好了
颜色适配:
系统自带
ios13之前UIColor只能表示一种颜色,而从ios13开始后UIColor可以表示一个动态的颜色,在Light Mode和Dark Mode可以分别设置不同的颜色
系统提供的一些动态颜色:@property (class, nonatomic, readonly) UIColor *systemBrownColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *systemIndigoColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *systemGray2Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *systemGray3Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *systemGray4Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *systemGray5Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *systemGray6Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *labelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *secondaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *tertiaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *quaternaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *linkColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *placeholderTextColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *separatorColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); @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); @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); @property (class, nonatomic, readonly) UIColor *systemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *secondarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos); @property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
使用:
用户和ios13之前一样,使用系统提供的这些动态颜色,就不需要其他的适配操作。[self.view setBackgroundColor:[UIColor systemBackgroundColor]]; [self.titleLabel setTextColor:[UIColor labelColor]]; [self.detailLabel setTextColor:[UIColor placeholderTextColor]];
自定义动态Color
在实际开发过程,系统提供的这些颜色还远远不够,因此我们需要创建更多的动态颜色,初始化动态UIColor方法:(一个是类方法,一个是实例方法)
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos); - (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
这两个方法要求传一个block进去
当系统在LightMode和DarkMode之间相互切换时就会触发此回调
这个block会返回一个UITraitCollection类
我们需要使用其属性userInterfaceStyle,它是一个枚举类型,会告诉我们当前是LightMode还是DarkMode使用
UIColor *dyColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trainCollection) {if ([trainCollection userInterfaceStyle] == UIUserInterfaceStyleLight) {return [UIColor redColor];}else {return [UIColor greenColor];}}];[self.bgView setBackgroundColor:dyColor];
图片适配
图片资源需使用Assets.xcassets管理,点击选中图片,右边修改Appearances为,Any,Dark,然后会出现两种样式的图片,一个是Any Appearance(表示浅色模式下的图片),一个是Dark Appearance(表示深色模式下的图片),代码中也不需要做其他处理,改变手机模式,系统会自动变化。
注意:同一工程内多个Assets文件在打包后,就会生成一个Assets.car 文件,所以要保证Assets内资源文件的名字不能相同
二、获取当前模式(Light or Dark),以防做一些特殊处理
Trait Collections只会在 UIKit 体系中有效,所有与 CGColor 有关的设置,需要额外处理,业务中与之相关的主要有下列场景:
1. 阴影色值
2. 富文本颜色
3. CALayer 颜色
处理这些的时候,还是需要通过view.traitCollection先获得当前的用户界面模式,然后做出相应的调整。
示例:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {super.traitCollectionDidChange(previousTraitCollection)if #available(iOS 13.0, *) {if self.traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {// 处理相应的颜色button.border(radius: 20, width: 1.0, color: UIColor.color(lightColor: .blue, darkColor: .yellow))}}}
三、其他内容
1、监听模式切换
有时我们需要监听系统模式的变化,并作出响应
那么我们就需要在需要监听的viewController中,重写下列函数
// 注意:参数为变化前的traitCollection
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection;// 判断两个UITraitCollection对象是否不同
- (BOOL)hasDifferentColorAppearanceComparedToTraitCollection:(UITraitCollection *)traitCollection;
ios适配暗黑模式-图片、颜色相关推荐
- iOS 适配暗黑模式
#import <UIKit/UIKit.h> @interface UIColor (DarkColorChange)/*** 十六进制字符串** @param color 16进制色值 ...
- iOS 13适配——暗黑模式
暗黑模式介绍 Implementing Dark Mode on iOS How To Adopt Dark Mode In Your iOS App Adopting iOS Dark Mode S ...
- iOS微信7.0.12发布!除了适配暗黑模式,还有这些新功能!
前几天,"微信不适配深色模式就会被下架"的消息闹得沸沸扬扬~最后,腾讯微信团队官宣"与苹果达成合作,共同探索微信在iOS系统的暗黑模式体验,有望在下一个版本中上线!&qu ...
- iOS制作暗黑模式教程
0.前言 随着iOS13的普及,大多数的APP都已经适配了暗黑模式,网络上关于暗黑模式适配的文章也很多,基本看几篇就能解决掉iOS13暗黑模式的适配.我看了大部分的文章,基本都是对暗黑模式通用的介绍和 ...
- 用tailwindcss适配暗黑模式竟如此简单
接着上面一篇<从Nuxt文档里发现色彩的配搭诀窍>的内容,本文是我继续对 Nuxt/Content 的探索.当我研究它的色彩系统的时候,我还发现它还提供了暗黑模式,这也算是色彩系统的一种吧 ...
- 微信7.0.10内测更新!除了适配暗黑模式,还有这些实用功能!
微信7.0.10内测更新,其实本没打算写这篇文章~ 因为,我自己在使用魅族手机,早都可以愉快地使用暗黑模式了~对于,这次更新适配暗黑模式,并没有那么兴奋! 不过,我还是第一时间下载更新体验一下,说说有 ...
- 苹果iOS 13暗黑模式概念图曝光 将于iOS 13.1版本更新
iOS的暗黑模式一直是广大用户迫切关注的功能之一.此前在iOS 12发布之际,很多用户都非常期待苹果可以推出基于iOS的深色主题模式,网友们也将这种模式称为"暗黑模式".iOS 1 ...
- H5内嵌App适配暗黑模式
情况:项目是vue做的H5页面,需要嵌入到App中适配暗黑模式,但是H5需要有个加载的过程,就会出现一闪而过的白色(未渲染完成) 解决方法:在public/index.html中添加CSS媒体查询,代 ...
- iOS - 暗黑模式图片、颜色的适配
1.图片的适配 以一张图片,图片名字为1为例 拖进工程后,选中该图片,展开右侧边栏,把appearances属性展开,选中Any,Dark 把对应图片拖进去,适配完成 2.颜色的适配 // MARK: ...
最新文章
- python3 arp局域网ip
- springcloud 服务与服务之间实现灰度发布 基于Aspect
- linux数据库服务器的配置与管理,实验七_Linux_MySQL数据库服务器配置与管理
- vsftpd虚拟用户和本地用户不能共存的解决方法
- windows系统上使用openssh client连接远程Linux服务器的日志分析
- 员工价值——如何体现自己价值,如何被自己的领导认可
- DevExpress.XtraGrid.Views.Grid.GridView 选中行焦点的滚动条的位置
- 搜索的php mysql代码生成器_四款强大的PHP代码生成器
- MySQl中文1001无标题_Mysql中字段类型不一致导致索引无效的处理办法
- 由底层和逻辑说开去--c++之引用的深入剖析
- mentohust找不到服务器 重启认证,mentohust官方使用说明(全+转)
- 深入浅出程序设计竞赛(基础篇)
- 美国卡内基梅隆大学计算机排名,卡内基梅隆大学世界排名
- Python爬虫获取豆瓣电影TOP250
- 【产业互联网周报】网信办:不得利用算法影响网络舆论;华为任命丁耘为企业BG总裁;上海市布局数字经济、元宇宙等新赛道...
- 端午安康,用python给你画盘粽子~啾啾
- 一统iOS跟macOS,未来办公靠手机?
- ETCD数据库源码分析——Cluster membership changes日志
- python爬虫之一(2):爬取网页小说(圣墟)
- BT TWS方案开发感悟