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，我们至少需要以下这些步骤：
- 创建对应的控件
- 添加到ASCellNode中
- 为控件添加数据
- 在
func calculateSizeThatFits(constrainedSize: CGSize) -> CGSize方法中计算控件宽度和高度，并返回 Cell 的高度 - 在
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