【ios学习】夜间模式的实现
随着越来越多的人晚上用电子设备，夜间模式变得愈加重要。
夜间模式示范
我们的目标是通过简单办法给你的UI组件添加主题，并在主题间动态切换。为了达到这个目标，我们要建立一个协议，称为Themed，任何参与主题的要符合它。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
}
}
|
想象一下应用的表现，来让我们理出一些基本的需求：
用于存储和改变当前主题的核心地区
由有标签的颜色定义组成的主题类型
当主题改变时候，能够通知我们应用的相应机制
让任何东西都可以参与到主题的简洁方法
通过自定视图与视图控制器改变应用的状态栏，标签栏，导航栏
通过精美的淡入淡出动画来表现主题变化
如果一个应用能支持夜间模式，显然它也能支持更多其他模式
带着这些想法，让我们去开始制作我们的主要内容吧
定义主题协议
我们说过需要一些地方存储当前主题，并能够订阅通知来知晓主题是否改变。首先我们要定义这句话是什么意思。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/// 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化的对象就需要知道当前的主题，并且如果主题变化还可以通知到它。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/// 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 don't clash with the protocol,
/// let's 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的主题类型，并声明我们的白天与夜间主题。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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() {
// We'll default to the light theme to start with, but
// this could read directly from UserDefaults to get
// the user's 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的实现看起来像这样：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/// 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实例。
|
1
2
3
4
5
|
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()一次，这样你所有的主题代码就能放在一个适合的地方。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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子类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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的一些实现
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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，让它带给我们这个功能：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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)和窗口，你就有更大的问题了-但是在你特定的实现中请随意调整这个，让它变得更保守。
这样我们就完成了，一个有效实现的夜间模式和对主题化的深入了解。如果你想试试一个有效的实现，你可以用示例代码玩玩。