关于新增iOS 13 Dark Mode API的那些事。。。

Xcode11 设置LauchImage:(坑的很~~~苹果这臭小子)🤣🤣🤣🤣,不过据说好像2020年4月会强制使用LauchScreen.storyboard.


7A04FC61B8A753A1B2F2F4CE5BB74230.jpg

2020年:禁止使用uiwebview,小伙们注意了。


IMG_3090.JPG

UIViewController新增:

overrideUserInterfaceStyle

/* Set overrideUserInterfaceStyle to cause this view controller and its children to have a specific UIUserInterfaceStyle. This does not affect the application or any parent view controllers.
*/
/ *设置overrideUserInterfaceStyle以使该视图控制器及其子控件具有特定的UIUserInterfaceStyle。 这不会影响应用程序或任何父视图控制器。
*/
@property (nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle ; // Defaults to UIUserInterfaceStyleUnspecified
The user interface style adopted by the view controller and all of its children.
视图控制器及其所有子节点采用的用户界面样式。

Use this property to force the view controller to always adopt a light or dark interface style. The default value of this property is UIUserInterfaceStyleUnspecified, which causes the view controller to inherit the interface style from the system or a parent view controller. If you assign a different value, the new style applies to the view controller, its entire view hierarchy, and any embedded child view controllers.

使用此属性可强制视图控制器始终采用浅色或深色界面样式。 此属性的默认值为UIUserInterfaceStyleUnspecified,这会使视图控制器从系统或父视图控制器继承接口样式。 如果指定其他值,则新样式将应用于视图控制器,其整个视图层次结构以及任何嵌入式子视图控制器。

该属性为枚举类型:
值如下:
typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
UIUserInterfaceStyleUnspecified,
UIUserInterfaceStyleLight, ///正常模式
UIUserInterfaceStyleDark, /// 暗黑模式
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchOS);

UIUserInterfaceStyleUnspecified<===>Choose this option when you want to follow the system's interface style.如果要按照系统的界面样式选择此选项。

UIUserInterfaceStyleLight<===>The light interface style.iOS13之前默认的系统风格(白色的)

UIUserInterfaceStyleDark<===>The dark interface style.黑暗的界面风格。

例如:强制设置当前控制器为暗黑模式:
self.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;

UIColor 中更新了若干颜色属性对暗黑模式进行支持;

pragma mark Foreground colors

/* Foreground colors for static text and related elements.
静态文本和相关元素的前景颜色
*/
@property (class, nonatomic, readonly) UIColor *labelColor;
The color for text labels containing primary content.
包含主要内容的文本标签的颜色。

@property (class, nonatomic, readonly) UIColor *secondaryLabelColor;
The color for text labels containing secondary content.
包含辅助内容的文本标签的颜色。

@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor;
The color for text labels containing tertiary content.
包含第三级内容的文本标签的颜色。

@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor;
The color for text labels containing quaternary content.
包含四元内容的文本标签的颜色。

/* Foreground color for standard system links.
*/
/ *标准系统链接的前景色。
*/
@property (class, nonatomic, readonly) UIColor *linkColor;
The color for links.
超链接标签的颜色

/* Foreground color for placeholder text in controls or text fields or text views.
*/
/ *控件或文本字段或文本视图中占位符文本的前景色。
*/
@property (class, nonatomic, readonly) UIColor *placeholderTextColor;
The color for placeholder text in controls or text views.
控件或文本视图中占位符文本的颜色。

/* Foreground colors for separators (thin border or divider lines).separatorColor may be partially transparent, so it can go on top of any content. opaqueSeparatorColor is intended to look similar, but is guaranteed to be opaque, so it will completely cover anything behind it. Depending on the situation, you may need one or the other.
*/
/ *分隔符的前景颜色(细边框或分隔线)。
*separatorColor可以是部分透明的,因此它可以在任何内容之上。
*opaqueSeparatorColor旨在看起来相似,但保证是不透明的,所以它会
*完全覆盖它背后的任何东西。 根据具体情况,您可能需要其中一个。
*/
@property (class, nonatomic, readonly) UIColor *separatorColor;
The color for thin borders or divider lines that allows some underlying content to be visible.
细边框或分隔线的颜色,允许一些底层内容可见。
讨论:
This color may be partially transparent to allow the underlying content to show through. It adapts to the underlying trait environment.
此颜色可以是部分透明的,以允许底层内容显示。 它适应潜在的特质环境。

@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor;
The color for borders or divider lines that hide any underlying content.
隐藏任何基础内容的边框或分隔线的颜色。
Discussion
This color is always opaque. It adapts to the underlying trait environment.
这种颜色总是不透明的。 它适应潜在的特质环境。

pragma mark Background colors--背景颜色

/* We provide two design systems (also known as "stacks") for structuring an iOS app's backgrounds.
Each stack has three "levels" of background colors. The first color is intended to be the
main background, farthest back. Secondary and tertiary colors are layered on top of the main background, when appropriate.
Inside of a discrete piece of UI, choose a stack, then use colors from that stack. We do not recommend mixing and matching background colors between stacks. The foreground colors above are designed to work in both stacks.1. systemBackground
Use this stack for views with standard table views, and designs which have a white primary background in light mode.*/
/ 我们提供两个设计系统(也称为“堆栈”)来构建iOS应用程序的背景。
每个堆栈有三个“级别”的背景颜色。 第一种颜色是打算主要背景,最后面。二级和三级颜色分层在顶部适当时的主要背景。在一个独立的UI内部,选择一个堆栈,然后使用该堆栈中的颜色。我们不建议在堆栈之间混合和匹配背景颜色。上面的前景颜色设计用于两个堆栈。 1. systemBackground 将此堆栈用于具有标准表视图的视图和具有白色的设计灯光模式下的主要背景。
*/
@property (class, nonatomic, readonly) UIColor *systemBackgroundColor;
The color for the main background of your interface.
界面主背景的颜色。

@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor;
The color for content layered on top of the main background.
内容的颜色分层在主背景之上。

@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor;
The color for content layered on top of secondary backgrounds.
内容的颜色分层在次要背景之上。

/* 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.
*/
/ * 2. systemGroupedBackground
*将此堆栈用于具有分组内容的视图,例如分组表和
*基于拼盘的设计。 这些类似于分组表视图,但您可以使用这些视图
*表格视图无意义的地方的颜色。
*/
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor;
The color for the main background of your grouped interface.
分组界面主背景的颜色。

@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor;
The color for content layered on top of the main background of your grouped interface.
内容的颜色分层在分组界面的主背景之上。

@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor;
The color for content layered on top of secondary backgrounds of your grouped interface.
内容的颜色分层在分组界面的辅助背景之上。

pragma mark Fill colors填充颜色

/* Fill colors for UI elements.
These are meant to be used over the background colors, since their alpha component is less than 1.
systemFillColor is appropriate for filling thin and small shapes.
Example: The track of a slider.
*/
/ *填充UI元素的颜色。
这些用于背景颜色,因为它们的alpha分量小于1。
systemFillColor适合填充细小形状。
示例:滑块的轨迹。
*/
@property (class, nonatomic, readonly) UIColor *systemFillColor; An overlay fill color for thin and small shapes.
薄和小形状的叠加填充颜色。
Discussion

Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
Use this color to fill thin or small shapes, such as the track of a slider.
对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
使用此颜色填充细小形状,例如滑块的轨迹。

/* secondarySystemFillColor is appropriate for filling medium-size shapes.
Example: The background of a switch.
*/
/ * secondarySystemFillColor适用于填充中等大小的形状。
示例:开关的背景。
*/
@property (class, nonatomic, readonly) UIColor *secondarySystemFillColor;
An overlay fill color for medium-size shapes.
中等大小形状的叠加填充颜色。
Discussion
Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
Use this color to fill medium-size shapes, such as the background of a switch.
讨论
对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
使用此颜色填充中等大小的形状,例如开关的背景。

/* tertiarySystemFillColor is appropriate for filling large shapes.
Examples: Input fields, search bars, buttons.
*/
/ * tertiarySystemFillColor适合填充大型形状。
示例:输入字段,搜索栏,按钮。
*/
@property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor;
An overlay fill color for large shapes.
大型形状的叠加填充颜色。
Discussion
Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
Use this color to fill large shapes, such as input fields, search bars, or buttons.
讨论
对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
使用此颜色填充大型形状,例如输入字段,搜索栏或按钮。

/* quaternarySystemFillColor is appropriate for filling large areas containing complex content.
Example: Expanded table cells.
*/
/ * quaternarySystemFillColor适用于填充包含复杂内容的大区域。
示例:扩展的表格单元格。
*/
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor;
An overlay fill color for large areas containing complex content.
包含复杂内容的大区域的叠加填充颜色。
Discussion
Use system fill colors for items situated on top of an existing background color. System fill colors incorporate transparency to allow the background color to show through.
Use this color to fill large areas that contain complex content, such as an expanded table cell.
讨论:
对位于现有背景颜色顶部的项目使用系统填充颜色。 系统填充颜色包含透明度,以允许显示背景颜色。
使用此颜色填充包含复杂内容的大区域,例如展开的表格单元格。

如何监听模式变化(暗黑模式和浅色模式)

系统为我们提供了一个回调方法,当 light dark 切换时就会触发这个方法。

- (void) traitCollectionDidChange: (UITraitCollection *) previousTraitCollection {
    [super traitCollectionDidChange: previousTraitCollection];
    if ((self.traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass)
        || (self.traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass)) {
        // your custom implementation here
        NSLog(@"traitCollectionDidChange");
    }
}

改变当前模式

self.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;

需要给每一个 Controller 和 View 都设置一遍吗?

答案是不需要,我们先来看一张图。


16b3ccb241c318b7.jpeg

当我们设置一个 controller 为 dark 之后,这个 controller 下的 view,都会是 dark mode,但是后续推出的 controller 仍然是跟随系统的样式。
因为苹果对 overrideUserInterfaceStyle 属性的解释是这样的。
当我们在一个普通的 controlle, view 上重写这个属性,只会影响当前的视图,不会影响前面的 controller 和后续推出的 controller。
但是当我们在 window.rootViewController 上设置 overrideUserInterfaceStyle 的时候,就会影响 rootViewController 下所有的 controller, view,包括后续推出的 controller。
我们回到刚刚的问题上,如果 App 打开夜间模式,那么很简单我们只需要设置 rootViewController 的 overrideUserInterfaceStyle 属性就好了。

======================================
***全局关闭黑暗模式

方式一 配置plist文件: 在Info.plist 文件中,添加一行如下
UIUserInterfaceStyle Light
======================================

Xcode 11更改了 lauchImage 设置


image.png

资料:
https://juejin.im/post/5cf6276be51d455a68490b26
WWDC2019 适配暗黑模式PPT (https://devstreaming-cdn.apple.com/videos/wwdc/2019/214iqtpuhih53fw2/214/214_implementing_dark_mode_on_ios.pdf?dl=1
https://github.com/Dongxi729/Implementing-Dark-Mode-on-iOS-PDF-
WWDC2019暗黑模式代码(https://developer.apple.com/documentation/uikit/appearance_customization/adopting_ios_dark_mode
https://github.com/Dongxi729/AdoptingIOSDarkMode
WWDC2019
Implementing Dark Mode on iOS
https://developer.apple.com/videos/play/wwdc2019/214/
视频流地址:(貌似需要翻墙才能看,,,):
https://devstreaming-cdn.apple.com/videos/wwdc/2019/214iqtpuhih53fw2/214/hls_vod_mvp.m3u8

其他博主好文链接:
https://juejin.im/post/5d8c8709e51d457806260ea9

iOS 13适配:
https://juejin.im/post/5d8af88ef265da5b6e0a23ac

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,096评论 1 32
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,951评论 6 13
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,472评论 1 45
  • 总有不舍离开树枝的叶子, 也有玩的忘记回家的孩子, 还有永远那关不上的窗户, 仿佛都在和我们诉说: 那久远的过去,...
    萧蕤乐园阅读 362评论 0 4