一、Telegram 控制器
image.pngViewController 使 UIViewController
的工作变成了 nodes 层次结构的容器;与官方 node 控制器 ASViewController 不同,它没有 可见深度 和 智能预加载 等功能。
@objc open class ViewController: UIViewController, ContainableController {
// the root content node
private var _displayNode: ASDisplayNode?
public final var displayNode: ASDisplayNode {
get {
if let value = self._displayNode {
return value
}
else {
self.loadDisplayNode()
...
return self._displayNode!
}
}
...
}
open func loadDisplayNode()
open func displayNodeDidLoad()
// shared components
public let statusBar: StatusBar
public let navigationBar: NavigationBar?
private(set) var toolbar: Toolbar?
private var scrollToTopView: ScrollToTopView?
// customizations of navigationBar
public var navigationOffset: CGFloat
open var navigationHeight: CGFloat
open var navigationInsetHeight: CGFloat
open var cleanNavigationHeight: CGFloat
open var visualNavigationInsetHeight: CGFloat
public var additionalNavigationBarHeight: CGFloat
}
- 每个
ViewController
通过一个root node
来管理node
层,该root node
存储在displayNode
该类的属性中;loadDisplayNode
和displayNodeDidLoad
函数里实现懒加载。 - 作为基类,它为子类准备了几个共享的 node 组件:
状态栏
、导航栏
、工具栏
和返回到顶部功能
;还提供简便属性来支持自定义导航栏。 -
ViewController
很少单独使用,项目中有上百个它的子类用于实现不同的用户界面; UIKit 中两个最常用的容器控制器:UINavigationController
与UITabBarController
,被重新实现为NavigationController
与TabBarController
。
open class NavigationController: UINavigationController, ContainableController, UIGestureRecognizerDelegate {
private var _viewControllers: [ViewController] = []
// NavigationControllerNode
private var _displayNode: ASDisplayNode?
private var theme: NavigationControllerTheme
// manage layout and transition animation
private func updateContainers(layout rawLayout: ContainerViewLayout, transition: ContainedViewLayoutTransition)
// push with a completion handler
public func pushViewController(_ controller: ViewController, animated: Bool = true, completion: @escaping () -> Void)
}
// NavigationLayout.swift
enum RootNavigationLayout {
case split([ViewController], [ViewController])
case flat([ViewController])
}
// NavigationContainer.swift
final class NavigationContainer: ASDisplayNode, UIGestureRecognizerDelegate
override func didLoad() {
// the interactive pop gesture
let panRecognizer = InteractiveTransitionGestureRecognizer(target: self, action: #selector(self.panGesture(_:)), allowedDirections: ...)
}
}
NavigationController 扩展 UINavigationController
以借用其公共API,使得它可以像普通的 UIViewController 一样被使用,它在内部重写了以下内容:
- 直接管理子控制器;由于它只是一个简单的数组,因此可以对堆栈操作进行自由调整。
- 过渡动画;你可以在 ContainedViewLayoutTransition 中找到所有动画详细信息。
- 交互式pop手势;InteractiveTransitionGestureRecognizer 可以在整个屏幕范围响应 pop 手势。
- 像 iPad 这样的大屏设备分屏布局,它支持两种类型的布局:
flat
和split
; - 主题;通过
theme
属性可以很轻松的自定义外观。
二、Telegram 布局
AsyncDisplayKit
中的FlexBox
布局系统被混合布局机制所取代:
// NavigationBar.swift
// layout in the main thread
open class NavigationBar: ASDisplayNode {
override open func layout() {
super.layout()
if let validLayout = self.validLayout, self.requestedLayout {
self.requestedLayout = false
self.updateLayout(size: validLayout.0, defaultHeight: validLayout.1, additionalHeight: validLayout.2, leftInset: validLayout.3, rightInset: validLayout.4, appearsHidden: validLayout.5, transition: .immediate)
}
}
func updateLayout(size: CGSize, defaultHeight: CGFloat, additionalHeight: CGFloat, leftInset: CGFloat, rightInset: CGFloat, appearsHidden: Bool, transition: ContainedViewLayoutTransition)
}
// TabBarController.swift
// layout in the main thread
open class TabBarController: ViewController {
override open func containerLayoutUpdated(_ layout: ContainerViewLayout, transition: ContainedViewLayoutTransition) {
super.containerLayoutUpdated(layout, transition: transition)
self.tabBarControllerNode.containerLayoutUpdated(layout, toolbar: self.currentController?.toolbar, transition: transition)
...
}
}
// ListView.swift
// asynchronously load visible items by the scrolling event
open class ListView: ASDisplayNode, ... {
public func scrollViewDidScroll(_ scrollView: UIScrollView) {
self.updateScrollViewDidScroll(scrollView, synchronous: false)
}
private func updateScrollViewDidScroll(_ scrollView: UIScrollView, synchronous: Bool) {
...
self.enqueueUpdateVisibleItems(synchronous: synchronous)
}
private func enqueueUpdateVisibleItems(synchronous: Bool) {
...
strongSelf.updateVisibleItemsTransaction(synchronous: synchronous, completion:...)
}
private func updateVisibleItemsTransaction(synchronous: Bool, completion: @escaping () -> Void)
}
- 所有布局都是手动完成的。
- 简单 UI 的布局计算在主线程中进行;布局代码可以放在
node
的layout
方法中,也可以放在视图控制器的containerLayoutUpdated
方法中。 -
ListView
为其item nodes
构建灵活的布局机制,该机制支持同步和异步计算。
后记
Telegram 集成 AsyncDisplayKit
的方式让人惊叹,它基于 ASDK 的 node
重构了整个 UIKit
用以提高效率和自由度,虽然它的聊天 UI 界面非常复杂,但在老机型上却也有流畅体验。
参考资料:
-
Source Code Walkthrough of Telegram-iOS Part 5: AsyncDisplayKit
资料版本:Telegram - 6.1.2
校正版本:Telegram - 8.7.1
网友评论