iOS13适配深色模式(Dark Mode)
- 原文博客地址: iOS13适配深色模式(Dark Mode)
- 好像大概也许是一年前,
Mac OS
系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的 - 终于, 随着
iPhone11
等新手机的发售,iOS 13
系统也正式发布了, 伴随着手机版的深色模式也出现在了大众视野 - 我们这些
iOS
程序猿也有事情做了, 原有项目适配iOS13
系统, 适配Dark Mode
深色模式 - 虽然现在并没有要求强制适配
Dark Mode
, 但是DarK
适配却也迫在眉睫
Apps on iOS 13 are expected to support dark mode Use system colors and materials Create your own dynamic colors and images Leverage flexible infrastructure
获取当前模式
提供两种方式设置手机当前外观模式
- 设置 --> 显示与亮度
- 控制中心, 长按亮度调节按钮
获取当前模式
我们需要选获取到当前出于什么模式, 在根据不同的模式进行适配, iOS 13
中新增了获取当前模式的API
Swift
// 获取当前模式
let currentMode = UITraitCollection.current.userInterfaceStyle
if (currentMode == .dark) {print("深色模式")
} else if (currentMode == .light) {print("浅色模式")
} else {print("未知模式")
}open var userInterfaceStyle: UIUserInterfaceStyle { get } // 所有模式
public enum UIUserInterfaceStyle : Int {// 未指明的case unspecified// 浅色模式case light// 深色模式case dark
}
OC语言
if (@available(iOS 13.0, *)) {UIUserInterfaceStyle mode = UITraitCollection.currentTraitCollection.userInterfaceStyle;if (mode == UIUserInterfaceStyleDark) {NSLog(@"深色模式");} else if (mode == UIUserInterfaceStyleLight) {NSLog(@"浅色模式");} else {NSLog(@"未知模式");}
}// 各种枚举值
typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {UIUserInterfaceStyleUnspecified,UIUserInterfaceStyleLight,UIUserInterfaceStyleDark,
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);
监听系统模式的变化
在iOS13
系统中, UIViewController
遵循了两个协议: UITraitEnvironment
和UIContentContainer
协议
在UITraitEnvironment
协议中, 为我们提供了一个监听当前模式变化的方法
@protocol UITraitEnvironment <NSObject>
// 当前模式
@property (nonatomic, readonly) UITraitCollection *traitCollection API_AVAILABLE(ios(8.0));// 重写该方法监听模式的改变
- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
@end
public protocol UITraitEnvironment : NSObjectProtocol {// 当前模式@available(iOS 8.0, *)var traitCollection: UITraitCollection { get }// 重写该方法监听模式的改变@available(iOS 8.0, *)func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}// 使用方法
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {super.traitCollectionDidChange(previousTraitCollection)// 每次模式改变的时候, 这里都会执行print("模式改变了")
}
颜色相关适配
- 不同模式的适配主要涉及颜色和图片两个方面的适配
- 其中颜色适配, 包括相关背景色和字体颜色
- 当系统模式切换的时候, 我们不需要如何操作, 系统会自动渲染页面, 只需要做好不同模式的颜色和图片即可
UIColor
iOS13
之前UIColor
只能表示一种颜色,从iOS13
开始UIColor
是一个动态的颜色,在不同模式下可以分别代表不同的颜色- 下面是
iOS13
系统提供的动态颜色种类, 使用以下颜色值, 在模式切换时, 则不需要做特殊处理
@interface UIColor (UIColorSystemColors)
#pragma mark System colors@property (class, nonatomic, readonly) UIColor *systemRedColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGreenColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemBlueColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemOrangeColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemYellowColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemPinkColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemPurpleColor API_AVAILABLE(ios(9.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemTealColor API_AVAILABLE(ios(7.0), tvos(9.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemIndigoColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 灰色种类, 在Light模式下, systemGray6Color更趋向于白色
@property (class, nonatomic, readonly) UIColor *systemGrayColor API_AVAILABLE(ios(7.0), tvos(9.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);#pragma mark Foreground colors
@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);#pragma mark Background colors
@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);#pragma mark Fill colors
@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);#pragma mark Other colors
// 这两个是非动态颜色值
@property(class, nonatomic, readonly) UIColor *lightTextColor API_UNAVAILABLE(tvos); // for a dark background
@property(class, nonatomic, readonly) UIColor *darkTextColor API_UNAVAILABLE(tvos); // for a light background@property(class, nonatomic, readonly) UIColor *groupTableViewBackgroundColor API_DEPRECATED_WITH_REPLACEMENT("systemGroupedBackgroundColor", ios(2.0, 13.0), tvos(13.0, 13.0));
@property(class, nonatomic, readonly) UIColor *viewFlipsideBackgroundColor API_DEPRECATED("", ios(2.0, 7.0)) API_UNAVAILABLE(tvos);
@property(class, nonatomic, readonly) UIColor *scrollViewTexturedBackgroundColor API_DEPRECATED("", ios(3.2, 7.0)) API_UNAVAILABLE(tvos);
@property(class, nonatomic, readonly) UIColor *underPageBackgroundColor API_DEPRECATED("", ios(5.0, 7.0)) API_UNAVAILABLE(tvos);@end
- 上面系统提供的这些颜色种类, 根本不能满足我们正常开发的需要, 大部分的颜色值也都是自定义
- 系统也为我们提供了创建自定义颜色的方法
@available(iOS 13.0, *)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)
在OC中
+ (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);
- 上面的方法接受一个闭包(
block
) - 当系统在
LightMode
和DarkMode
之间相互切换时就会自动触发此回调 - 回调返回一个
UITraitCollection
, 可根据改对象判断是那种模式
fileprivate func getColor() -> UIColor {return UIColor { (collection) -> UIColor inif (collection.userInterfaceStyle == .dark) {return UIColor.red}return UIColor.green}
}
除了上述两个方法之外, UIColor
还增加了一个实例方法
// 通过当前traitCollection得到对应UIColor
@available(iOS 13.0, *)
open func resolvedColor(with traitCollection: UITraitCollection) -> UIColor
CGColor
UIColor
只是设置背景色和文字颜色的类, 可以动态的设置- 可是如果是需要设置类似边框颜色等属性时, 又该如何处理呢
- 设置上述边框属性, 需要用到
CGColor
类, 但是在iOS13
中CGColor
并不是动态颜色值, 只能表示一种颜色 - 在监听模式改变的方法中
traitCollectionDidChange
, 根据不同的模式进行处理
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {super.traitCollectionDidChange(previousTraitCollection)// 每次模式改变的时候, 这里都会执行if (previousTraitCollection?.userInterfaceStyle == .dark) {redView.layer.borderColor = UIColor.red.cgColor} else {redView.layer.borderColor = UIColor.green.cgColor}
}
图片适配
- 在
iOS
中, 图片基本都是放在Assets.xcassets
里面, 所以图片的适配, 我们就相对麻烦一些了 - 正常情况下都是下面这中处理方式
- 需要适配不同模式的情况下, 需要两套不同的图片, 并做如下设置
- 在设置
Appearances
时, 我们选择Any, Dark
就可以了(只需要适配深色模式和非深色模式)
适配相关
当前页面模式
- 原项目中如果没有适配
Dark Mode
, 当你切换到Dark Mode
后, 你可能会发现, 有些部分页面的颜色自动适配了 - 未设置过背景颜色或者文字颜色的组件, 在
Dark Mode
模式下, 就是黑色的 - 这里我们就需要真对该单独
App
强制设置成Light Mode
模式
// 设置改属性, 只会影响当前的视图, 不会影响前面的controller和后续present的controller
@available(iOS 13.0, *)
open var overrideUserInterfaceStyle: UIUserInterfaceStyle// 使用示例
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {super.traitCollectionDidChange(previousTraitCollection)// 每次模式改变的时候, 这里都会执行if (previousTraitCollection?.userInterfaceStyle == .dark) {// 在Dark模式下, 强制改成Light模式overrideUserInterfaceStyle = .light}
}
强制项目的显示模式
- 上面这种方式只能针对某一个页面修改, 如果需要对整个项目禁用
Dark
模式 - 可以通过修改
window
的overrideUserInterfaceStyle
属性 - 在
Xcode11
创建的项目中,window
从AppDelegate
移到SceneDelegate
中, 添加下面这段代码, 就会做到全局修改显示模式
let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
scene?.window?.overrideUserInterfaceStyle = .light
在之前的项目中, 可以在AppDelegate
设置如下代码
window.overrideUserInterfaceStyle = .light
我创建的简单项目, 上述代码的确会强制改变当前的模式, 但是状态栏的显示不会被修改, 不知道是不是漏了什么
终极方案
- 需要在
info.plist
文件中添加User Interface Style
配置, 并设置为Light
<key>UIUserInterfaceStyle</key>
<string>Light</string>
问题又来了, 即使做了上面的修改, 在React Native
中, 状态栏的依然是根据不同的模式显示不同的颜色, 该如何处理嘞?
Status Bar更新
在iOS13
中苹果对于Status Bar
也做了部分修改, 在iOS13
之前
public enum UIStatusBarStyle : Int {case `default` // 默认文字黑色@available(iOS 7.0, *)case lightContent // 文字白色
}
从iOS13
开始UIStatusBarStyle
一共有三种状态
public enum UIStatusBarStyle : Int {case `default` // 自动选择黑色或白色@available(iOS 7.0, *)case lightContent // 文字白色@available(iOS 13.0, *)case darkContent // 文字黑色
}
在React Native
的代码中, 设置状态栏的颜色为黑色, 代码如下
<StatusBar barStyle={'dark-content'} />
- 上面这段代码在
iOS13
系统的手机中是无效的 - 虽然上面的代码中设置了
dark-content
模式, 但是在iOS
原生代码中dark-content
实际是UIStatusBarStyleDefault
- 在文件
RCTStatusBarManager.m
中
RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{@"default": @(UIStatusBarStyleDefault),@"light-content": @(UIStatusBarStyleLightContent),@"dark-content": @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);
修改上面代码即可
@"dark-content": @(@available(iOS 13.0, *) ? UIStatusBarStyleDarkContent : UIStatusBarStyleDefault),
iOS13 其他更新
苹果登录
Sign In with Apple will be available for beta testing this summer. It will be required as an option for users in apps that support third-party sign-in when it is commercially available later this year.
- 如果
APP
支持三方登陆(Facbook
、Google
、微信、QQ
、支付宝等),就必须支持苹果登陆,且要放前边 - 至于
Apple
登录按钮的样式, 建议支持使用Apple
提供的按钮样式,已经适配各类设备, 可参考Sign In with Apple
LaunchImage
即将被废弃的
LaunchImage
- 从
iOS 8
的时候,苹果就引入了LaunchScreen
,我们可以设置LaunchScreen
来作为启动页。 - 现在你还可以使用
LaunchImage
来设置启动图, 但是随着苹果设备尺寸越来越多, 适配显然相对麻烦一些 - 使用
LaunchScreen
的话,情况会变的很简单,LaunchScreen
是支持AutoLayout
和SizeClass
的,所以适配各种屏幕都不在话下。 - ⚠️从2020年4月开始,所有
App
将必须提供LaunchScreen
,而LaunchImage
即将退出历史舞台
UIWebView
'UIWebView' was deprecated in iOS 12.0: No longer supported; please adopt WKWebView.
从
iOS 13
开始也不再支持UIWebView
控件了, 尽快替换成WKWebView
吧
@available(iOS, introduced: 2.0, deprecated: 12.0, message: "No longer supported; please adopt WKWebView.")
open class UIWebView : UIView, NSCoding, UIScrollViewDelegate { }
iOS13适配深色模式(Dark Mode)相关推荐
- iOS13适配深色模式(Dark Mode)总结
iOS13适配深色模式(Dark Mode)总结 好像大概也许是一年前, Mac OS系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的 终于,随着iPhone11等新手机的发售, iOS ...
- Flutter适配深色模式(DarkMode)
1.瞎叨叨 也不知道写点什么,本来想写写Flutter的集成测试.因为前一阵子给flutter_deer写了一套,不过感觉也没啥内容,写不了几句话就放弃了.(其实本篇内容也不多...) 那就写写最近在 ...
- 实现页面适配_微信公众号文章页面适配深色模式
最近安卓微信7.0.10正式版发布,更新过后,很多用户发现,之前在测试版中对系统深色模式的适配功能被取消了,小伙伴们对此很是不满,好在Android 10系统手机用户占比很少,影响范围还不是很大,并且 ...
- android开发适配深色模式,手机不支持深色模式,如何用软件解决深色模式的问题?(附有系统全局深色模式实现方法...
本帖最后由 巷子口的你 于 2020-8-8 07:57 编辑 1.92允许通过设置为助手应用来饮捷切频深色模式(设置入口一般为系统默认应用-助手和语音输人, MIU需要设置为语音助手)提醒:稳定模式 ...
- android自动切换暗色,Android 适配深色模式的总结
Android Q 推出了深色模式,其实 Android 9 就有了,部分厂商小米,三星就在系统 Android 9 加入了深色模式的开关. Android 提供了一套夜间模式主题,继承 Theme. ...
- iOS开发 iOS13禁用深色模式
全局禁用深色模式(暗黑模式) 在Info.plist中增加UIUserInterfaceStyle,值为Light,如下 <key>UIUserInterfaceStyle</key ...
- mac os上onenote深色模式dark mode如何开启 2019
首先确保你的系统是深色模式 然后在onenote的偏好设置中"启用试验性功能" 最后,重启onenote,然后你就会看见深色了
- 谷歌(chrome)浏览器设置成深色模式(dark)
1.在谷歌浏览器网址输入chrome://flags/ 2. 进入下面界面 3.搜索关键字dark 4.重启即可生效
- SVG公众号排版『适配深色模式图片二维码可识别可点击』模板代码
二维码可识别图片不弹出 <!DOCTYPE html> <html> <head><meta charset="UTF-8" />& ...
最新文章
- 创业思维 - Qunar的故事
- 【直播回放】150分钟详解模型压缩理论和实践
- webBrowser强制在本窗口打开,禁止在新窗口打开
- datatables 展开 折叠_更成熟的三星Z Fold2 折叠屏发展迈出关键一步
- P2375-[NOI2014]动物园【KMP,字符串】
- 大数据:互联网大规模数据挖掘与分布式处理
- 标记 (TAG) 您的 k8s 集群资源
- 手把手教你使用FineUI开发一个b/s结构的取送货管理信息系统(附源码+视频教程(第6节))...
- (转)淘淘商城系列——导入商品数据到索引库
- AWS 与 Elastic 矛盾再升级!
- 130712周赛(CF)
- Warez出品的精品动画
- 做webgl遇到的两个坑
- java多线程视频转码_java 后台视频转码、压缩工具
- python 波形包络线_Python信号分析之包络线(上包络线/下包络线)计算和绘制
- 分数计算器java报告_20182307 2019-2020-1 《数据结构与面向对象程序设计》实验四报告...
- 手机屏幕如何投屏到电脑上(Windows10)
- 《斩魔问道》突破传统玩法,实时强战PK,爆裂高清画质的仙侠手游巨作
- 禁用win10笔记本键盘
- Couldnt load module input, no modules loaded
热门文章
- 电容笔和触控笔有什么区别?电容笔十大品牌排行
- smarty中使用php函数,在smarty模板中使用PHP函数的方法
- vs 2008 快捷操作 及重置
- OpenGL4.0学习3.1--初始化OpenGL 4.0
- 酷比魔方可以PHP编程么,尝试在安装了x86安卓系统的设备酷比魔方i7手写版上手工添加Magisk --准备工做...
- 损失2亿美元后续,Euler正与黑客进行链上谈判
- 游戏中红点提醒模块设计
- 轻量级实时语义分割:Guided Upsampling Network for Real-Time Semantic Segmentation
- 阿里云牵手战旗直播:让500万人进入1个直播房间
- 苹果手机计算机软件不见了怎么办,iphone4手机的设置图标不见了怎么解决