AsyncDisplayKit 系列教程 —— 添加一个 UIA

原理

添加一个自定义的 View 到 ASCellNode 中并不是一件容易的事情，和添加一个原生 ASDisplayNode 不一样的是，你需要自行处理 Cell 被重新渲染时的状态。

我们先描述一下 ASCellNode 的生命周期

屏幕快照 2015-11-28 下午3.47.04.png

一个 ASDisplayNode 在 init 至 layout 的过程中，都只是属性的操作，这个操作并不会生成任何实际的 UIView，这也是为什么 AsyncDisplayKit 高效的原因之一，将 UIView 实例化的过程推迟至最终使用时。

一个 ASDisplayNode 中的 UIView 生成、清除的时机由 ASTableView决定， ASTableView 总是保证只保留用户所看到的 Node 存在 UIView 实例。

因此， ASCellNode 中的 subnode 也同时遵循上图的生命周期。

示例

在 AsyncDisplayKit 系列教程 —— ASTableView 一文中，已经演示过如何添加一个 ASImageNode 和 ASTextNode。
现在，我们演示一下如何添加一个 UIActivityIndicatorView 到 Cell 中， UIActivityIndicatorView 并没有对应的 ASDisplayNode 子类实现。因此，我们需要创建一个 ASDisplayNode ，使用block方法返回 UIActivityIndicatorView。

let activityIndicator = ASDisplayNode { () -> UIView! in
    let view = UIActivityIndicatorView(activityIndicatorStyle: .Gray)
    view.backgroundColor = UIColor.clearColor()
    view.hidesWhenStopped = true
    return view
}

之后，就可以像普通的 ASDisplayNode 一样将其添加至 subnode 中。

override init!() {
    super.init()
    addSubnode(activityIndicator)
}

一套完整的代码如下图所示

//
//  ViewController.swift
//  AsyncDisplayKit-Issue-4
//
//  Created by 崔 明辉 on 15/11/28.
//  Copyright © 2015年 Pony.Cui. All rights reserved.
//

import UIKit

class ViewController: UIViewController, ASTableViewDataSource, ASTableViewDelegate {

    let tableView = ASTableView()
    
    deinit {
        tableView.asyncDelegate = nil // 记得在这里将 delegate 设为 nil，否则有可能崩溃
        tableView.asyncDataSource = nil // dataSource 也是一样
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.asyncDataSource = self
        tableView.asyncDelegate = self
        self.view.addSubview(tableView)
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        tableView.frame = view.bounds
    }

    
    func numberOfSectionsInTableView(tableView: UITableView!) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int {
        return 100
    }
    
    func tableView(tableView: ASTableView!, nodeForRowAtIndexPath indexPath: NSIndexPath!) -> ASCellNode! {
        let cellNode = CustomCellNode()
        cellNode.startAnimating()
        return cellNode
    }

}

class CustomCellNode: ASCellNode {
    
    let activityIndicator = ASDisplayNode { () -> UIView! in
        let view = UIActivityIndicatorView(activityIndicatorStyle: .Gray)
        view.backgroundColor = UIColor.clearColor()
        view.hidesWhenStopped = true
        return view
    }
    
    override init!() {
        super.init()
        addSubnode(activityIndicator)
    }
    
    func startAnimating() {
        if let activityIndicatorView = activityIndicator.view as? UIActivityIndicatorView {
            activityIndicatorView.startAnimating()
        }
    }
    
    override func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize {
        return CGSize(width: constrainedSize.width, height: 44)
    }
    
    override func layout() {
        activityIndicator.frame = CGRect(x: self.calculatedSize.width / 2.0 - 22.0, y: 11, width: 44, height: 44)
    }
    
}

我们指定生成 100 个 Cell，每个 Cell height = 44，运行这个Demo你可以看到菊花已经显示在界面上了。

坑

等等，看上去好像没什么问题，滑到最下面再滑回去，你会发现，什么？菊花没了！

为什么会这样！

还记得我们说过的，一个 Node 中的 UIView 是会被清除、重新生成的吗？ 在滑动到下方的时候， Node 中的所有 UIView 都会被干掉，然后滑回来的时候，会被重新执行 Block 中的代码，然后重新添加到界面上。

这个时候，我们的 UIActivityIndicatorView 还没被执行 startAnimating() 方法。

要解决这个坑，也不是很难，只要在 Node 重新出现的时候，执行一下 startAnimating() 就可以了。

//
//  ViewController.swift
//  AsyncDisplayKit-Issue-4
//
//  Created by 崔 明辉 on 15/11/28.
//  Copyright © 2015年 Pony.Cui. All rights reserved.
//

import UIKit

class ViewController: UIViewController, ASTableViewDataSource, ASTableViewDelegate {

    let tableView = ASTableView()
    
    deinit {
        tableView.asyncDelegate = nil // 记得在这里将 delegate 设为 nil，否则有可能崩溃
        tableView.asyncDataSource = nil // dataSource 也是一样
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.asyncDataSource = self
        tableView.asyncDelegate = self
        self.view.addSubview(tableView)
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        tableView.frame = view.bounds
    }

    
    func numberOfSectionsInTableView(tableView: UITableView!) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int {
        return 100
    }
    
    func tableView(tableView: ASTableView!, nodeForRowAtIndexPath indexPath: NSIndexPath!) -> ASCellNode! {
        let cellNode = CustomCellNode()
        cellNode.startAnimating()
        return cellNode
    }
    
    // 实现这个 delegate
    func tableView(tableView: ASTableView!, willDisplayNodeForRowAtIndexPath indexPath: NSIndexPath!) {
        if let cellNode = tableView.nodeForRowAtIndexPath(indexPath) as? CustomCellNode {
            cellNode.resume() 
        }
    }

}

class CustomCellNode: ASCellNode {
    
    let activityIndicator = ASDisplayNode { () -> UIView! in
        let view = UIActivityIndicatorView(activityIndicatorStyle: .Gray)
        view.backgroundColor = UIColor.clearColor()
        view.hidesWhenStopped = true
        return view
    }
    
    override init!() {
        super.init()
        addSubnode(activityIndicator)
    }
    
    // 使用 resume 方法调用 startAnimating
    func resume() {
        startAnimating()
    }
    
    func startAnimating() {
        if let activityIndicatorView = activityIndicator.view as? UIActivityIndicatorView {
            activityIndicatorView.startAnimating()
        }
    }
    
    override func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize {
        return CGSize(width: constrainedSize.width, height: 44)
    }
    
    override func layout() {
        activityIndicator.frame = CGRect(x: self.calculatedSize.width / 2.0 - 22.0, y: 11, width: 44, height: 44)
    }
    
}

扩展

使用同样的方法，可以添加任意类型 UIView 到 CellNode 中，这样就不需要被 AsyncDisplayKit 束缚我们的应用了。
相关的代码可以在这个链接中找到 https://github.com/PonyCui/AsyncDisplayKit-Issue-4