【ios學習】夜間模式的實現

夜間模式示範

我們的目標是通過簡單辦法給你的UI組件添加主題，並在主題間動態切換。為了達到這個目標，我們要建立一個協議，稱為Themed，任何參與主題的要符合它。

extension MyView: Themed {

func applyTheme(_ theme: AppTheme) {

backgroundColor = theme.backgroundColor

titleLabel.textColor = theme.textColor

subtitleLabel.textColor = theme.textColor

}

}

extension AppTabBarController: Themed {

func applyTheme(_ theme: AppTheme) {

tabBar.barTintColor = theme.barBackgroundColor

tabBar.tintColor = theme.barForegroundColor

}

}

• 用於存儲和改變當前主題的核心地區
• 由有標籤的顏色定義組成的主題類型
• 當主題改變時候，能夠通知我們應用的相應機制
• 讓任何東西都可以參與到主題的簡潔方法
• 通過自定視圖與視圖控制器改變應用的狀態欄，標籤欄，導航欄
• 通過精美的淡入淡齣動畫來表現主題變化

如果一個應用能支持夜間模式，顯然它也能支持更多其他模式

帶著這些想法，讓我們去開始製作我們的主要內容吧

定義主題協議

我們說過需要一些地方存儲當前主題，並能夠訂閱通知來知曉主題是否改變。首先我們要定義這句話是什麼意思。

/// Describes a type that holds a current `Theme` and allows

/// an object to be notified when the theme is changed.

protocol ThemeProvider {

/// Placeholder for the theme type that the app will actually use

associatedtype Theme

/// The current theme that is active

var currentTheme: Theme { get }

/// Subscribe to be notified when the theme changes. Handler will be

/// removed from subscription when `object` is deallocated.

func subscribeToChanges(_ object: AnyObject, handler: @escaping (Theme) -> Void)

}

ThemeProvider描述了我們通過什麼來及時從單點(single point)取得當前主題，還有我們在哪裡訂閱關於主題改變的通知。

注意我們把Theme做成了關聯類型，這裡我們不想定義一個特定的類型，因為我們希望應用能通過任何它們希望的方式表現主題。

訂閱機制通過對對象的弱引用運行，當對象被釋放時，它會從訂閱列表出移除。我們會用這種方法代替Notification和NotificationCenter，因為這樣我們可以用協議拓展來迴避樣本/重複代碼，從而避免通知的使用變得更複雜。

現在我們定義了處理當前主題的地方，我們來看看它是怎麼被使用的吧。一旦被實例化/配置，一個要被themed化的對象就需要知道當前的主題，並且如果主題變化還可以通知到它。

/// Describes a type that can have a theme applied to it

protocol Themed {

/// A Themed type needs to know about what concrete type the

/// ThemeProvider is. So we dont clash with the protocol,

/// lets call this associated type _ThemeProvider

associatedtype _ThemeProvider: ThemeProvider

/// Will return the current app-wide theme provider

var themeProvider: _ThemeProvider { get }

/// This will be called whenever the current theme changes

func applyTheme(_ theme: _ThemeProvider.Theme)

}

extension Themed where Self: AnyObject {

/// This is to be called once when Self wants to start listening for

/// theme changes. This immediately triggers `applyTheme()` with the

/// current theme.

func setUpTheming() {

applyTheme(themeProvider.currentTheme)

themeProvider.subscribeToChanges(self) { [weak self] newTheme in

self?.applyTheme(newTheme)

}

}

}

如果符合的類型是AnyObject，就使用一個便利的協議擴展，我們這樣就避免了每一個一致性都需要做的「應用最初主題，訂閱，當主題改變時候再應用下一個主題」步驟。這些都被放入了setUpTheming()方法中，每個對象都可以調用。

為了做到這個，Themed對象需要知道當前ThemeProvider是什麼。當我們知道app的ThemeProvider的具體類型(無論什麼類型都會最終符合ThemeProvider)，我們就可以提供在Themed上提供一個擴展來返回應用的ThemeProvider，我們馬上就要做這些。

這些都意味著符合的對象只需要調用setUpTheming()一次，並提供applyTheme()的一個實現去給它配置這個主題。

App的實現

現在我們已經定義了帶主題的API，我們可以用它做點有趣的事情，然後把它應用到我們的app上。讓我們定義我們app的主題類型，並聲明我們的白天與夜間主題。

struct AppTheme {

var statusBarStyle: UIStatusBarStyle

var barBackgroundColor: UIColor

var barForegroundColor: UIColor

var backgroundColor: UIColor

var textColor: UIColor

}

extension AppTheme {

static let light = AppTheme(

statusBarStyle: .`default`,

barBackgroundColor: .white,

barForegroundColor: .black,

backgroundColor: UIColor(white: 0.9, alpha: 1),

textColor: .darkText

)

static let dark = AppTheme(

statusBarStyle: .lightContent,

barBackgroundColor: UIColor(white: 0, alpha: 1),

barForegroundColor: .white,

backgroundColor: UIColor(white: 0.2, alpha: 1),

textColor: .lightText

)

}

這裡我們定義我們的AppTheme類型是一個啞結構(dumb struct)，包含用於設計我們app的標籤化的顏色和值。我們之後為每一個可用的主題聲明一些靜態特性-對於本文的情況，就是白天和夜間主題。

現在是時候建立我們app的ThemeProvider了

final class AppThemeProvider: ThemeProvider {

static let shared: AppThemeProvider = .init()

private var theme: SubscribableValue

var currentTheme: AppTheme {

get {

return theme.value

}

set {

theme.value = newTheme

}

}

init() {

// Well default to the light theme to start with, but

// this could read directly from UserDefaults to get

// the users last theme choice.

theme = SubscribableValue(value: .light)

}

func subscribeToChanges(_ object: AnyObject, handler: @escaping (AppTheme) -> Void) {

theme.subscribe(object, using: handler)

}

}

現在我們要面對2件事情：第一，使用一個靜態共享的單體(singleton)，第二，SubscribableValue到底是什麼

單體？真的？

我們為我們的ThemeProvider建立了一個app範圍共享的單體實例，這通常是個需要警惕的地方。

我們的ThemeProvider很適合單元測試，考慮到這種主題化是表示層上的工作，這是一個可接受的考慮。

在現實世界，app的UI是由多屏幕組成，每個都有內嵌視圖組成的龐大層級。為一個視圖模式或視圖控制器使用依賴注入(dependency injection)非常容易，但是為屏幕上的每個視圖進行依賴注入會是件大工作，需要很多行代碼去完成。

總體上說，你的商務邏輯應該能進行單元測試，你應該不需要向下測試到表示層。這確實是一個有趣的話題，以後我們也許會再討論它。

SubscribableValue

你也許已經很好奇SubscribableValue到底是什麼！ThemeProvider需要對象去訂閱當前主題的改變。這個邏輯上很簡單，可以很容易合併到ThemeProvider中，但是訂閱一個數值的習慣可以，也應該變得更加通用。

一個分開的，通用的」可以訂閱的值」的實現，意味著它可以被孤立的測試和再使用。它也讓ThemeProvider變得更乾淨，即允許它處理只屬於自己的特定職責。

當然如果你在你的項目中用Rx(或有同樣功能的)，你可以用一些類似的代替它，比如Variable/BehaviorSubject

SubscribableValue的實現看起來像這樣：

/// A box that allows us to weakly hold on to an object

struct Weak {

weak var value: Object?

}

/// Stores a value of type T, and allows objects to subscribe to

/// be notified with this value is changed.

struct SubscribableValue {

private typealias Subscription = (object: Weak, handler: (T) -> Void)

private var subscriptions: [Subscription] = []

var value: T {

didSet {

for (object, handler) in subscriptions where object.value != nil {

handler(value)

}

}

}

init(value: T) {

self.value = value

}

mutating func subscribe(_ object: AnyObject, using handler: @escaping (T) -> Void) {

subscriptions.append((Weak(value: object), handler))

cleanupSubscriptions()

}

private mutating func cleanupSubscriptions() {

subscriptions = subscriptions.filter({ entry in

return entry.object.value != nil

})

}

}

SubscribableValue含有一個弱對象引用與閉包組成的數組。當數值改變時，我們在didSet中迭代這些訂閱並調用閉包。當對象被釋放時，它還會移除訂閱。

現在我們有了一個可以用的ThemeProvider，距離一切就緒就差一件事了。這就是為Themed添加一個擴展，用來返回我們app的單一AppThemeProvider實例。

extension Themed where Self: AnyObject {

var themeProvider: AppThemeProvider {

return AppThemeProvider.shared

}

}

如果你還從Themed協議與擴展中記得它，對象需要這個特性來使用方便的setUpTheming()方法，從而管理對ThemeProvider的訂閱。現在它意味著每個Themed對象需要做的事情就是實現applyTheme()。完美！

獲得Themed

現在我們已經準備好，讓我們的視圖，視圖控制器和app欄目響應主題的變化，讓我們開始一致化吧！

UIView

如果你有一個很好的UIView子類，想要它響應主題變化。你要做的就是讓它符合Themed，在init中調用setUpTheming()，保證所有主題相關設置都在applyTheme()中。

別忘了在準備時也調用applyTheme()一次，這樣你所有的主題代碼就能放在一個適合的地方。

class MyView: UIView {

var label = UILabel()

init() {

super.init(frame: .zero)

setUpTheming()

}

}

extension MyView: Themed {

func applyTheme(_ theme: AppTheme) {

backgroundColor = theme.backgroundColor

label.textColor = theme.textColor

}

}

UIStatusBar 和 UINavigationBar

你可能還想根據當前主題更新app狀態欄與導航欄的外觀。假設你的app正在使用基於視圖控制器的狀態欄外觀(這是默認設置)，你可以把導航控制器劃入子類，並使它符合themed。

class AppNavigationController: UINavigationController {

private var themedStatusBarStyle: UIStatusBarStyle?

override var preferredStatusBarStyle: UIStatusBarStyle {

return themedStatusBarStyle ?? super.preferredStatusBarStyle

}

override func viewDidLoad() {

super.viewDidLoad()

setUpTheming()

}

}

extension AppNavigationController: Themed {

func applyTheme(_ theme: AppTheme) {

themedStatusBarStyle = theme.statusBarStyle

setNeedsStatusBarAppearanceUpdate()

navigationBar.barTintColor = theme.barBackgroundColor

navigationBar.tintColor = theme.barForegroundColor

navigationBar.titleTextAttributes = [

NSAttributedStringKey.foregroundColor: theme.barForegroundColor

]

}

}

類似的對你的UITabViewController子類

class AppTabBarController: UITabBarController {

override func viewDidLoad() {

super.viewDidLoad()

setUpTheming()

}

}

extension AppTabBarController: Themed {

func applyTheme(_ theme: AppTheme) {

tabBar.barTintColor = theme.barBackgroundColor

tabBar.tintColor = theme.barForegroundColor

}

}

現在在你的故事板(storyboard)(或代碼)中，確保你app的標籤欄與導航控制器是你新的子類類型。

這樣就可以了，你app的狀態與導航欄會響應主題變化，非常巧妙！

隨著每一個組件和視圖都符合Themed，整個app就會響應主題的變化了。

讓主題變化的邏輯與每一個獨立組件緊密耦合，意味著每一部分都可以在自己的範圍內做好自己工作，這樣每部分都做的很好。

循環主題

我們需要一些功能來在可用的主題間循環，我們可以通過添加下面的代碼來調整app的ThemeProvider的一些實現

final class AppThemeProvider: ThemeProvider {

// ...

private var availableThemes: [AppTheme] = [.light, .dark]

// ...

func nextTheme() {

guard let nextTheme = availableThemes.rotate() else {

return

}

currentTheme = nextTheme

}

}

extension Array {

/// Move the last element of the array to the beginning

/// - Returns: The element that was moved

mutating func rotate() -> Element? {

guard let lastElement = popLast() else {

return nil

}

insert(lastElement, at: 0)

return lastElement

}

}

我們列出了在ThemeProvider中的可用主題，並用了一個nextTheme()函數來讓它們循環。

要想實現在一組主題中循環，而不需要一個記錄索引的變數，一個簡單的方法是獲取主題組中的最後一個，並把它移動到開頭。為了在所有數值間循環，這個操作可以被重複進行。我們通過延伸主題組並寫一個名為rotate()的mutating方法做到。

現在當我們想切換主題時就可以調用AppThemeProvider.shared.nextTheme()，這樣就會更新了。

動畫化

我們想潤色一下，為主題改變添加一個同步淡入淡出的動畫。我們可以在每個applyTheme()方法中把每個屬性變化進行動畫化，但考慮到整個窗口都要改變，使用UIKit來表現整個窗口的快照轉換會更加簡潔高效，代碼更少。

讓我們再次調整app的ThemeProvider，讓它帶給我們這個功能：

final class AppThemeProvider: ThemeProvider {

// ...

var currentTheme: AppTheme {

// ...

set {

setNewTheme(newValue)

}

}

// ...

private func setNewTheme(_ newTheme: AppTheme) {

let window = UIApplication.shared.delegate!.window!! //

UIView.transition(

with: window,

duration: 0.3,

options: [.transitionCrossDissolve],

animations: {

self.theme.value = newTheme

},

completion: nil

)

}

}

你可以看到，我們把主題數值的改變包裝到一個UIView同步淡入淡出轉換中。所有applyTheme()方法會通過設定主題的新數值而被調用，所有的改變都在轉換的動畫區塊發生。

為了這個操作，我們需要app的窗口，本例里比起整個app中應該存在的數量，實際有著更多強制解包(在一條線中)。從現實考慮，這應該是完全可以的。就面對它把，如果你的app沒有一個委託(delegate)和窗口，你就有更大的問題了-但是在你特定的實現中請隨意調整這個，讓它變得更保守。

這樣我們就完成了，一個有效實現的夜間模式和對主題化的深入了解。如果你想試試一個有效的實現，你可以用示例代碼玩玩。

推薦閱讀：