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