首先提一些题外话,如果你还不知道“AsyncDisplayKit”或者叫“Texture”是干啥的,请度娘“AsyncDisplayKit”。这里我只写一些iOS开发时比较常用的一些知识点,还有相关的写法,我尽量用最大白话的方式写出来什么时候该怎么用。如果想了解更多请参考官方文档。现在度娘出来好多都是copy的同一个帖子,写的都是官方话,让很多新手入门还是有些难度的,我也是一点点看文档摸索出来的,如果你看到本文,那么恭喜你,新手朋友,你可以省了好多事了,不过知道怎么用后,最好还是再查查文档,明白它的原理这才是最主要的。给大家推荐一篇文章,里面原理什么的写的很详细,那么现在开始干货时间!
一.怎么看我运行时的帧数
请参考YYKit中的YYFPSLabel,这里我就不多说了。
二.ASTableNode
ASTableNode代替了UITableView,因此需要继承ASTableDelegate与ASTableDataSource这两个代理。
1.我要用的方法在ASTableNode中没找到怎么办?
ASTableNode废弃了UITableView的heightForRowAtIndexPath方法,因为ASTableNode需要让每个cellNode自己通过布局约束(后面会提到)来管理自己的高度。至于heightForHeaderInSection、heightForFooterInSection、viewForHeaderInSection、viewForFooterInSection等等,在ASTableNode没有相关重定义方法,因此直接按UITableView的写就可以了,毕竟它还算是UITableView的。
2.预加载使用
ASTableNode为了使滑动更为顺畅,它提供了一套预加载的策略(类似的于无限滚动),只需要在初始化时候加上self.tableNode.view.leadingScreensForBatching = 1.0;默认值是2,它的意思是将 leadingScreensForBatching 设置为 1.0 表示你当用户滚动还剩 1 个全屏就到达数据末尾时,就开始抓取新的一批数据。这里需要关联如下两个方法:
- (BOOL)shouldBatchFetchForTableNode:(ASTableNode*)tableNode
{
return YES;
}
这个方法告诉表格,在这次批抓取之后是否还可以进行新的批抓取。如果你知道 API 上的数据什么时候结束,返回 NO,表示不用进行新的批抓取了。
- (void)tableNode:(ASTableNode*)tableNode willBeginBatchFetchWithContext:(ASBatchContext*)context
{
[context beginBatchFetching];
//你获取数据的相关逻辑
[context completeBatchFetching:YES];
}
这个方法在用户即将滚动到表格末尾并且 -shouldBatchFetchForTableNode: 方法返回 YES 时调用。千万要记得获取数据后加上[context completeBatchFetching:YES];否则会认为你数据处理没有完成,不会继续加载以后的数据。
3.ASTableNode与UITableView代理方法替换:
- (NSInteger)numberOfSectionsInTableNode:(ASTableNode*)tableNode;
代替:
- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView;
- (NSInteger)tableNode:(ASTableNode*)tableNode numberOfRowsInSection:(NSInteger)section;
代替:
- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section;
- (ASCellNodeBlock)tableNode:(ASTableNode*)tableNode nodeBlockForRowAtIndexPath:(NSIndexPath*)indexPath;
代替:
- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath;
- (void)tableNode:(ASTableNode*)tableNode didSelectRowAtIndexPath:(NSIndexPath*)indexPath;
代替:
- (void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath;
4.关于列表滑动掉帧厉害怎么破?
写好了列表后,滑动时候还是觉得卡顿,感觉并没有传说中的像Baby一样丝滑,后来找了好多帖子,并一一试过了,最终操作是在初始化tableNode时,给定tableNode一个默认的高度self.tableNode.view.estimatedRowHeight = 0;我写的是0,可以根据自己的情况改。
5.[self.tableNode reloadData]时闪瞎了我的24K纯金眼怎么办!
解决办法就是......你不用reloadData呗,每次reloadData整个列表都会全闪一下,体验感很差,因此使用
[UIView performWithoutAnimation:^{
[self.tableNode insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
}];
的方式,为毛线要加performWithoutAnimation,你自己试试就知道了,呵呵呵。
二.ASCellNode的使用
关于ASTableView的简介请戳这里,写的很明白了。
ASCellNode就两点需要注意一下:
1.初始化视图时要把数据传进来,初始化时候直接通过数据赋值。
2.- (ASLayoutSpec*)layoutSpecThatFits:(ASSizeRange)constrainedSize;这个方法一定要写,需要在里面写布局约束来实现cellNode的高度控制。
三.布局约束
ASStackLayoutSpec使用flexbox算法来确定其子节点的位置和大小,具体用法请戳这里,下面我会解释一下布局的原理。
以官方文档中的图为例:
在写布局前一定要记住的一个规则,把相关的视图模块化(自己的理解,请大神嘴下留情)。
如上图:
1.设置一个绝对布局ASAbsoluteLayoutSpec来约束中间的播放按扭。(初始化时候记得给定宽高,没有宽高会出问题的)
2.设置一个ASCenterLayoutSpec的布局,centeringOptions为XY居中,sizingOptions默认方式就好,具体干嘛的,自己去看文档。child就是上一步的绝对布局约束对象,这样才能把当前约束与之前的约束关联起来。
3.设置完播放按钮的中心布局,那么这个中心相对的是谁呢,请看图中的绿框框,这里需要用到的是ASOverlayLayoutSpec覆盖布局,毕竟你要把播放按钮覆盖到后面的背景图嘛,这个背景图的布局请参考步骤1。overlayLayoutSpecWithChild中有两个参数,Child你要放到下面的视图,overlay上面的视图。
----------------------------------------------绿框布局约束模块,完成----------------------------------------------
4.两个蓝框部份,以下面蓝框布局为例(元素比较多,第一个蓝框可以参考这里完成),首先看细化部分,红色区域,里面有两个textNode,上下布局,使用ASStackLayoutSpec来完成,垂直方向,spacing控件间隔,justifyContent主轴排列方式为start,childred为两个textnode的数组(注意顺序)。
5.下面的蓝框里有两个需要布局的元素,图片和红框的相对布局约束,左右排列,因此,还需要创建一个相对约束ASStackLayoutSpec,水平方向,间隔,主轴排列方式为start,children为图片及红框的布局约束。这里的图片布局请参考步骤1。
----------------------------------------------蓝框布局约束模块,完成----------------------------------------------
6.两个蓝框中间的textnode,由于没有相对视图,因此直接可以使用到最外层的相对布局中,也就是橘黄色的框框,也是相对ASStackLayoutSpec,垂直方向,主轴排列方式为start,children为绿框约束、蓝框1约束、textnode、蓝框2约束。
----------------------------------------------橘黄框布局约束模块,完成----------------------------------------------
7.以上就是内容的所有布局说明,在设计时,可能需要上左下右都要有边距,所以,请使用ASInsetLayoutSpec插入布局,给橘黄框加边距,将此ASInsetLayoutSpec对象返回。
----------------------------------------------内容布局约束模块,完成----------------------------------------------
8.将以上所有布局规则写入- (ASLayoutSpec*)layoutSpecThatFits:(ASSizeRange)constrainedSize;方法并返回最终的布局规则就全部OK了。
在开发中设计给的UI可能还要比这个要繁琐,请新手朋友们认真参考上图加下面的逻辑,还有别人写的demo,在最下方。布局最主要的还是要模块化,从最小的开始,一点一点组合,最后拼成全部的内容区域。
四.flexShrink的使用
ASTextNode的maximumNumberOfLines(相当于UILabel的numberOfLines)默认是0,因此它是自动扩充的,当并排有两个视图需要布局,我们想其中的textNode显示不下就缩进,因此就需要用到textNode.style.flexShrink = YES,如果你给某一个textNode设置了这个属性,那么请记住,跟这个控件有关的全部约束都需要添加这个属性,不论它被包了多少层!
五.ASTableNode+MJRefresh
MJRefresh是iOS开发时,用的比较多的刷新库了,想要知道怎么用,请戳这里。
六.ASNetworkImageNode换缓存策略换成YYWebImage
请戳这里,ASNetworkImageNode下载图片,请使用扩展下面的- (void)setUrlStr:(NSString*)urlString placeholderImage:(UIImage*)placeholderImage;至说原理请自己看源码,网上也有不过是swift版,这里是oc版,初始化时候需要调用ASNetworkImageNode的类方法+ (id)imageNode;
七.使用ASTextNode还怎么使用TTTAttributedLabel?
还是戳这里,集成ASTextNode写了一个子类,基本实现了加行间距,字间距,对齐方式,还有给文本中某段文字加点击链接。使用方法跟TTTAttributedLabel一样,继承ASTextNodeDelegate下的代理方法
- (void)textNode:(ASTextNode*)textNode tappedLinkAttribute:(NSString*)attribute value:(id)value atPoint:(CGPoint)point textRange:(NSRange)textRange
实现跳转。
如果你使用此功能需要使用FuASTextNode,在调用addTextLink方法前设置textNode.linkAttributeNames= @[@"kLinkAttributeName"];(这里也可以根据你的需要自己替换相关字符串)。
在addTextLink的block方法里调用mutableAttributedString的addAttributes方法添加
@{
@"kLinkAttributeName":url(你的url链接,可以是string,你存的是什么类型,在代理方法里取就是什么类型),
NSForegroundColorAttributeName:color(高亮颜色)
}
请参考这里。
八.一些小的扩展
还是戳这里,里面有一些扩展,例如加圆角呀、描边呀、普通字符串简单变色呀,写法简单粗暴,大神勿喷。
以上就是我使用AsyncDisplayKit时,遇到问题处理的一些办法,如果有问题请在下方留言。