iOS13-適配夜間樣式/深色外觀(Dark Mode)

作者：RayJiang97
連結：https://www.jianshu.com/p/e6616e44cf60

WWDC 19 上釋出了 iOS 13，我們來看下如何適配 DarkMode。

首先我們來看下效果圖

效果圖.gif

DarkMode 主要從兩個方面去適配，顏色和圖片

顏色適配

iOS 13 下 UIColor  增加了一個初始化方法，我們可以用這個初始化方法完成 DarkMode 的適配

@available(iOS 13.0, *)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

這個方法要求傳一個閉包進去，當系統從 LightMode 和 DarkMode 之間切換的時候就會觸發這個回呼。

這個閉包傳回一個 UITraitCollection 類，我們要用這個類的 userInterfaceStyle 屬性。

userInterfaceStyle 是一個列舉，宣告如下

@available(iOS 12.0, *)
public enum UIUserInterfaceStyle : Int {
    case unspecified
    case light
    case dark
}

這個列舉會告訴我們當前是 LightMode or DarkMode

現在我們建立兩個 UIColor 並賦值給view.backgroundColor 和 label，程式碼如下

let backgroundColor = UIColor { (traitCollection) -> UIColor in
    switch traitCollection.userInterfaceStyle {
    case .light:
        return UIColor.white
    case .dark:
        return UIColor.black
    default:
        fatalError()
    }
}
view.backgroundColor = backgroundColor

let labelColor = UIColor { (traitCollection) -> UIColor in
    switch traitCollection.userInterfaceStyle {
    case .light:
        return UIColor.black
    case .dark:
        return UIColor.white
    default:
        fatalError()
    }
}
label.textColor = labelColor

現在，我們做完了背景色和文字顏色的適配，接下來我們看看圖片如何適配

圖片適配

開啟 Assets.xcassets

把圖片拖拽進去，我們可以看到這樣的頁面

然後我們在右側工具欄中點選最後一欄，點選 Appearances 選擇 Any, Dark，如圖所示

我們把 DarkMode 的圖片拖進去，如圖所示

最後我們加上 ImageView 的程式碼

imageView.image = UIImage(named: "icon")

現在我們就已經完成顏色和圖片的 DarkMode 適配，是不是很簡單呢 (手動滑稽)

如何獲取當前樣式 (Light or Dark)

我們可以看到，不管是顏色還是圖片，適配都是系統完成的，我們不用關心現在是什麼樣的樣式。

但是在某些場景下，我們可能會有根據當前樣式來做一些其他適配的需求，這時我們就需要知道現在什麼樣式。

我們可以在 UIViewController 或 UIView 中呼叫 traitCollection.userInterfaceStyle來獲取當前樣式，程式碼如下

switch traitCollection.userInterfaceStyle {
case .unspecified:
    print("unspecified")
case .light:
    print("light")
case .dark:
    print("dark")
}

為什麼要強調當前呢，因為預設情況下使用 traitCollection.userInterfaceStyle 屬性就能獲取到當前系統的樣式。

但是我們可以透過 overrideUserInterfaceStyle 屬性強制設定 UIViewController 或 UIView 的樣式，程式碼如下

overrideUserInterfaceStyle = .dark
print(traitCollection.userInterfaceStyle)  // dark

我們可以看到設定了 overrideUserInterfaceStyle 之後，traitCollection.userInterfaceStyle 就是設定後的樣式了。
註意：overrideUserInterfaceStyle 預設值為 unspecified ，所以一定要用 traitCollection.userInterfaceStyle 來判斷當前樣式，而不是用 overrideUserInterfaceStyle 來判斷。

註意：以上程式碼是我自己摸索出來的，在真機上也能達到效果，但是不建議現在就開始做 DarkMode 的適配。畢竟官方關於 DarkMode 適配的 session 還沒出，建議等 session 出了之後在做適配，另外如果有和官方有出入我會及時補充修改~

朋友會在“發現-看一看”看到你“在看”的內容

確定