一、Telegram 控制器
image.png
ViewController 使 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
