AsyncDisplayKit的基本使用单元是node. ASDisplayNode是一个UIView层之上的封装，就像UIView是对CALayer的封装一样。跟View不一样的是，node是线程安全（比如uiview的操作就不是线程安全的，在非UI线程无法操作UIView）的，就是说你在非主线程对node进行初始化以及配置它们的层级操作都是安全的。
为了让用户界面平滑并且随时可以相应，app需要一秒渲染60帧， 这在iOS上是一个非常好的效果。这意味着主线程有1/60s的时间来放置各个frame，也就是说是在用16ms来执行所有的布局以及绘制代码。并且由于系统overhead,你那些改变布局的代码实际上只有10ms的时间来执行。
AsyncDisplayKit让你把image的解码，text sizing和渲染，以及其他的在费时的UI从左放置在了其他线程。(在使用view的时候，这些操作都只能放置在UI线程)
Nodes 作为view的替代
如果你非常熟悉view的使用方式，那么你已经知道如何使用nodes了。node的API跟UIView是非常相似的并且拥有一些便利。你也可以直接获得layer的属性，为一个view或者layer层级增加一个node，可以直接使用node.view或者node.layer。
AsyncDisplayKit的核心组件包括:
ASDisplayNode 与UIView对应 — 用来扩展生成定制的nodes
ASControlNode 类似UIControl —- 用来扩展生成buttons.
ASImageNode 类似UIImageView —– 异步的图像解码
ASTextode 类似UITextView —— 在TextKit上支持所有的富文本特性
ASTableView和ASCollectionView —— UITableView和UICollectionView的扩展来支持nodes.
你可以用这些相关的类来替代相应的UIKit中对应的类，这样会带来性能上的提高。（这是使用AsyncDisplayKit的原因，实际上是提供了六种高效的类供我们使用）
举个例子：
_imageView = [[UIImageView alloc] init];
_imageView.image = [UIImage imageNamed:@"hello"];
_imageView.frame = CGRectMake(10.0f, 10.0f, 40.0f, 40.0f);
[self.view addSubview:_imageView];
如果用node的方式:
_imageNode = [[ASImageNode alloc] init];
_imageNode.backgroundColor = [UIColor lightGrayColor];
_imageNode.image = [UIImage imageNamed:@"hello"];
_imageNode.frame = CGRectMake(10.0f, 10.0f, 40.0f, 40.0f);
[self.view addSubview:_imageNode.view];
虽然替换成node之后没有体现出ASDK的异步sizing和布局的功能，但是从性能上也提高了。因为这里使用了imageNode,这样会使得在解码hello.png图片的时候是在异步线程，并且很有可能是在另外一个CPU core上进行的。
（注意我们设置了一个预设的背景色给node,在屏幕上”holding its place” 直到real 内容出现。这样对图片是有效的，但是对text是无效的，因为人们总是希望text立即出现，但是允许图片加载有延时)
Button nodes
ASImageNode和ASTextNode都是继承于ASControlNode,所以可以把它们当成button一样使用。举例来说，现在我们准备添加一个shuffle button.
<pre>
-
(void)viewDidLoad
{
[super viewDidLoad];// attribute a string
NSDictionary *attrs = @{
NSFontAttributeName: [UIFont systemFontOfSize:12.0f],
NSForegroundColorAttributeName: [UIColor redColor],
};
NSAttributedString *string = [[NSAttributedString alloc] initWithString:@"shuffle"
attributes:attrs];// create the node
_shuffleNode = [[ASTextNode alloc] init];
_shuffleNode.attributedString = string;// configure the button
_shuffleNode.userInteractionEnabled = YES; // opt into touch handling
[_shuffleNode addTarget:self
action:@selector(buttonTapped:)
forControlEvents:ASControlNodeEventTouchUpInside];// size all the things
CGRect b = self.view.bounds; // convenience
CGSize size = [_shuffleNode measure:CGSizeMake(b.size.width, FLT_MAX)];
CGPoint origin = CGPointMake(roundf( (b.size.width - size.width) / 2.0f ),
roundf( (b.size.height - size.height) / 2.0f ));
_shuffleNode.frame = (CGRect){ origin, size };// add to our view
[self.view addSubview:_shuffleNode.view];
} -
(void)buttonTapped:(id)sender
{
NSLog(@"tapped!");
}
</pre>
这样是符合我们的预期，但是button只有14/2的高，这样按钮会很难点。我们可以subclassing这个text节点，重写 -hitText:withEvent:,也可以用另外一种方式
CGFloat extendY = roundf( (44.0f - size.height) / 2.0f );
_shuffleNode.hitTestSlop = UIEdgeInsetsMake(-extendY, 0.0f, -extendY, 0.0f);
hitTextSlops对所有的节点都有效。
Custom nodes
对view进行Sizing或者layout一般情况下都是在主线程中完成的。 举个例子来说，一个custom UIView包含一个text view跟一个image view如下：
<pre>
-
(CGSize)sizeThatFits:(CGSize)size
{
// size the image
CGSize imageSize = [_imageView sizeThatFits:size];// size the text view
CGSize maxTextSize = CGSizeMake(size.width - imageSize.width, size.height);
CGSize textSize = [_textView sizeThatFits:maxTextSize];// make sure everything fits
CGFloat minHeight = MAX(imageSize.height, textSize.height);
return CGSizeMake(size.width, minHeight);
} -
(void)layoutSubviews
{
CGSize size = self.bounds.size; // convenience// size and layout the image
CGSize imageSize = [_imageView sizeThatFits:size];
_imageView.frame = CGRectMake(size.width - imageSize.width, 0.0f,
imageSize.width, imageSize.height);// size and layout the text view
CGSize maxTextSize = CGSizeMake(size.width - imageSize.width, size.height);
CGSize textSize = [_textView sizeThatFits:maxTextSize];
_textView.frame = (CGRect){ CGPointZero, textSize };
}
</pre>
这并不是理想化的方式，我们计算了subviews两次—第一次是计算我们的view需要多大，第二次是在view中布局subview. 尽管示例中的这种布局运算消耗非常小，但是如果有text sizing的话，这样就可能会阻塞主线程。
我们可以改变这种情况通过手动的cacheing subview的sizes,但是这样会带来一些其他问题。仅仅只增加_imageSize或者_textSize变量是不够的，比如text发生了改变，我们需要重新计算它的大小。
我们可以把sizing计算放到后台，但是UIView并不允许这么做。
Node hierarchies
我们定制的node可能如下：
#import <AsyncDisplayKit/AsyncDisplayKit+Subclasses.h>
// perform expensive sizing operations on a background thread
- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize
{
// size the image
CGSize imageSize = [_imageNode measure:constrainedSize];
// size the text node
CGSize maxTextSize = CGSizeMake(constrainedSize.width - imageSize.width,
constrainedSize.height);
CGSize textSize = [_textNode measure:maxTextSize];
// make sure everything fits
CGFloat minHeight = MAX(imageSize.height, textSize.height);
return CGSizeMake(constrainedSize.width, minHeight);
}
// do as little work as possible in main-thread layout
- (void)layout
{
// layout the image using its cached size
CGSize imageSize = _imageNode.calculatedSize;
_imageNode.frame = CGRectMake(self.bounds.size.width - imageSize.width, 0.0f,
imageSize.width, imageSize.height);
// layout the text view using its cached size
CGSize textSize = _textNode.calculatedSize;
_textNode.frame = (CGRect){ CGPointZero, textSize };
}
ASImageNode和ASTextNode,线程安全，可以在后台线程进行计算大小。 measure:方法跟sizeThatFits: 差不多，但是它额外的缓存了参数(constrainedSize)和结果(calculatedSize)。
定制Custom nodes的注意事项：
（1）nodes必须递归的计算所有的subNodes在calulateSizeThatFits:方法中。-measure方法只能再-calculateSizeThatFits：中被调用。
（2）Nodes需要把任何pre-layout计算放在calculateSizeThatFits:中
（3）nodes 必要的时候需要调用[self invaildateCalculatedSize],举个例子来说,ASTextNode在attributedString属性变化的时候就会invalidated他的calculated size.
比如，用node 来绘制一个彩虹效果:
@interface RainbowNode : ASDisplayNode
@end
@implementation RainbowNode
+ (void)drawRect:(CGRect)bounds
withParameters:(id<NSObject>)parameters
isCancelled:(asdisplaynode_iscancelled_block_t)isCancelledBlock
isRasterizing:(BOOL)isRasterizing
{
// clear the backing store, but only if we're not rasterising into another layer
if (!isRasterizing) {
[[UIColor whiteColor] set];
UIRectFill(bounds);
}
// UIColor sadly lacks +indigoColor and +violetColor methods
NSArray *colors = @[ [UIColor redColor],
[UIColor orangeColor],
[UIColor yellowColor],
[UIColor greenColor],
[UIColor blueColor],
[UIColor purpleColor] ];
CGFloat stripeHeight = roundf(bounds.size.height / (float)colors.count);
// draw the stripes
for (UIColor *color in colors) {
CGRect stripe = CGRectZero;
CGRectDivide(bounds, &stripe, &bounds, stripeHeight, CGRectMinYEdge);
[color set];
UIRectFill(stripe);
}
}
@end
realistic placeholders
Nodes 在render之前需要经过measurement以及display步骤。
使用ASDK，推荐的做法是当nodes的size被确定后，再添加到view的层级上。这样避免了布局在measurement完成之后进行改变，相反会让一个node在完全渲染之后才会再屏幕上出现。
一旦measurement 完成了，一个node可以精确的在屏幕上放置所有的subnodes–他们都是空白。最简单的方式来制造一个realistic placeholder是为你的node设置一个静态的背景色。这种效果会比一个generic placeholder image好，因为它会在内容加载的时候发生变化，并且对opaque images也正常。你也可以创建visually-appealing placeholder nodes,比如Paper里面的闪烁条的方式。
Working range
到目前位置，我们只讨论了异步的sizing.为了让很多内容在用户滑动的时候能够充分的被渲染，这要求了一种高级的触发显示。
如果你 app的内容是在一个scrollview中或者可以翻页，可以用working range的技术解决方案。一个working range controller 标记了可视区域范围，以及当前的显示的区域并且对优先对后面的内容进行了异步的渲染。当用户进行滚动的时候，一个或者两个之前滚动的内容会被保留，其他的会被清除掉。当在另一个方向上滚动的时候，the working range销毁了它的渲染队列，并且开始预渲染新方向的内容—因为设置了previous content的buffer,所以这个过程用户是不可见的。
AsyncDisplaykit 包含了一个generic working range controller,ASRangeController.
它的working range size 可以根据你的app来协调：如果你的nodes比较简单，一个iphone4都能维护一个大量的working range，但是如果重量级的nodes，它们应该是快速被修建的。
ASRangeController *rangeController = [[ASRangeController alloc] init];
rangeController.tuningParameters = (ASRangeTuningParameters){
.leadingBufferScreenfuls = 2.0f; // two screenfuls in the direction of scroll
.trailingBufferScreenfuls = 0.5f; // one-half screenful in the other direction
};
如果使用了working range,你需要根据不同的设备来设置tuning.
ASTableView
ASRangeController 管理了working ranges但是并没有显示内容。如果你的内容是在UITableView中被渲染的话，你可以使用ASTableView以及相应的custom nodes.ASTableView是UITableView的subclass让working range和 node-based cell协同作用。
网友评论