AsyncDisplayKit 系列教程 —— ASTableV

ASTableView 简介

ASTableView 是 UITableView 的子类，ASTableView 着力解决 UITableView 在 ReloadData 耗时长以及滑动卡顿的性能问题。

ASTableView 实质上是一个 ScrollView ，其中添加有指定数的 ASDisplayNode，在屏幕滚动时，离屏的ASDisplayNode内容会被暂时释放，在屏或接近在屏的ASDisplayNode会被提前加载。因此，ASTableView 不存在 Cell 复用的问题，也不存在任何 Cell 复用。

ASTableView 的高度计算以及布局都在 ASCellNode 中实现，与 ASTableView 是完全解耦的。

ASTableView 中所有的元素都不支持 AutoLayout、AutoResizing，也不支持StoryBoard、IB。

ASTableView 完全可以将滑动性能提升至60FPS。

添加一个 ASTableView

将 ASTableView 添加到View中就像添加UITableView一样简单，并且只需实现三个代理方法即可。

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
    }
    
    // MARK: - ASTableView
    
    func numberOfSectionsInTableView(tableView: UITableView!) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(tableView: ASTableView!, nodeForRowAtIndexPath indexPath: NSIndexPath!) -> ASCellNode! {
        return ASCellNode()
    }

}

返回自定义的 ASCellNode

我们只是返回了一下空的 ASCellNode 给代理方法，现在我们创建一个新的类，添加一个ImageView、两个Label，我们至少需要以下这些步骤：

1. 创建对应的控件
2. 添加到ASCellNode中
3. 为控件添加数据
4. 在 func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize 方法中计算控件宽度和高度，并返回 Cell 的高度
5. 在 func layout() 方法中为对应控件进行布局

class CustomCellNode: ASCellNode {
    
    let iconImageView = ASNetworkImageNode(cache: ImageManager.sharedManager,
        downloader: ImageManager.sharedManager)
    let titleLabel = ASTextNode()
    let subTitleLabel = ASTextNode()
    
    override init!() {
        super.init()
        addSubnode(iconImageView)
        addSubnode(titleLabel)
        addSubnode(subTitleLabel)
    }
    
    func configureData(iconURL: NSURL, title: String, subTitle: String) {
        iconImageView.URL = iconURL
        titleLabel.attributedString = NSAttributedString(string: title, attributes: [
            NSForegroundColorAttributeName: UIColor.blackColor(),
            NSFontAttributeName: UIFont.systemFontOfSize(17)
            ])
        subTitleLabel.attributedString = NSAttributedString(string: subTitle, attributes: [
            NSForegroundColorAttributeName: UIColor.grayColor(),
            NSFontAttributeName: UIFont.systemFontOfSize(15)
            ])
    }
    
    override func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize {
        // 这是一堆约束，只是给开发者看的。
        // |-15-[iconImageView(60)]-15-[titleLabel]-15-|
        // |-15-[iconImageView(60)]-15-[subTitleLabel]-15-|
        // V:|-8-[titleLable]-3-[subTitleLabel]-8-|
        // V:|-2-[iconImageView(60)]-2-|
        let textMaxWidth = constrainedSize.width - 15 - 60 - 15 - 15
        titleLabel.measure(CGSize(width: textMaxWidth, height: CGFloat.max))
        subTitleLabel.measure(CGSize(width: textMaxWidth, height: CGFloat.max))
        if 8 + titleLabel.calculatedSize.height + subTitleLabel.calculatedSize.height + 8 < 64.0 {
            return CGSize(width: constrainedSize.width, height: 64.0)
        }
        else {
            return CGSize(width: constrainedSize.width,
                height: 8 + titleLabel.calculatedSize.height + subTitleLabel.calculatedSize.height + 8)
        }
    }
    
    override func layout() {
        // 开始布局吧，如果你看到这里已经心碎了？
        iconImageView.frame = CGRect(x: 15, y: 2, width: 60, height: 60)
        titleLabel.frame = CGRect(x: 15 + 60 + 15, y: 8, width: titleLabel.calculatedSize.width, height: titleLabel.calculatedSize.height)
        subTitleLabel.frame = CGRect(x: 15 + 60 + 15, y: titleLabel.frame.origin.y + titleLabel.frame.size.height, width: subTitleLabel.calculatedSize.width, height: subTitleLabel.calculatedSize.height)
    }
    
}

然后在ASTableView返回我们的Cell

let mockData = [
    [NSURL(string: "http://tp1.sinaimg.cn/3985473000/180/5742244430/0")!, "杨大大117", "不论我们最后生疏到什么样子 要记住 曾经对你的好都是真的 ❤"],
    [NSURL(string: "http://tp3.sinaimg.cn/2466802634/180/5740492182/0")!, "孟矾矾", "温和而坚定。"],
    [NSURL(string: "http://tp2.sinaimg.cn/1736940353/180/5634177627/0")!, "郭德欣", "广州交通电台FM106.1主持人"],
    [NSURL(string: "http://tp4.sinaimg.cn/2379086631/180/40052837834/0")!, "我是你景儿", "店铺已更名为：JiLovèng 。大家可以在淘宝宝贝直接搜索这个，不分大小写。[心]jiloveng"]
]
func tableView(tableView: ASTableView!, nodeForRowAtIndexPath indexPath: NSIndexPath!) -> ASCellNode! {
    let cellNode = CustomCellNode()
    if indexPath.row < mockData.count {
        let item = mockData[indexPath.row]
        if let URL = item[0] as? NSURL,
            let title = item[1] as? String,
            let subTitle = item[2] as? String {
            cellNode.configureData(URL, title: title, subTitle: subTitle)
        }
    }
    return cellNode
}

Run

Run Demo，就可以看到一个流畅的 UITableView 已经实现了，把数据量加大1000倍看看效果怎么样？ 温馨提示，真机测试才能看出效果。

代码的下载链接 https://github.com/PonyCui/AsyncDisplayKit-Issue-3

结语

这就是 ASTableView 的简单实现，接下来，我会为大家带来 ASTableView 的扩展应用。
AsyncDisplayKit 系列教程 —— 添加一个 UIActivityIndicatorView 到 ASCellNode