基于Telegram二次开发 --- Controllers 篇

一、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