版本記錄

前言

iOS中有關(guān)視圖控件用戶能看到的都在UIKit框架里面，用戶交互也是通過UIKit進(jìn)行的。感興趣的參考上面幾篇文章。
1. UIKit框架（一） —— UIKit動力學(xué)和移動效果（一）
2. UIKit框架（二） —— UIKit動力學(xué)和移動效果（二）
3. UIKit框架（三） —— UICollectionViewCell的擴(kuò)張效果的實(shí)現(xiàn)（一）
4. UIKit框架（四） —— UICollectionViewCell的擴(kuò)張效果的實(shí)現(xiàn)（二）
5. UIKit框架（五） —— 自定義控件：可重復(fù)使用的滑塊（一）
6. UIKit框架（六） —— 自定義控件：可重復(fù)使用的滑塊（二）
7. UIKit框架（七） —— 動態(tài)尺寸UITableViewCell的實(shí)現(xiàn)（一）
8. UIKit框架（八） —— 動態(tài)尺寸UITableViewCell的實(shí)現(xiàn)（二）
9. UIKit框架（九） —— UICollectionView的數(shù)據(jù)異步預(yù)加載（一）
10. UIKit框架（十） —— UICollectionView的數(shù)據(jù)異步預(yù)加載（二）
11. UIKit框架（十一） —— UICollectionView的重用、選擇和重排序（一）
12. UIKit框架（十二） —— UICollectionView的重用、選擇和重排序（二）
13. UIKit框架（十三） —— 如何創(chuàng)建自己的側(cè)滑式面板導(dǎo)航（一）
14. UIKit框架（十四） —— 如何創(chuàng)建自己的側(cè)滑式面板導(dǎo)航（二）
15. UIKit框架（十五） —— 基于自定義UICollectionViewLayout布局的簡單示例（一）
16. UIKit框架（十六） —— 基于自定義UICollectionViewLayout布局的簡單示例（二）
17. UIKit框架（十七） —— 基于自定義UICollectionViewLayout布局的簡單示例（三）
18. UIKit框架（十八） —— 基于CALayer屬性的一種3D邊欄動畫的實(shí)現(xiàn)（一）
19. UIKit框架（十九） —— 基于CALayer屬性的一種3D邊欄動畫的實(shí)現(xiàn)（二）
20. UIKit框架（二十） —— 基于UILabel跑馬燈類似效果的實(shí)現(xiàn)（一）
21. UIKit框架（二十一） —— UIStackView的使用（一）
22. UIKit框架（二十二） —— 基于UIPresentationController的自定義viewController的轉(zhuǎn)場和展示（一）
23. UIKit框架（二十三） —— 基于UIPresentationController的自定義viewController的轉(zhuǎn)場和展示（二）
24. UIKit框架（二十四） —— 基于UICollectionViews和Drag-Drop在兩個(gè)APP間的使用示例 （一）
25. UIKit框架（二十五） —— 基于UICollectionViews和Drag-Drop在兩個(gè)APP間的使用示例 （二）
26. UIKit框架（二十六） —— UICollectionView的自定義布局 （一）
27. UIKit框架（二十七） —— UICollectionView的自定義布局 （二）
28. UIKit框架（二十八） —— 一個(gè)UISplitViewController的簡單實(shí)用示例 （一）
29. UIKit框架（二十九） —— 一個(gè)UISplitViewController的簡單實(shí)用示例 （二）
30. UIKit框架（三十） —— 基于UICollectionViewCompositionalLayout API的UICollectionViews布局的簡單示例（一）
31. UIKit框架（三十一） —— 基于UICollectionViewCompositionalLayout API的UICollectionViews布局的簡單示例（二）
32. UIKit框架（三十二） —— 替換Peek and Pop交互的基于iOS13的Context Menus（一）
33. UIKit框架（三十三） —— 替換Peek and Pop交互的基于iOS13的Context Menus（二）
34. UIKit框架（三十四） —— Accessibility的使用（一）
35. UIKit框架（三十五） —— Accessibility的使用（二）
36. UIKit框架（三十六） —— UICollectionView UICollectionViewDiffableDataSource的使用（一）
37. UIKit框架（三十七） —— UICollectionView UICollectionViewDiffableDataSource的使用（二）
38. UIKit框架（三十八） —— 基于CollectionView轉(zhuǎn)盤效果的實(shí)現(xiàn)（一）
39. UIKit框架（三十九） —— iOS 13中UISearchController 和 UISearchBar的新更改（一）
40. UIKit框架（四十） —— iOS 13中UISearchController 和 UISearchBar的新更改（二）
41. UIKit框架（四十一） —— 使用協(xié)議構(gòu)建自定義Collection（一）
42. UIKit框架（四十二） —— 使用協(xié)議構(gòu)建自定義Collection（二）
43. UIKit框架（四十三） —— CALayer的簡單實(shí)用示例（一）
44. UIKit框架（四十四） —— CALayer的簡單實(shí)用示例（二）

開始

首先看下主要內(nèi)容：

在本教程中，您將學(xué)習(xí)如何在應(yīng)用程序中添加對黑暗模式的支持，使其在低光照環(huán)境下看起來更好。內(nèi)容來自翻譯 。

接著看下寫作環(huán)境：

Swift 5, iOS 13, Xcode 11

下面就是正文了。

蘋果在2013年推出iOS7的現(xiàn)代扁平化設(shè)計(jì)時(shí)，許多人都反對其用戶界面過白。他們希望使用iOS以前版本中看起來更自然的材料。

在iOS 13出現(xiàn)之前的幾年中，許多應(yīng)用程序都添加了新的顏色主題Dark Mode，以補(bǔ)償系統(tǒng)的亮度。此主題幫助人們在光線較暗的環(huán)境中使用應(yīng)用程序。

幸運(yùn)的是，在iOS13中，Apple決定授予此功能系統(tǒng)級的厚愛。蘋果公司的工程師添加了一個(gè)切換開關(guān)，供用戶在淺色和深色外觀之間切換。他們還更新了所有預(yù)裝的應(yīng)用程序，以尊重用戶的選擇。

也許喬尼·艾夫（Jony Ive）離開時(shí)占據(jù)了所有白色房間！蘋果決定擁抱黑暗模式，那為什么不呢？

在本教程中，您將向Dark Arts添加黑暗模式，這是一個(gè)包含有關(guān)在Hogwarts中Defense Against the Dark Arts的所有老師的信息的應(yīng)用程序。

具體來說，您將介紹如何：

• 1） 使用顏色；系統(tǒng)，語義，動態(tài)，背景和前景。
• 2） 支撐高程級別在黑暗模式下起作用。
• 3） 在light and dark模式下使用其他資源。
• 4） 利用SF Symbols的力量。
• 5） 如果您愿意，請退出暗模式。
• 6） 和更多..

打開本教程的入門項(xiàng)目。 雙擊DarkArts.xcodeproj以Xcode打開項(xiàng)目。

熟悉項(xiàng)目的源代碼和文件結(jié)構(gòu)。

構(gòu)建并運(yùn)行。 您會看到所有Defense Against the Dark Arts老師的列表，這些列表按哈利·波特和朋友們與他們一起學(xué)習(xí)的年份排序。 點(diǎn)擊任何項(xiàng)目以查看更多信息。

該應(yīng)用程序的用戶界面很明亮。 在學(xué)習(xí)本教程時(shí)，將其刪除。

要查看應(yīng)用程序當(dāng)前在黑暗模式Dark Mode下的外觀，請?jiān)谀M器中運(yùn)行該應(yīng)用程序，并按如下所示更改界面樣式。

通過Xcode運(yùn)行應(yīng)用程序時(shí)，一組調(diào)試按鈕會顯示在底部。 單擊Environment Overrides按鈕，將出現(xiàn)一個(gè)彈出窗口。 彈出窗口頂部有一個(gè)Interface Style切換開關(guān)。

現(xiàn)在切換Interface Style開關(guān)，然后單擊Dark。 該應(yīng)用程序?qū)⑷缦滤荆?/p>

不是您所希望的那么暗吧？ 至少導(dǎo)航欄背景切換為黑色。 但是名單列表仍然是白的。

System Colors

采用新主題的最重要方面是色彩。 在iOS 13中，Apple對色彩進(jìn)行了大修，并引入了一些新概念。

只要存在UIKit，它就提供了一些預(yù)定義的顏色，例如.red，.blue和.yellow，您可以在UIColor上進(jìn)行靜態(tài)訪問。

現(xiàn)在有一個(gè)新的調(diào)色板以單詞system開頭，包括.systemRed和.systemBlue。 這些顏色在淺色和深色背景上均提供合適且清晰的陰影。

請參閱Apple Human Interface Guidelines中的此表。 如您所見，每種系統(tǒng)顏色（也稱為tint color）對于明暗模式都有不同的RGB顏色代碼。

在應(yīng)用程序中點(diǎn)擊Alastor Moody。 在詳細(xì)信息屏幕中，教師的霍格沃茨房子的名稱以該房子的旗幟顏色顯示。 例如，Alastor Moody來自Hufflepuff，因此標(biāo)記為黃色。

您可能看不到房屋名稱，因?yàn)轭伾桥f的.yellow。 它不能適應(yīng)在淺色和深色背景上看起來不錯(cuò)的情況，但是您很快就會解決。

打開TeacherDetailViewController.swift。 在viewDidLoad（）中，設(shè)置houseLabel的文本顏色。

將所有顏色更改為其各自的system變體：

switch teacher.house {
case .gryffindor:
  houseLabel.textColor = .systemRed
case .hufflepuff:
  houseLabel.textColor = .systemYellow
case .ravenclaw:
  houseLabel.textColor = .systemBlue
case .slytherin:
  houseLabel.textColor = .systemGreen
}

構(gòu)建并運(yùn)行。 再次點(diǎn)擊Alastor Moody。 現(xiàn)在，您可以看到他來自赫奇帕奇(Hufflepuff)。

Semantic Colors

除了新引入的系統(tǒng)顏色外，iOS 13還提供了語義(semantically)定義的顏色。語義顏色(semantic color)傳達(dá)其目的，而不是其外觀或顏色值。因此，語義顏色也會自動適應(yīng)黑暗模式。

您不必知道這些顏色的真實(shí)原始值。相反，您可以根據(jù)意圖使用它們，并像訪問其他顏色一樣訪問它們：通過對UIColor進(jìn)行靜態(tài)調(diào)用。語義顏色的示例包括.label，.separator，.link，.systemBackground和.systemFill。

1. Background Colors

iOS定義了兩組背景色：system和grouped。每個(gè)變量都包含主要，次要和第三級變體，可幫助您傳達(dá)信息的層次結(jié)構(gòu)。

通常，當(dāng)您具有分組表格視圖(grouped table view)時(shí)，請使用分組(grouped set)的背景顏色集。否則，請使用系統(tǒng)設(shè)置(system set)的背景色。

對于這兩種背景色，您都可以使用變體通過以下方式顯示層次結(jié)構(gòu)：

• 主要用于整體視圖。
• 次要的，用于在整體視圖中對內(nèi)容或元素進(jìn)行分組。
• 第三級，用于將內(nèi)容或元素分組到第二級元素中。

要查看它們的實(shí)際效果，您現(xiàn)在將為應(yīng)用添加背景色-這次使用情節(jié)提要。

打開Main.storyboard。在Dark Arts場景中，將Table View和TeacherCell的Background設(shè)置為System Background Color。

構(gòu)建并運(yùn)行以在亮和暗模式下查看效果。 如您所見，列表的背景顏色會根據(jù)外觀自動更改，但是在Dark Mode下看不到文本。

接下來，您將對其進(jìn)行修復(fù)。

2. Foreground Colors

對于前景內(nèi)容，例如label，還可以使用各種級別的語義顏色來傳達(dá)內(nèi)容的重要性。 分級顏色的示例包括.label，.secondaryLabel，.tertiaryLabel。

再次打開Main.storyboard。 然后在Dark Arts場景中，將Color Name Label設(shè)置為Label Color。

構(gòu)建并運(yùn)行。 在明暗模式下查看老師的名字。

專業(yè)提示：您可以在亮和暗模式之間切換模擬器，而無需返回Xcode。 在模擬器中，選擇Features ? Toggle Appearance — Shift-Command-A在它們之間進(jìn)行切換。

真好！只需進(jìn)行少量更改，您的應(yīng)用程序現(xiàn)在在支持黑暗模式方面將變得更加出色。

但是，您可以擁有更多！

Elevation

Elevation是z軸上兩層用戶界面layers之間的距離。在light模式下，當(dāng)用戶界面的一層layer位于另一層之上時(shí)，開發(fā)人員可以使用陰影來增強(qiáng)深度感知。

但這在Dark Mode下不起作用。雖然黑色陰影不夠明顯，但深色圖層的較淺陰影看起來并不正確。

為了解決此問題，暗模式使用兩組背景顏色：基色和高色(base and elevated)。基色較暗，因此背景界面看起來已退去。相反，高色較淺，這使得前景界面看起來突出。

您可以在Modal表中看到一個(gè)很好的示例，說明了這一概念。

打開Main.storyboard。在Teacher Detail View Controller中，將根視圖的Background設(shè)置為System Background Color。這與您在先前步驟中為列表背景設(shè)置的值完全相同。

在這里時(shí)，請同時(shí)更改以下內(nèi)容：

• 首先，將“名稱顏色”設(shè)置為Label Color。
• 其次，將Taught at Hogwarts的Color設(shè)置為Tertiary Label Color。
• 第三，將Years at Hogwarts的Color設(shè)置為Secondary Label Color。

構(gòu)建并運(yùn)行。 點(diǎn)擊一行以查看詳細(xì)信息屏幕。

查看后面view controller的背景色。以及在前面的詳細(xì)信息屏幕的背景色。盡管將它們都設(shè)置為相同的.systemBackgroundColor，但它們看起來卻有所不同。在黑暗模式下更明顯。

請記住，應(yīng)用程序中的列表在黑暗模式下具有.systemBackgroundColor的純黑色背景。但是在詳細(xì)信息屏幕中，當(dāng)以模態(tài)形式顯示在其父級頂部時(shí)，它具有深灰色的背景色。此行為是正常現(xiàn)象，無需任何額外努力即可提供給您。

黑暗模式是動態(tài)的。這意味著，當(dāng)界面（如popover or modal sheet）位于前景中時(shí)，背景顏色會自動從base變?yōu)?code>elevated。

Dynamic Colors

這些新引入的系統(tǒng)顏色和語義顏色很有用，但并非在所有情況下都有效。例如，如果您需要使用品牌顏色或設(shè)計(jì)要求使用Apple提供的顏色以外的顏色，它們將對您沒有幫助。

在使用Dark Mode之前，您可以通過多種方式合并自定義顏色。使用UIColor初始化程序時(shí)，開發(fā)人員經(jīng)常使用代碼或Asset Catalogs。幸運(yùn)的是，Apple進(jìn)行了更新，將暗模式考慮在內(nèi)。

您將首先解決編碼方法。

1. UITraitCollection

但是，在繼續(xù)之前，您首先需要了解UITraitCollection的概念。

iOS通過UITraitEnvironment協(xié)議的traitCollection屬性公開了任何應(yīng)用程序的界面環(huán)境。 UIWindow，UIViewController和UIView都是符合此協(xié)議的類。

您可以在iOS應(yīng)用中訪問許多用戶界面特征，例如尺寸類別，強(qiáng)制觸摸功能和樣式。 通過考慮這些屬性和相關(guān)方法，可以使用戶界面適應(yīng)系統(tǒng)的建議。

黑暗模式是由trait collections的魔法處理的。 這是一個(gè)新特性，接下來您將學(xué)習(xí)如何使用它。

2. UIColor Dynamic Provider

要在代碼中構(gòu)造顏色，您將使用基于閉包的初始化程序。

打開TeacherDetailViewController.swift。 替換viewDidLoad（）中的這一行代碼：

headerBackgroundView.backgroundColor = .white

用下面的：

headerBackgroundView.backgroundColor =
  // 1
  UIColor { traitCollection in
    // 2
    switch traitCollection.userInterfaceStyle {
    case .dark:
      // 3
      return UIColor(white: 0.3, alpha: 1.0)
    default:
      // 4
      return UIColor(white: 0.7, alpha: 1.0)
    }
  }

這是一個(gè)細(xì)分：

• 1） 您調(diào)用新的UIColor初始化程序，該初始化程序使用單個(gè)輸入UITraitCollection類型進(jìn)行的閉包。 iOS會調(diào)用此塊，并根據(jù)應(yīng)用的用戶界面樣式為您提供特定的顏色。 如果用戶更改了系統(tǒng)界面樣式，則將自動再次調(diào)用該回調(diào)，并將相應(yīng)地更改顏色。
• 2） 您打開traitCollection的userInterfaceStyle屬性以了解應(yīng)用程序處于哪種外觀模式。
• 3） 如果應(yīng)用程序處于Dark Mode，它將返回更深的灰色陰影。
• 4） 如果應(yīng)用程序不在Dark Mode下，它將返回較淺的灰色陰影。

構(gòu)建并運(yùn)行。 點(diǎn)擊一行以查看詳細(xì)信息屏幕的標(biāo)題。 然后切換到暗模式并查看反應(yīng)的變化。

如果您不想在Interface Builder中使用顏色，則可以在代碼中創(chuàng)建顏色。 如果您計(jì)劃使用Interface Builder，則需要Asset Catalog。

3. Asset Catalog

從iOS 11開始，您可以將顏色保存在Asset Catalogs中，并在代碼和Interface Builder中使用它們。 您可以通過簡單的調(diào)整使顏色動態(tài)。

打開Assets.xcassets并查看colors文件夾。 在屬性檢查器的新Appearances部分下，您可以添加顏色的變體。 最簡單的選擇是Any, Dark，您可以在其中為深色外觀提供新的顏色。 對于colors，您會發(fā)現(xiàn)一種動態(tài)顏色，稱為thumbnail-border。 對于黑暗模式，它提供綠色；對于明亮模式，它提供灰色。

您問在哪里使用這種顏色？ 您很快就會看到。

打開Main.storyboard。 在Dark Arts場景中，有一個(gè)Border View，它充當(dāng)教師頭像上的stroke。 當(dāng)前，其Background設(shè)置為靜態(tài)顏色：rw-dark。 由于您不會留下最小的細(xì)節(jié)，因此請將其更改為thumbnail-border。

現(xiàn)在，構(gòu)建并運(yùn)行。 了解教師在黑暗模式下如何pop更多。

Dynamic Images

您可能已經(jīng)在詳細(xì)信息頁面的底部注意到了一幅精美的霍格沃茨畫作。 如果應(yīng)用程序處于黑暗模式時(shí)在夜間顯示霍格沃茨，那會不會很酷？

好消息！ 您可以使用dynamic images來做到這一點(diǎn)。

遵循用于在圖像的Assets.xcassets中向顏色添加變體的相同過程。

打開Assets.xcassets。 您會看到兩張名為霍格沃茨hogwarts和霍格沃茨之夜hogwarts-night的圖像。 單擊霍格沃茨hogwarts。

在“屬性”檢查器中，單擊Appearances，然后選擇Any, Dark。 出現(xiàn)一個(gè)新的slot。

右鍵單擊hogwarts-night，然后單擊Show in Finder。 將圖像從Finder拖到您在霍格沃茨中創(chuàng)建的空白位置slot。 現(xiàn)在刪除hogwarts-night，因?yàn)閮蓚€(gè)圖像的名稱都為hogwarts。

構(gòu)建并運(yùn)行。 享受霍格沃茨的美麗月光，但遠(yuǎn)離Lupin。

1. SFSymbols

蘋果公司為iOS 13推出的最酷的功能之一是SFSympols，這是一整套的一致且高度可配置的圖像。 這些符號根據(jù)外觀，大小和重量可以很好地縮放。 最重要的是，您還可以在應(yīng)用程序中免費(fèi)使用它們。

他們還準(zhǔn)備好黑暗模式。 您可以將它們著色為任何動態(tài)顏色，并且它們的適應(yīng)效果很好。 除非您的應(yīng)用程序需要特定的圖像和資源，否則SFSymbols可以滿足您的插圖需求。

是時(shí)候使用SFSymbols在房屋名稱旁邊添加房屋圖標(biāo)，向詳細(xì)信息屏幕添加一些元素了。

打開TeacherDetailViewController.swift。 在viewDidLoad（）的最后一行，添加：

houseImageView.image = UIImage(systemName: "house.fill")

這行代碼使用了新的UIImage初始化程序，該初始化程序使用SFSymbols目錄中的符號名稱。

構(gòu)建并運(yùn)行。 看到漂亮的小房子圖標(biāo)。 它不像霍格沃茨的公共休息室那么漂亮，但是它可以完成工作。

房子在明亮模式下很漂亮，但它卻是黑色的，在黑暗模式下很難看清。 您知道如何解決該問題！

在您剛剛插入的行上方，有一段代碼設(shè)置了houseImageView的tintColor。

houseImageView.tintColor = .black

替換為

houseImageView.tintColor = houseLabel.textColor

此行將houseImageView的tintColor設(shè)置為houseLabel的textColor。 請記住，您為該label使用了系統(tǒng)顏色，因此它可以動態(tài)適應(yīng)設(shè)備外觀。

構(gòu)建并運(yùn)行。 切換外觀模式時(shí)，現(xiàn)在看到主頁圖標(biāo)會切換顏色。

想知道這是怎么發(fā)生的？ 這是SFSymbols的魔力。 請記住，它們可以很好地?cái)U(kuò)展并適應(yīng)您的需求。 您可以根據(jù)需要使用任何大小或顏色的它們。

注意：Apple為SFSymbols提供了配套的Mac應(yīng)用程序。 您可以在此處here下載并瀏覽目錄。 您在UIColor的初始值設(shè)定項(xiàng)中使用的字符串名稱來自此應(yīng)用程序。

Opting Out of Dark Mode

黑暗模式比以往更受歡迎。您可以在全系統(tǒng)范圍內(nèi)將設(shè)備設(shè)置為暗模式，現(xiàn)在所有Apple和許多第三方應(yīng)用程序都將其包括在內(nèi)。雖然您可以選擇退出黑暗模式，但對于喜歡在黑暗中進(jìn)行所有操作的用戶而言，可能會造成眼睛疲勞。我們非常鼓勵(lì)您在選擇不支持黑暗模式之前重新考慮。

但是，如果您確定要退出暗模式，則可以選擇以下幾種方法：

• 1） 通過使用Info.plist中的UIUserInterfaceStyle鍵為整個(gè)應(yīng)用程序關(guān)閉暗模式。
• 2） 在應(yīng)用程序的UIWindow上設(shè)置界面樣式，這通常意味著整個(gè)應(yīng)用程序。
• 3） 設(shè)置特定UIView或UIViewController的界面樣式。

您將為應(yīng)用程序一一設(shè)置。

注意：由于最終項(xiàng)目違反了本教程的目的，因此最終項(xiàng)目將保持黑暗狀態(tài)。另外，在瀏覽下面的每個(gè)選項(xiàng)時(shí)，請記住在嘗試新方法之前刪除用于退出暗模式的代碼。

1. Opting Out with Info.plist

打開Info.plist。然后添加一個(gè)名為UIUserInterfaceStyle的鍵并將其設(shè)置為Light。

構(gòu)建并運(yùn)行該應(yīng)用程序。一切都像在黑暗模式下什么也沒做一樣。

在繼續(xù)下一步之前，請記住要刪除上述key。

2. Opting Out in UIWindow

打開SceneDelegate.swift。 替換：

var window: UIWindow?

為

var window: UIWindow? {
  didSet {
    window?.overrideUserInterfaceStyle = .light
  }
}

由于此應(yīng)用使用storyboards，因此系統(tǒng)會設(shè)置window。

此代碼塊設(shè)置Swift屬性觀察器觀察window。 一旦設(shè)置了此屬性，就可以將界面樣式覆蓋為.light。 由于此應(yīng)用程序僅使用一個(gè)窗口，因此覆蓋窗口上的樣式會使該應(yīng)用程序像在Info.plist中設(shè)置該鍵一樣起作用。

構(gòu)建并運(yùn)行以確認(rèn)。

在繼續(xù)下一步之前，請記住刪除上面的代碼。

3. Opting Out in UIViewController

打開TeacherDetailViewController.swift。 您將使該視圖控制器成為不遵守黑暗模式的叛逆者。

在viewDidLoad（）中，在對super.viewDidLoad（）的調(diào)用之后，立即插入：

overrideUserInterfaceStyle = .light

該行覆蓋此特定視圖控制器的樣式。

構(gòu)建并運(yùn)行。 看看黑暗模式！ 列表頁面為深色，而詳細(xì)信息頁面為淺。

后記

本篇主要講述了支持DarkMode的簡單實(shí)用示例，感興趣的給個(gè)贊或者關(guān)注~~~