转载

夜间模式的实现

欢迎阅读Late Night Swift的第一篇文章。比起光说不做,比如动手去实现夜间模式吧。随着越来越多的人晚上用电子设备,夜间模式变得愈加重要。

夜间模式的实现

夜间模式示范

我们的目标是通过简单办法给你的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
	}
}

如果你想简单了解的话,这里有一个代码的连接

github.com/latenightswift/night-mode

想象一下应用的表现,来让我们理出一些基本的需求:

  • 用于存储和改变当前主题的核心地区

  • 由有标签的颜色定义组成的主题类型

  • 当主题改变时候,能够通知我们应用的相应机制

  • 让任何东西都可以参与到主题的简洁方法

  • 通过自定视图与视图控制器改变应用的状态栏,标签栏,导航栏

  • 通过精美的淡入淡出动画来表现主题变化

如果一个应用能支持夜间模式,显然它也能支持更多其他模式

带着这些想法,让我们去开始制作我们的主要内容吧

定义主题协议

我们说过需要一些地方存储当前主题,并能够订阅通知来知晓主题是否改变。首先我们要定义这句话是什么意思。

/// 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 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的主题类型,并声明我们的白天与夜间主题。

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() {
		// 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的实现看起来像这样:

/// 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)和窗口,你就有更大的问题了-但是在你特定的实现中请随意调整这个,让它变得更保守。

夜间模式的实现

这样我们就完成了,一个有效实现的夜间模式和对主题化的深入了解。如果你想试试一个有效的实现,你可以用示例代码玩玩。

示例代码:github.com/latenightswift/night-mode

如果你喜欢这篇文章请关注我的推特或通过邮箱订阅以获取新文章的通知。

感谢阅读

正文到此结束
Loading...