ASTableView 簡介
ASTableView 是 UITableView 的子類道批，ASTableView 著力解決 UITableView 在 ReloadData 耗時長以及滑動卡頓的性能問題。
ASTableView 實(shí)質(zhì)上是一個 ScrollView ，其中添加有指定數(shù)的 ASDisplayNode，在屏幕滾動時架曹，離屏的ASDisplayNode內(nèi)容會被暫時釋放密浑，在屏或接近在屏的ASDisplayNode會被提前加載。因此敷钾，ASTableView 不存在 Cell 復(fù)用的問題，也不存在任何 Cell 復(fù)用肄梨。
ASTableView 的高度計(jì)算以及布局都在 ASCellNode 中實(shí)現(xiàn)阻荒，與 ASTableView 是完全解耦的。
ASTableView 中所有的元素都不支持 AutoLayout众羡、AutoResizing侨赡，也不支持StoryBoard、IB粱侣。
ASTableView 完全可以將滑動性能提升至60FPS羊壹。
添加一個 ASTableView
將 ASTableView 添加到View中就像添加UITableView一樣簡單，并且只需實(shí)現(xiàn)三個代理方法即可齐婴。
import UIKit
class ViewController: UIViewController, ASTableViewDataSource, ASTableViewDelegate {
let tableView = ASTableView()
deinit {
tableView.asyncDelegate = nil // 記得在這里將 delegate 設(shè)為 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 給代理方法，現(xiàn)在我們創(chuàng)建一個新的類柠偶，添加一個ImageView情妖、兩個Label，我們至少需要以下這些步驟：
- 創(chuàng)建對應(yīng)的控件
- 添加到ASCellNode中
- 為控件添加數(shù)據(jù)
- 在
func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize方法中計(jì)算控件寬度和高度诱担，并返回 Cell 的高度 - 在
func layout()方法中為對應(yīng)控件進(jìn)行布局
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 {
// 這是一堆約束毡证，只是給開發(fā)者看的。
// |-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() {
// 開始布局吧蔫仙，如果你看到這里已經(jīng)心碎了料睛？
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", "不論我們最后生疏到什么樣子 要記住 曾經(jīng)對你的好都是真的 ?"],
[NSURL(string: "http://tp3.sinaimg.cn/2466802634/180/5740492182/0")!, "孟礬礬", "溫和而堅(jiān)定。"],
[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 已經(jīng)實(shí)現(xiàn)了阱州，把數(shù)據(jù)量加大1000倍看看效果怎么樣挑秉？ 溫馨提示，真機(jī)測試才能看出效果苔货。
代碼的下載鏈接 https://github.com/PonyCui/AsyncDisplayKit-Issue-3
結(jié)語
這就是 ASTableView 的簡單實(shí)現(xiàn)犀概，接下來，我會為大家?guī)?ASTableView 的擴(kuò)展應(yīng)用夜惭。
AsyncDisplayKit 系列教程 —— 添加一個 UIActivityIndicatorView 到 ASCellNode
