歡迎光臨
每天分享高質量文章

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 出了之後在做適配,另外如果有和官方有出入我會及時補充修改~

赞(0)

分享創造快樂