關(guān)于新增iOS 13 Dark Mode API的那些事。。。

Xcode11 設(shè)置LauchImage:(坑的很~~~蘋果這臭小子)????????,不過(guò)據(jù)說(shuō)好像2020年4月會(huì)強(qiáng)制使用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.
*/
/ *設(shè)置overrideUserInterfaceStyle以使該視圖控制器及其子控件具有特定的UIUserInterfaceStyle。 這不會(huì)影響應(yīng)用程序或任何父視圖控制器。
*/
@property (nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle ; // Defaults to UIUserInterfaceStyleUnspecified
The user interface style adopted by the view controller and all of its children.
視圖控制器及其所有子節(jié)點(diǎn)采用的用戶界面樣式。

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.

使用此屬性可強(qiáng)制視圖控制器始終采用淺色或深色界面樣式。 此屬性的默認(rèn)值為UIUserInterfaceStyleUnspecified,這會(huì)使視圖控制器從系統(tǒng)或父視圖控制器繼承接口樣式。 如果指定其他值,則新樣式將應(yīng)用于視圖控制器,其整個(gè)視圖層次結(jié)構(gòu)以及任何嵌入式子視圖控制器。

該屬性為枚舉類型:
值如下:
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.如果要按照系統(tǒng)的界面樣式選擇此選項(xiàng)。

UIUserInterfaceStyleLight<===>The light interface style.iOS13之前默認(rèn)的系統(tǒng)風(fēng)格(白色的)

UIUserInterfaceStyleDark<===>The dark interface style.黑暗的界面風(fēng)格。

例如:強(qiáng)制設(shè)置當(dāng)前控制器為暗黑模式:
self.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;

UIColor 中更新了若干顏色屬性對(duì)暗黑模式進(jìn)行支持;

pragma mark Foreground colors

/* Foreground colors for static text and related elements.
靜態(tài)文本和相關(guān)元素的前景顏色
*/
@property (class, nonatomic, readonly) UIColor *labelColor;
The color for text labels containing primary content.
包含主要內(nèi)容的文本標(biāo)簽的顏色。

@property (class, nonatomic, readonly) UIColor *secondaryLabelColor;
The color for text labels containing secondary content.
包含輔助內(nèi)容的文本標(biāo)簽的顏色。

@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor;
The color for text labels containing tertiary content.
包含第三級(jí)內(nèi)容的文本標(biāo)簽的顏色。

@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor;
The color for text labels containing quaternary content.
包含四元內(nèi)容的文本標(biāo)簽的顏色。

/* Foreground color for standard system links.
*/
/ *標(biāo)準(zhǔn)系統(tǒng)鏈接的前景色。
*/
@property (class, nonatomic, readonly) UIColor *linkColor;
The color for links.
超鏈接標(biāo)簽的顏色

/* 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.
*/
/ *分隔符的前景顏色(細(xì)邊框或分隔線)。
*separatorColor可以是部分透明的,因此它可以在任何內(nèi)容之上。
*opaqueSeparatorColor旨在看起來(lái)相似,但保證是不透明的,所以它會(huì)
*完全覆蓋它背后的任何東西。 根據(jù)具體情況,您可能需要其中一個(gè)。
*/
@property (class, nonatomic, readonly) UIColor *separatorColor;
The color for thin borders or divider lines that allows some underlying content to be visible.
細(xì)邊框或分隔線的顏色,允許一些底層內(nèi)容可見(jiàn)。
討論:
This color may be partially transparent to allow the underlying content to show through. It adapts to the underlying trait environment.
此顏色可以是部分透明的,以允許底層內(nèi)容顯示。 它適應(yīng)潛在的特質(zhì)環(huán)境。

@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor;
The color for borders or divider lines that hide any underlying content.
隱藏任何基礎(chǔ)內(nèi)容的邊框或分隔線的顏色。
Discussion
This color is always opaque. It adapts to the underlying trait environment.
這種顏色總是不透明的。 它適應(yīng)潛在的特質(zhì)環(huán)境。

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.*/
/ 我們提供兩個(gè)設(shè)計(jì)系統(tǒng)(也稱為“堆棧”)來(lái)構(gòu)建iOS應(yīng)用程序的背景。
每個(gè)堆棧有三個(gè)“級(jí)別”的背景顏色。 第一種顏色是打算主要背景,最后面。二級(jí)和三級(jí)顏色分層在頂部適當(dāng)時(shí)的主要背景。在一個(gè)獨(dú)立的UI內(nèi)部,選擇一個(gè)堆棧,然后使用該堆棧中的顏色。我們不建議在堆棧之間混合和匹配背景顏色。上面的前景顏色設(shè)計(jì)用于兩個(gè)堆棧。 1. systemBackground 將此堆棧用于具有標(biāo)準(zhǔn)表視圖的視圖和具有白色的設(shè)計(jì)燈光模式下的主要背景。
*/
@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.
內(nèi)容的顏色分層在主背景之上。

@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor;
The color for content layered on top of secondary backgrounds.
內(nèi)容的顏色分層在次要背景之上。

/* 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
*將此堆棧用于具有分組內(nèi)容的視圖,例如分組表和
*基于拼盤的設(shè)計(jì)。 這些類似于分組表視圖,但您可以使用這些視圖
*表格視圖無(wú)意義的地方的顏色。
*/
@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.
內(nèi)容的顏色分層在分組界面的主背景之上。

@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor;
The color for content layered on top of secondary backgrounds of your grouped interface.
內(nèi)容的顏色分層在分組界面的輔助背景之上。

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元素的顏色。
這些用于背景顏色,因?yàn)樗鼈兊腶lpha分量小于1。
systemFillColor適合填充細(xì)小形狀。
示例:滑塊的軌跡。
*/
@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.
對(duì)位于現(xiàn)有背景顏色頂部的項(xiàng)目使用系統(tǒng)填充顏色。 系統(tǒng)填充顏色包含透明度,以允許顯示背景顏色。
使用此顏色填充細(xì)小形狀,例如滑塊的軌跡。

/* secondarySystemFillColor is appropriate for filling medium-size shapes.
Example: The background of a switch.
*/
/ * secondarySystemFillColor適用于填充中等大小的形狀。
示例:開(kāi)關(guān)的背景。
*/
@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.
討論
對(duì)位于現(xiàn)有背景顏色頂部的項(xiàng)目使用系統(tǒng)填充顏色。 系統(tǒng)填充顏色包含透明度,以允許顯示背景顏色。
使用此顏色填充中等大小的形狀,例如開(kāi)關(guān)的背景。

/* 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.
討論
對(duì)位于現(xiàn)有背景顏色頂部的項(xiàng)目使用系統(tǒng)填充顏色。 系統(tǒng)填充顏色包含透明度,以允許顯示背景顏色。
使用此顏色填充大型形狀,例如輸入字段,搜索欄或按鈕。

/* quaternarySystemFillColor is appropriate for filling large areas containing complex content.
Example: Expanded table cells.
*/
/ * quaternarySystemFillColor適用于填充包含復(fù)雜內(nèi)容的大區(qū)域。
示例:擴(kuò)展的表格單元格。
*/
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor;
An overlay fill color for large areas containing complex content.
包含復(fù)雜內(nèi)容的大區(qū)域的疊加填充顏色。
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.
討論:
對(duì)位于現(xiàn)有背景顏色頂部的項(xiàng)目使用系統(tǒng)填充顏色。 系統(tǒng)填充顏色包含透明度,以允許顯示背景顏色。
使用此顏色填充包含復(fù)雜內(nèi)容的大區(qū)域,例如展開(kāi)的表格單元格。

如何監(jiān)聽(tīng)模式變化(暗黑模式和淺色模式)

系統(tǒng)為我們提供了一個(gè)回調(diào)方法,當(dāng) light dark 切換時(shí)就會(huì)觸發(fā)這個(gè)方法。

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

改變當(dāng)前模式

self.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;

需要給每一個(gè) Controller 和 View 都設(shè)置一遍嗎?

答案是不需要,我們先來(lái)看一張圖。


16b3ccb241c318b7.jpeg

當(dāng)我們?cè)O(shè)置一個(gè) controller 為 dark 之后,這個(gè) controller 下的 view,都會(huì)是 dark mode,但是后續(xù)推出的 controller 仍然是跟隨系統(tǒng)的樣式。
因?yàn)樘O果對(duì) overrideUserInterfaceStyle 屬性的解釋是這樣的。
當(dāng)我們?cè)谝粋€(gè)普通的 controlle, view 上重寫這個(gè)屬性,只會(huì)影響當(dāng)前的視圖,不會(huì)影響前面的 controller 和后續(xù)推出的 controller。
但是當(dāng)我們?cè)?window.rootViewController 上設(shè)置 overrideUserInterfaceStyle 的時(shí)候,就會(huì)影響 rootViewController 下所有的 controller, view,包括后續(xù)推出的 controller。
我們回到剛剛的問(wèn)題上,如果 App 打開(kāi)夜間模式,那么很簡(jiǎn)單我們只需要設(shè)置 rootViewController 的 overrideUserInterfaceStyle 屬性就好了。

======================================
***全局關(guān)閉黑暗模式

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

Xcode 11更改了 lauchImage 設(shè)置


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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒(méi)有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,619評(píng)論 1 32
  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說(shuō)閱讀 12,298評(píng)論 6 13
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,090評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,770評(píng)論 1 45
  • 總有不舍離開(kāi)樹(shù)枝的葉子, 也有玩的忘記回家的孩子, 還有永遠(yuǎn)那關(guān)不上的窗戶, 仿佛都在和我們?cè)V說(shuō): 那久遠(yuǎn)的過(guò)去,...
    蕭蕤樂(lè)園閱讀 417評(píng)論 0 4

友情鏈接更多精彩內(nèi)容