└── README.md /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: AsyncDisplayKit官方文档翻译 3 | date: 2016-05-04 20:51:01 4 | categories: 搬砖 5 | tags: [渲染] 6 | --- 7 | 8 | [AsyncDisplayKit 官方文档](http://asyncdisplaykit.org/docs/getting-started.html) 9 | 10 | 最近在拆解学习AsyncDisplayKit这个很知名的轮子，发现这个轮子内容还是非常庞大的，想要分解学习之前必然要先对这个项目如何使用如何工作有一个初步的概念，所以动手准备把官方文档简单的翻译一下，希望更多看不顺英文文档的人，能有个简单的粗略了解，有了这个粗略了解之后，打算再动手准备进行源码分析 11 | 12 | 完全没有翻译文档的经验，碰到一些用词不合适的时候，还是推荐对比这原文进行观看 13 | 14 | __有些名词，因为水平实在不佳，翻译过来后反而会让人混乱，产生误解，对照英文去看，感觉会清晰一些，哎╮(╯_╰)╭__ 15 | 16 | 如果大家愿意，可以一起帮忙修改，直接提pr 17 | 18 | [AsyncDisplayKitDocTranslation Github地址](https://github.com/Awhisper/AsyncDisplayKitDocTranslation) 19 | 20 | # 快速开始 21 | ## 准备开始 22 | 23 | AsyncDisplayKit的基础单元是Node，ASDisplayNode是UIView的抽象，就好像UIView是CALayer的抽象，但是不同于Views只能在主线程使用，Nodes是线程安全的，你可以并行在后台线程，实例化他们，配置他们整体的层次结构等 24 | 25 | iOS设备有一条黄金准则，想要保持用户交互的流畅和快速响应，你的app必须保证渲染达到每秒60帧。意思就是主线程只有1/60秒的时间来推动每一帧，执行所有布局和绘图代码的时间只有16毫秒！而且由于一些系统级别的开销，你的布局绘图代码一般情况超过10毫秒，就可能引起掉帧 26 | 27 | AsyncDisplayKit可以让你把图形解码，文本计算，渲染，等其他UI开销的操作移出主线程，还有一些其他的小把戏，我们后面会讲到 28 | 29 | ### Nodes节点 30 | 如果你之前使用过views，那么你应该已经知道如何使用nodes，大部分的方法都有一个等效的node，大部分的UIView和CALayer的属性都有类似的可用的。任何情况都会有一点点命名差异（例如，clipsToBounds和masksToBounds），node基本上都是默认使用UIView的名字，唯一的例外是node使用position而不是center 31 | 32 | 当然，你也可以直接访问底层view和layer，使用node.view和node.layer 33 | 34 | 一些AsyncDisplayKit核心节点包括： 35 | 36 | - AsDisplayNode:UIView子类对应使用，用于自定义view。 37 | - AsCellNode:UICollectionviewcell或UITableViewCell类对应使用，用于自定义cell。 38 | - AsControlNode:UIControl类对应使用，用于自定义按钮。 39 | - AsImageNode:UIImageView类对应使用，处理图形解码之类。 40 | - AsTextNode:UITextView类对应使用，建造全功能的富文本支持库。 41 | 42 | ### Node Containers节点容器 43 | 44 | 当在项目中替换使用AsyncDisplayKit的时候，一个经常犯的错误就是把一个Node节点直接添加到一个现有的view视图层次结构里。这样做会导致你的节点在渲染的时候会闪烁一下 45 | 46 | 相反，你应该你应该把nodes节点，当做一个子节点添加到一个容器类里。这些容器类负责告诉所包含的节点，他们现在都是什么状态，以便于尽可能有效的加载数据与渲染。你可以把这些类当做UIKit和ASDK的整合点 47 | 48 | 下面有4种节点容器 49 | 50 | - ASViewController. UIViewController 类型的容器，管理子节点 51 | - ASCollectionNode. UICollectionView 类型的容器，管理使用ASCellNode 52 | - ASTableNode. UITableView 类型的容器，管理使用ASCellNode 53 | - ASPagerNode. 一种特殊的ASCollectionNode 可以当做 UIPageViewController类型 54 | 55 | 56 | ### 排版引擎 57 | AsyncDisplayKit的排版引擎是非常强大并且独特的，基于CSS FlexBox模型。他提供了一种声明方式来约定自定义节点所属的子节点的大小和布局，当所有的节点同时被默认渲染和展现的时候，通过给每个节点提供一个ASLayoutSpec，异步的测量和布局。 58 | 59 | 这套排版引擎那个是基于ASLayouts的概念，他包含了位置，大小，ASLayoutSpecs等信息，ASLayoutSpecs定义了不同的布局概念用于计算输出ASLayout结果，排版区域最终由子节点和其他排版区域一同决定 60 | 61 | 其他排版区域包括： 62 | 63 | - ASLayoutSpec. 为相关节点提供位置和大小 64 | - ASStackLayoutSpec. 可以把节点按着类似stackview的方式排布 65 | - ASBackgroundLayoutSpec. 设置节点背景. 66 | - ASStaticLayoutSpec. 当要手动定义一组节点静态大小 67 | 68 | 69 | ## 收益 70 | ### 异步性能提升 71 | 72 | AsyncDisplayKit是一个UI框架，最初诞生于Facebook App。最开始Facebook团队面临一个很核心的问题：怎么能保证主线程尽可能的简洁，AsyncDisplayKit就是答案。 73 | 74 | 现在，很多应用程序都会频繁使用手势以及物理动画，再不济，你的app也会很广泛使用某种形式的滚动视图，这类型的用户交互是完全决定于主线程的流畅，并且对主线程的负荷十分敏感，一个被阻塞的主线程就意味着掉帧，卡顿，意味着很不愉快的用户体验 75 | 76 | AsyncDisplayKit的Node节点就是一个线程安全的抽象对象，基于UIView和CALayer 77 | 78 | [图就不翻译了] 79 | 80 | 当使用node节点的时候，你可以直接访问大部分的view和layer的属性，唯一区别是，当使用正确的时候，nodes通过异步进行计算，布局，最后默认同时进行渲染 81 | 82 | 想看更多地异步性能提升，请查看example/ASDKgram app，这个工程对比了基于UIKit的社交媒体demo，和基于ASDK的社交媒体demo 83 | 84 | 在iPhone6+上的性能提升不是很明显，但是在4S上，性能差距非常之大 85 | 86 | ### 强大的用户体验 87 | 88 | AsyncDisplayKit所带来的性能提升，可以让你为每个用户在所有设备上，在所有的网络环境下，提供强大的用户体验设计 89 | 90 | ### 强大的开发体验 91 | 92 | AsyncDisplayKit一样也在追求开发人员的使用体验，追求iOS&tvOS跨平台的特性，追求swift&OC语言的兼容性。只需要很少的代码就能构建很棒的app，清晰的架构，健壮的代码（参见examples/ASDKgram这个例子）（开发这个的都是一些超级聪明工作3年多的工程师） 93 | 94 | ### 高级的开发工具 95 | 96 | 随着AsyncDisplayKit逐渐成熟，很多聪明的工程师都加入一起构建这个项目，可以大幅度节省作为开发者，使用ASDK的开发时间 97 | 98 | 先进技术 99 | 100 | ASRunLoopQueue 101 | 102 | ASRangeController 智能预加载 103 | 104 | 网络工具 105 | 106 | automatic batch fetching (e.g. JSON payloads)自动批量抓取 107 | 108 | ## 安装 109 | 110 | __CocoaPods安装__ 111 | AsyncDisplayKit可以使用cocoapods安装，将下面的代码添加进入`Podfile` 112 | 113 | `pod 'AsyncDisplayKit'` 114 | 115 | __Carthage安装__ 116 | AsyncDisplayKit可以使用Carthage安装，将下面的代码添加进入`Cartfile ` 117 | 118 | `github "facebook/AsyncDisplayKit"` 119 | 120 | 在终端执行`carthage update`来构建AsyncDisplayKit库，会自动在项目根目录下生成Carthage名字的文件夹，里面有个build文件夹，可以用来framework到你打算使用的项目中 121 | 122 | __静态库__ 123 | AsyncDisplayKit可以当做静态库引入 124 | 125 | 1）拷贝整个工程到你的目录下，添加`AsyncDisplayKit.xcodeproj`到你的workspace 126 | 127 | 2）在build phases中，在Target Dependencies下添加AsyncDisplayKit Library 128 | 129 | 3）在build phases中，添加libAsyncDisplayKit.a, AssetsLibrary, Photos等框架到Link Binary With Libraries中 130 | 131 | 4）在build settings中，添加` -lc++`和`-ObjC`到 project linker flags 132 | 133 | __引用AsyncDisplayKit__ 134 | 135 | ```objectivec 136 | #import 137 | ``` 138 | 139 | # 核心概念 140 | 141 | ## 智能预加载 142 | node的功能很强大的原因是具有异步渲染和计算的能力，另一个至关重要的因素是ASDK的智能预加载方案。 143 | 144 | 正如在`准备开始`提到的那样，使用一个在节点容器上下文之外的节点是非常的没有意义的，这是因为所有的节点都有一个当前界面状态的概念。 145 | 146 | 这个界面状态的属性是不断的通过ASRangeController来进行更新，ASRangeController是由容器创建和内部维护的。 147 | 148 | 一个节点在容器之外被使用，是不会使它的状态得到rangeController的更新。有时候会产生的闪屏现象是由于，一个节点刚刚被渲染到屏幕之后又进行了一次渲染 149 | 150 | ### 界面状态区域 151 | 152 | 当节点被添加到滚动或者分页的控件的时候，一般都会遇到下面的几种情况。这就是说scrollview正在滚动，他的界面属性会随着移动一直在更新。 153 | 每个节点一定会处于以下几种范围： 154 | 155 | 数据范围：距离显示最远的区域，他们的数据已经收集准备完毕，无论是通过本地磁盘还是API，但远没有进行显示处理 156 | 显示范围：在这个范围，显示任务，比如文本光栅化，图像解码等正在进行 157 | 可见范围：这个node，至少有一个像素已经被渲染到屏幕上 158 | 159 | ### ASRangeTuningParameters 160 | 161 | 每一个范围的大小都是全屏去计算的，一般情况下，默认的尺寸就能很好的工作，但是你也可以通过设置滚动节点的区域类型参数，很简单的进行调整。 162 | 163 | [图就不翻译了，红色是可见范围，橙色是显示范围，黄色是数据范围] 164 | 165 | 上图就是一款app的截图，用户可以向下滚动，正如你所看到的，用户滚动方向区域（领先方向）的大小，要比用户离开方向区域（尾随方向）的大小，大得多。如果用户滚动的方向发生了改变，这两个区域的大小会动态的切换，以保证内存的最佳使用。你只需要考虑定义领先方向和尾随方向的区域大小，而不必担心滚动方向的变化。 166 | 167 | 在这个截图中，你还可以看到智能的预加载是如何在多维度下工作的，你可以看到一个垂直的滚动容器，你可以看到虽然有些node还未在红色的设备屏幕中出现，但是他有一个范围控制器，也有处在黄色的数据范围的node，和橙色的显示范围的node 168 | 169 | ### 界面状态回调 170 | 随着用户的滚动，nodes会移动穿过这些区域，并做出适当的反应，读取数据，渲染，等等。你自己创建的node子类可以很容易的通过实现相应的回调来精细设计他们 171 | 172 | 可见范围回调 173 | 174 | `- (void)visibilityDidChange:(BOOL)isVisible;` 175 | 176 | 显示范围回调 177 | 178 | `- (void)displayWillStart` 179 | 180 | `- (void)displayDidFinish` 181 | 182 | 数据范围回调 183 | 184 | `- (void)fetchData` 185 | 186 | `- (void)clearFetchedData` 187 | 188 | 189 | 最后，千万别忘记调用super 190 | 191 | ## 自定义子类 192 | 193 | 写一个node的子类，很像写一个UIView的子类，这有几条准则需要遵守，来确保你能够充分发挥这个框架的潜力，确保你的节点正常工作 194 | 195 | ### 基本重载方法 196 | 197 | `-init` 198 | 199 | 通常情况下，你都会写一些init方法，包括，调用`[super init]`，然后设置一些自定义的属性。这里需要记住的尤其重要的一点，你写的（node的）init方法必须能被任何的队列和线程调用，所以尤其要注意的一点就是，在init方法里确保不要初始化任何UIKit的对象 200 | 201 | `-didLoad` 202 | 203 | 这个方法很像UIViewController的`-viewDidLoad `，这个时间点支持视图已经被加载完毕，此时可以保证是主线程，因此，你可以在这个时机，设置UIKit相关对象 204 | 205 | `layoutSpecThatFits` 206 | 207 | 这个方法就是用来建立布局规则对象，产生节点大小以及所有子节点大小的地方，你创建的布局规则对象一直持续到这个方法返回的时间点，经过了这个时间点后，它就不可变了。尤其重要要记住的一点事，千万不要缓存布局规则对象，当你以后需要他的时候，请重新创建 208 | 209 | `layout` 210 | 211 | 在这个方法里调用super之后，布局规则对象会把所有的子节点都计算并且定位好，所以这个时间点是你手动进行布局所有子view的时机。或许更有用的是，有时候你想手动布局，但并不太容易创建一个布局规则对象，或者有时候你不想等所有子节点布局完毕，而只是很简单的手动设置frame，如果是这样的话，就在这个方法里写 212 | 213 | ## 排版引擎 214 | 215 | AsyncDisplayKit的排版引擎是基于CSS Box模型，它具有类似UIKit（自动布局）一样的特征，一旦你习惯它，就会发现这是他最有用的特点。只要有足够的联系，你就会越来越习惯通过创建布局声明来实现基础约束。 216 | 217 | 218 | 想要参与这个过程的主要方式就是通过在子类中实现`layoutSpecThatFits:`方法，在这里你声明和建立布局规则对象，返回最重的包含所有信息的对象 219 | 220 | 221 | ```objectivec 222 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize 223 | { 224 | ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec]; 225 | verticalStack.direction = ASStackLayoutDirectionVertical; 226 | verticalStack.spacing = 4.0; 227 | [verticalStack setChildren:_commentNodes]; 228 | 229 | return verticalStack; 230 | } 231 | ``` 232 | 233 | 尽管这个例子非常简单，但是它给了你一个思路，如何去使用布局规则对象，一个stack布局规则对象为例，定义了一种子节点们相邻的布局方式，确定了方向，间隔的定义，他看起来很像UIStackView，但是可以支持低版本iOS 234 | 235 | ### ASLayoutable 236 | 237 | 布局规则对象的孩子，可以是任何对象，只要他遵从``协议，所有的nodes和布局规则对象都遵从这个协议，就是说你的布局，可以用任何你想的对象来建立。 238 | 239 | 比如，你想要添加8像素的间隔给这个你刚刚建立好的stack 240 | 241 | ```objectivec 242 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize 243 | { 244 | ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec]; 245 | verticalStack.direction = ASStackLayoutDirectionVertical; 246 | verticalStack.spacing = 4.0; 247 | [verticalStack setChildren:_commentNodes]; 248 | 249 | UIEdgeInsets insets = UIEdgeInsetsMake(8, 8, 8, 8); 250 | ASInsetLayoutSpec *insetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets 251 | child:verticalStack]; 252 | 253 | return insetSpec; 254 | } 255 | 256 | ``` 257 | 258 | 你可以很容易就完成 259 | 260 | 当然，使用布局规则对象需要一些联系，可以看layout section部分 261 | 262 | # 节点容器 263 | ## 容器总览 264 | ### 在节点容器中使用节点 265 | 266 | 强烈建议你通过节点容器，来使用AsyncDisplayKit的节点，AsyncDisplayKit提供了下面4种节点 267 | 268 | - ASViewController 类似 UIKit's UIViewController 269 | - ASCollectionNode 类似 UIKit's UICollectionView 270 | - ASPagerNode 类似 UIKit's UIPageViewController 271 | - ASTableNode 类似 UIKit's UITableView 272 | 273 | 例子demo在每个节点容器的文档中被高亮展示了 274 | 275 | 想要详细的从UIKit移植app到AsyncDisplayKit信息，请看移植指南 276 | 277 | ### 使用节点容器有什么好处 278 | 279 | 介电容器自动管理着子节点的智能预加载，所有的子节点都可以异步的执行布局计算，获取数据，解码，渲染。正因为此，推荐在节点容器内使用节点 280 | 281 | 注意：确实可以直接使用节点不使用节点容器，但他们只会在出现到屏幕上的时候展现一次，这样会导致性能退化，或者闪烁 282 | 283 | ## ASViewController 284 | ASViewController是UIViewController的子类，并且添加了很多和ASDisplayNode层级相关的功能 285 | 286 | ASViewController可以被当做UIViewController来使用，包括套在一个UINavigationController，UITabBarController，UISpitViewController里面 287 | 288 | 使用ASViewController的一大好处是节省内存，当ASViewController离开屏幕的时候会自动减少其子node的数据范围（前文提到）和显示范围（前文提到），这是大型app管理的关键 289 | 290 | 除此之外还有更多地功能，把它当做你app的基础ViewController的基类是一个不错的选择。 291 | 292 | UIViewController提供他自己的view，ASViewController提供了他自己的node，是在`-initWithNode:`方法中创建的 293 | 294 | 你可以参考下面这个ASViewController的子类PhotoFeedNodeController，在ASDKgram sample app里面，你可以看到他是如何管理和使用一个列表节点的 295 | 296 | 这个列表节点就是在`-initWithNode:`方法中创建的 297 | 298 | ```objectivec 299 | - (instancetype)init 300 | { 301 | _tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain]; 302 | self = [super initWithNode:_tableNode]; 303 | 304 | if (self) { 305 | _tableNode.dataSource = self; 306 | _tableNode.delegate = self; 307 | } 308 | 309 | return self; 310 | } 311 | ``` 312 | 313 | 如果你的app已经有了很复杂的viewcontroller层级，你最好把他们都改成继承自ASViewController，就是说，即便你不使用ASViewController的`-initWithNode:`方法，你只是把它当做传统的UIViewController来使用，当你一旦选择不同的使用方式，他就能给你节点管理方面的支持 314 | 315 | ## ASTableNode 316 | 317 | ASTableNode等效于UIKit的UITableview，而且可以拿来替换UITableView 318 | 319 | ASTableNode替换UITableView以下方法 320 | `- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath` 321 | 322 | 替换成下面这两种方法之一 323 | 324 | `- (ASCellNode *)tableView:(ASTableView *)tableView nodeForRowAtIndexPath:(NSIndexPath *)indexPath` 325 | 326 | `- (ASCellNodeBlock)tableView:(ASTableView *)tableView nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath` 327 | 328 | 建议你使用nodeBlock的版本，以便这些节点可以同时进行准备和显示处理，所有的子节点都可以在后台线程进行初始化，所以一定要保持他们的代码是线程安全的。 329 | 330 | 这两个方法都需要返回一个ASCellNode或者ASCellNodeBlock。一个ASCellNodeBlock是用来在后台创建ASCellNode的，注意ASCellNode在ASTableNode，ASCollectionNode，ASPagerNode都有使用 331 | 332 | 请注意这两个方法都不需要重用机制！ 333 | 334 | ### 用ASViewController替换UITableViewController 335 | 336 | AsyncDisplayKit并没有提供一个类似UITableViewController的东西，你需要使用ASViewController初始化一个ASTableNode 337 | 338 | 继续可以参照ASViewController的子类PhotoFeedNodeController，在ASDKgram sample app里面 339 | 340 | 一个ASTableNode在ASViewController的`-initWithNode: `方法初始化 341 | ```objectivec 342 | - (instancetype)init 343 | { 344 | _tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain]; 345 | self = [super initWithNode:_tableNode]; 346 | 347 | if (self) { 348 | _tableNode.dataSource = self; 349 | _tableNode.delegate = self; 350 | } 351 | 352 | return self; 353 | } 354 | ``` 355 | 356 | ### node block线程安全警告 357 | 保证node block 的代码一定要是线程安全的，一方面要保证块里面的数据对外面是可访问的，所以你不应该使用block内的索引 358 | 359 | 继续参考子类PhotoFeedNodeController，在ASDKgram sample app里面的例子，` -tableView:nodeBlockForRowAtIndexPath:`这个方法 360 | 361 | 这个例子可以看出来，如何在使用索引，访问photo的模型 362 | 363 | ```objectivec 364 | - (ASCellNodeBlock)tableView:(ASTableView *)tableView nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath 365 | { 366 | PhotoModel *photoModel = [_photoFeed objectAtIndex:indexPath.row]; 367 | 368 | // this may be executed on a background thread - it is important to make sure it is thread safe 369 | ASCellNode *(^cellNodeBlock)() = ^ASCellNode *() { 370 | PhotoCellNode *cellNode = [[PhotoCellNode alloc] initWithPhoto:photoModel]; 371 | cellNode.delegate = self; 372 | return cellNode; 373 | }; 374 | 375 | return cellNodeBlock; 376 | } 377 | ``` 378 | 379 | ### 列表行高 380 | 381 | 一个很重要的事情就是，ASTableNode并不提供类似UITableview的`-tableView:heightForRowAtIndexPath:`方法 382 | 383 | 这是因为节点基于自己的约束来确定自己的高度，就是说你不再需要写代码来确定这个细节 384 | 385 | 一个node通过`-layoutSpecThatFits:`方法返回的布局规则确定了行高，所有的节点只要提供了约束大小，就有能力自己确定自己的尺寸 386 | 387 | 在默认的情况下，tableNode提供了Cell的尺寸约束范围，最小宽度和最低高度是0，最大宽度是tablenode的宽度，最大高度是MAX_FLOAT，这就是说，tablenode的cell，总是填满tablenode的全宽，他的高度是自己计算自适应的 388 | 389 | 如果你对一个ASCellNode调用了`setNeedsLayout`，他会自动的把布局传递，如果整体所需要的大小发生了变化，表会被告知要进行更新 390 | 391 | 和UIKit不同的时，你不需要调用reload，这样很节省了代码，可以看ASDKgram sample来看一个table的具体实现 392 | 393 | 394 | ## ASCollectionNode 395 | 396 | ASCollectionNode就是类似UIKit的UICollectionView，可以拿来代替UICollectionView 397 | 398 | ASCollectionNode替换UICollectionView的时候需要把下面这个方法 399 | 400 | `- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;` 401 | 402 | 替换成下面2个之一 403 | 404 | `- (ASCellNode *)collectionView:(ASCollectionView *)collectionView nodeForItemAtIndexPath:(NSIndexPath *)indexPath` 405 | 406 | `- (ASCellNodeBlock)collectionView:(ASCollectionView *)collectionView nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath` 407 | 408 | 同tablenode一样，推荐使用block的版本 409 | 410 | 正如前面说过的 411 | 412 | - ASCollectionNodes不需要重用。 413 | - nodeBlock的方法建议使用。 414 | - 块内要求是线程安全的，这一点很重要。 415 | - ASCellNodes可由ASTableNode，ASCollectionNode和ASPagerNode使用 416 | 417 | ### 用ASViewController替换UICollectionViewController 418 | 419 | AsyncDisplayKit并没有提供类似UICollectionViewController的类，你还是需要使用ASViewController，初始化的时候创建一个ASCollectionNode，在`-initWithNode:`方法里 420 | 421 | ```objectivec 422 | - (instancetype)init 423 | { 424 | _flowLayout = [[UICollectionViewFlowLayout alloc] init]; 425 | _collectionNode = [[ASCollectionNode alloc] initWithCollectionViewLayout:_flowLayout]; 426 | 427 | self = [super initWithNode:_collectionNode]; 428 | if (self) { 429 | _flowLayout.minimumInteritemSpacing = 1; 430 | _flowLayout.minimumLineSpacing = 1; 431 | } 432 | 433 | return self; 434 | } 435 | ``` 436 | 437 | ASTableNode,ASPagerNode都是这样工作的 438 | 439 | ### 访问ASCollectionView 440 | 441 | 如果你用过以前版本的ASDK，你会发现，为了方便ASCollectionNode，ASCollectionView已经被移除了， 442 | 443 | ASCollectionView是UICollectionView的子类，仍然是通过ASCollectionNode内部来使用。虽然他不可以被直接创建，但是他可以通过ASCollectionNode的.view属性来访问，但是别忘了，一个节点的视图，只有在viewdidload 或者didload之后，才可以进行访问 444 | 445 | 下面的这个例子可以看出来，直接访问ASCollectionView 446 | 447 | ```objectivec 448 | - (void)viewDidLoad 449 | { 450 | [super viewDidLoad]; 451 | 452 | _collectionNode.view.asyncDelegate = self; 453 | _collectionNode.view.asyncDataSource = self; 454 | _collectionNode.view.allowsSelection = NO; 455 | _collectionNode.view.backgroundColor = [UIColor whiteColor]; 456 | } 457 | 458 | ``` 459 | 460 | ### CELL计算和布局 461 | 462 | 就像之前提到过的，ASCollectionNode和ASTableNode不需要计算他们的CellNode的高度 463 | 464 | 现在，无论采用哪种UICollectionViewLayout，cell可以根据约束的大小来自动布局自适应， 465 | 466 | 不久之后，会有一个类似ASTableNode的`constrainedSizeForRow:`方法，但是现在，如果你需要在collectionNode里约束一个cellNode，你需要包装处理一下约束规则对象 467 | 468 | ### 例子 469 | 470 | 最详细的ASCollectionNode例子就是CustomCollectionView，包括自定义的ASCollectionNode与UICollectionViewLayout. 471 | 472 | 更多地demo请看 473 | 474 | - ASDKgram 475 | - CatDealsCollectionView 476 | - ASCollectionView 477 | 478 | 479 | ## ASPagerNode 480 | 481 | ASPagerNode是ASCollectionNode的子类，他特别定制了UICollectionViewLayout 482 | 483 | 使用ASPagerNode可以让你开发类似UIKit中UIPageViewController的效果，ASPagerNode目前只支持在滚动停留到正确的位置，但还不支持循环滚动 484 | 485 | 最核心的数据源方法如下 486 | 487 | `- (NSInteger)numberOfPagesInPagerNode:(ASPagerNode *)pagerNode` 488 | 489 | `- (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index` 490 | 491 | `- (ASCellNodeBlock)pagerNode:(ASPagerNode *)pagerNode nodeBlockAtIndex:(NSInteger)index` 492 | 493 | 后面这两种方法就像ASCollectionNode 和 ASTableNode一样需要返回ASCellNode 或者ASCellNodeBlock，用于创建可以在后台线程运行的ASCellNode 494 | 495 | 496 | 注意，这些方法都不要写重用逻辑，不像UIKit，这些方法在即将要显示的时候，是不会调用的 497 | 498 | `-pagerNode:nodeAtIndex:`会在主线程被调用, `-pagerNode:nodeBlockAtIndex:`更推荐使用，因为所有的node的初始化方法都可能在背景线程和主线程中调用，所以一定要确保block中的代码线程安全 499 | 500 | ### nodeblock线程安全警告 501 | 502 | 保证node block 的代码一定要是线程安全的，一方面要保证块里面的数据对外面是可访问的，所以你不应该使用block内的索引 503 | 504 | 可以看下面的例子 505 | 506 | ```objectivec 507 | - (ASCellNodeBlock)pagerNode:(ASPagerNode *)pagerNode nodeBlockAtIndex:(NSInteger)index 508 | { 509 | PhotoModel *photoModel = _photoFeed[index]; 510 | 511 | // this part can be executed on a background thread - it is important to make sure it is thread safe! 512 | ASCellNode *(^cellNodeBlock)() = ^ASCellNode *() { 513 | PhotoCellNode *cellNode = [[PhotoCellNode alloc] initWithPhoto:photoModel]; 514 | return cellNode; 515 | }; 516 | 517 | return cellNodeBlock; 518 | } 519 | 520 | ``` 521 | 522 | ### 优化使用ASViewController 523 | 524 | 一个很有效的方式是，直接返回ASViewController中初始化好的ASCellNode，所以还是推荐使用ASViewController 525 | 526 | ```objectivec 527 | - (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index 528 | { 529 | NSArray *animals = self.animals[index]; 530 | 531 | ASCellNode *node = [[ASCellNode alloc] initWithViewControllerBlock:^{ 532 | return [[AnimalTableNodeController alloc] initWithAnimals:animals];; 533 | } didLoadBlock:nil]; 534 | 535 | node.preferredFrameSize = pagerNode.bounds.size; 536 | 537 | return node; 538 | } 539 | ``` 540 | 541 | 在这个例子这种，你可以看到节点通过`initWithViewControllerBlock `方法进行约束，为了正确的布局，还是需要提供一个希望的framesize 542 | 543 | 例子 544 | 545 | - PagerNode 546 | - VerticalWithinHorizontalScrolling 547 | 548 | # 节点 549 | 550 | ## ASDisplayNode 551 | 552 | ### 最基础的节点 553 | ASDisplayNode是最主要的UIView和CALayer的抽象对象，他初始化的时候拥有一个UIView，同时UIView在初始化的时候拥有一个CALayer 554 | 555 | ```objectivec 556 | ASDisplayNode *node = [[ASDisplayNode alloc] init]; 557 | node.backgroundColor = [UIColor orangeColor]; 558 | node.bounds = CGRectMake(0, 0, 100, 100); 559 | 560 | NSLog(@"Underlying view: %@", node.view); 561 | ``` 562 | Node和UIView具有一样的属性，所以使用起来非常像UIKit 563 | 564 | 无论是view还是layer的属性，都可以通过node进行访问 565 | 566 | ```objectivec 567 | ASDisplayNode *node = [[ASDisplayNode alloc] init]; 568 | node.clipsToBounds = YES; // not .masksToBounds 569 | node.borderColor = [UIColor blueColor]; //layer name when there is no UIView equivalent 570 | 571 | NSLog(@"Backing layer: %@", node.layer); 572 | ``` 573 | 574 | 你可以看到，默认命名是照着UIView的习惯，除非这个属性是UIView不具备的，你就像处理普通UIView一样，去访问底层的CALayer 575 | 576 | 当我们使用了节点容器，节点的属性会在背景线程被设置和使用，背后的view/layer会延迟懒加载生成约束，你不需要去担心跳入背景线程要注意什么，因为框架都处理好了，但是你也要了解都发生了什么 577 | 578 | ### 页面包装 579 | 580 | 某些情况下，需要初始化一个节点，提供一个view当做基础view。这些view需要一个block来处理之后被保存的view（有点绕。。我也没太懂。） 581 | 582 | 这些节点展示的步骤是同步的，这是因为节点只有在被包上一层_ASDisplayView后，才可以异步，现在他只是包在普通UIView上 583 | 584 | ```objectivec 585 | ASDisplayNode *node = [ASDisplayNode alloc] initWithViewBlock:^{ 586 | SomeView *view = [[SomeView alloc] init]; 587 | return view; 588 | }]; 589 | ``` 590 | 591 | 这样可以让你把一个UIView子类包装成一个ASDisplayNode子类 592 | 593 | 唯一要注意的时node使用position，不是center 594 | 595 | ## ASCellNode 596 | 597 | ASCellNode 可能是最常用的节点子类了，他可以被用于ASTableNode和ASCollectionNode 598 | 599 | 就像其他子类继承自ASDisplayNode，ASCellNode更重要的是需要重写`-init`方法初始化 `-layoutSpecThatFit:`来布局和计算，如果需要，重写`-didLoad`来添加额外的手势或者额外的布局 600 | 601 | 如果你不喜欢继承，你也可以使用`-initWithView `和`-initWithViewController`方法来返回一个节点，他的内部view就是通过已经存在的view来创建的 602 | 603 | ## ASTextCellNode 604 | 605 | 敬请期待...... 606 | 607 | ## ASControlNode 608 | 609 | 敬请期待...... 610 | 611 | 点击区域可视化 612 | 613 | 只用一行代码，就可以轻松的把所有的ASControlNode的点击区域可视化，通过这个工具hit test slop debug tool. 614 | 615 | ## ASButtonNode 616 | 617 | ASButtonNode是ASControlNode的子类，提供了简单button的功能，有多重状态，标签，图片，和布局选项，开启layerBacking可以显著减少button对主线程的影响 618 | 619 | 功能： 620 | 621 | - 支持更换背景图片 622 | - 支持更换标签 623 | - 支持更换文字对齐 624 | - 支持更换内容边界控制 625 | - 提供方法来制作富文本标签 626 | 627 | 小心： 628 | 选择selected属性的逻辑应该由开发者处理，点击buttonNode不会自动的开启selected 629 | 630 | ## ASTextNode 631 | 632 | 敬请期待...... 633 | 634 | ## ASEditableTextNode 635 | 636 | ASEditableTextNode提供了一个灵活的高效的动画有好的可编辑文本控件 637 | 638 | 功能：sizeRange比constrainedSize允许更大的长文本，支持占位符 639 | 小心：不支持 layer backing 640 | 例子：examples/editableText 641 | 642 | ## ASImageNode 643 | 644 | 敬请期待...... 645 | 646 | ASImageNode性能提示 647 | 648 | 只需要一行代码就可以方便的查看app没有下载和渲染的过量图形数据，或者低质量的图形数据，使用这个工具pixel scaling debug tool. 649 | 650 | ## ASNetworkImageNode 651 | ASNetworkImageNode用来展示那些被远程存储的图片，所有你要做的只是设置好URL，需要是一个NSURL实例，并且图片会异步的被夹在，正确的被读取 652 | 653 | ```objectivec 654 | ASNetworkImageNode *imageNode = [[ASNetworkImageNode alloc] init]; 655 | imageNode.URL = [NSURL URLWithString:@"https://someurl.com/image_uri"]; 656 | ``` 657 | 658 | ### 布局一个网图节点 659 | 660 | 一个网图节点在还没有真实地大小的时候，是有必要指定一个特定得布局的 661 | 662 | 方法1：preferredFrameSize 663 | 664 | 如果你有一个标准大小，你希望这个image节点可以按着布局，你可以使用这个属性 665 | 666 | ```objectivec 667 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint 668 | { 669 | imageNode.preferredFrameSize = CGSizeMake(100, 200); 670 | ... 671 | return finalLayoutSpec; 672 | } 673 | ``` 674 | 675 | 方法2：ASRatioLayoutSpec 676 | 677 | 这个场景是一个绝好的使用ASRatioLayoutSpec的场景，不去设置静态的大小，你可以指定当图像下载完成时，和图像保持比例， 678 | 679 | ```objectivec 680 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint 681 | { 682 | CGFloat ratio = 3.0/1.0; 683 | ASRatioLayoutSpec *imageRatioSpec = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:ratio child:self.imageNode]; 684 | ... 685 | return finalLayoutSpec; 686 | } 687 | ``` 688 | 689 | ### 外部引用 690 | 691 | 如果你不打算引入PINRemoteImage和PINCache，你会失去对jpeg的更好的支持，你需要自行引入你自己的cache系统，需要遵从ASImageCacheProtocol 692 | 693 | ### 渐进式JPEG支持 694 | 695 | 得益于PINRemoteImage，网图节点可以全面支持，有进度下载的JPEG图片，如果你的服务器提供这个功能，你的图片就可以展示的非常快，先加载低质量图，慢慢展示 696 | 697 | 逐步加载图片是很重要的，如果服务器被要求使用普通的JPEGS，但是给你提供了多个版本的图片数据，你可以使用ASMultiplexImageNode 698 | 699 | 700 | ### 自动缓存 701 | ASNetworkImageNode使用PINCache 来自动处理网络图片缓存 702 | 703 | ## ASMultiplexImageNode 704 | 705 | 如果你不能使用渐进式JPEG，但是你可以处理同一个图的几个不同尺寸的图形数据，你可以使用ASMultiplexImageNode代替ASNetworkImageNode 706 | 707 | 在下面的例子里，你就是在CellNode里用了一个多图形节点，初始化之后，你通常需要做2个事情， 708 | 709 | 第一，确保downloadsIntermediateImages设置为YES，这样方便快速下载 710 | 711 | 第二，分配一个数组里面对应着图片类型key 和 value，这样将帮助节点选择下载哪个URL，尝试加载 712 | 713 | ```objectivec 714 | - (instancetype)initWithURLs:(NSDictionary *)urls 715 | { 716 | ... 717 | _imageURLs = urls; // something like @{@"thumb": "/smallImageUrl", @"medium": ...} 718 | 719 | _multiplexImageNode = [[ASMultiplexImageNode alloc] initWithCache:nil 720 | downloader:[ASBasicImageDownloader sharedImageDownloader]]; 721 | _multiplexImageNode.downloadsIntermediateImages = YES; 722 | _multiplexImageNode.imageIdentifiers = @[ @"original", @"medium", @"thumb" ]; 723 | 724 | _multiplexImageNode.dataSource = self; 725 | _multiplexImageNode.delegate = self; 726 | ... 727 | } 728 | ``` 729 | 730 | 然后，如果你已经设置好了一个字典来保存已有的KEY和URL，你就可以简单的返回URL给对应的KEY 731 | 732 | ```objectivec 733 | #pragma mark Multiplex Image Node Datasource 734 | 735 | - (NSURL *)multiplexImageNode:(ASMultiplexImageNode *)imageNode 736 | URLForImageIdentifier:(id)imageIdentifier 737 | { 738 | return _imageURLs[imageIdentifier]; 739 | } 740 | ``` 741 | 742 | 也有一个delegate可以方便你显示下载进度，展示的时候，你可以根据需求更新你的方法 743 | 744 | 比如，下面的例子，当你一个新的图片下载完成后，你需要一个回调 745 | 746 | ```objectivec 747 | #pragma mark Multiplex Image Node Delegate 748 | 749 | - (void)multiplexImageNode:(ASMultiplexImageNode *)imageNode 750 | didUpdateImage:(UIImage *)image 751 | withIdentifier:(id)imageIdentifier 752 | fromImage:(UIImage *)previousImage 753 | withIdentifier:(id)previousImageIdentifier; 754 | { 755 | // this is optional, in case you want to react to the fact that a new image came in 756 | } 757 | ``` 758 | 759 | ## ASMapNode 760 | 761 | ASMapNode提供了一个完整的异步准备，自动预加载，高效内存处理的节点 762 | ，他的标准模式下，是异步快照的形式，ASTableView 和 ASCollectionView 会自动触发liveMap模式，liveMode模式可以轻松的提供缓存，这是地图交互所必须的 763 | 764 | 功能：使用MKMapSnapshotOptions所规定的主要形式，允许无缝过度地图快照和3D相机模式，允许滚动时候自动异步加载 765 | 766 | 不足：MKMapView 不是线程安全的 767 | 768 | ## ASVideoNode 769 | ASVedioNode是一个新的功能，并且专为方便高效的在滚动试图里嵌入视频 770 | 771 | 功能：当对象可见，支持自动播放，哪怕是他们在滚动容器内（ASPagerNode or ASTableNode），如果提供了URL缩略图占位符可以异步下载，如果不提供也可以将解码第一帧当做展位图 772 | 773 | 不足：必须使用AVFoundation 这个库 774 | 775 | 例子：examples/videosTableview - examples/videos 776 | 777 | ## ASScrollNode 778 | 779 | 敬请期待...... 780 | 781 | # 排版引擎 782 | ## 排版基础 783 | 784 | ### 盒子模型排版 785 | 786 | ASLayout是一个自动的，异步的，纯OC盒子模型排版的布局功能，是一种CSS flex box的简单版，ComponetKit的简化版本，他的目的是让你的布局居右可扩展和复用性 787 | 788 | UIView的实例存储位置，大小是通过center和bounds的属性，当约束条件发生变化，CoreAnimation会调用layoutSubviews，告诉view需要更新界面 789 | 790 | 实例（所有的ASDisplayNodes和子类）不需要大小和位置信息，相反，AsyncDisplayKit会调用layoutSpecThatFits方法通过给一个约束来描述大小和位置信息 791 | 792 | ### 术语 793 | 794 | 术语可能有点混乱，所以在这里对所有ASDK自动布局进行简单的说明： 795 | 796 | 协议定义了测量物体布局的方法，符合协议的对象就有相关的能力。通过ASLayout返回的值，必须有2个前提要确定，1，layoutable对象的大小（不一定是位置），2其所有子节点的大小与位置。通过递推树来让父节点计算布局确定最终的结果。 797 | 798 | 这个协议是所有布局相关协议的家，包含所有的ASXXLayoutSpec协议，这些协议包含着布局的规则和选项，例如，ASStackLayoutSpec具有限定layoutable如何缩小或放大根据可用空间的作用。这些布局选项都保存在ASLayoutOptions类，一般来说你不需要担心布局选项。如果要创建自定义布局规则，你可以扩展去适应新的布局选项。 799 | 800 | 所有的ASDisplayNodes和他的子类，以及ASLayoutSpecs都符合这个协议 801 | 802 | 一个ASLayoutSpec是一个不可变的描述布局的对象，布局规范的创建要通过layoutSpecThatFits：方法，一个布局规范的创建和修改，一旦它传给ASDK，所有的属性都将变成不可变，并且任何设置改变都将导致断言 803 | 804 | 每个ASLayoutSpec至少要作用在一个孩子上，ASLayoutSpec持有这个孩子，一些约束规则如ASInsetLayoutSpec，只需要一个孩子，其他的规则需要多个孩子。 805 | 806 | 你不需要了解ASLayout，只需要知道他代表着一个不变的布局树，而且通过遵循协议的对象返回 807 | 808 | ### UIKit组件布局 809 | 810 | - 对于直接添加UIView，你需要手动的在`didLoad:`处理 811 | - 对于添加到ASDK得UIView，你可以在`layoutSpecThatFits:`处理 812 | 813 | ## 布局容器 814 | 815 | AsyncDisplayKit包含有一套布局的组件，下面的LayoutSpecs允许你可以拥有多个孩子 816 | 817 | - ASStackLayoutSpec 基于CSS Flexbox的一个简化版本，可以水平或者垂直的排布堆栈组件，并制定如何对其，如何适应空间 818 | 819 | - ASStaticLayoutSpec 允许你固定孩子的偏移 820 | 821 | 下面LayoutSpecs允许你布局单一的孩子 822 | 823 | - ASLayoutSpec 可以在没有孩子的时候使用 824 | - ASInsetLayoutSpec 可以处理Inset环绕空余型的孩子 825 | - ASBackgroundLayoutSpec 可以用于拉伸背后一个组件做背景 826 | - ASOverlayLayoutSpec 拼接上面的一个组件 827 | - ASCenterLayoutSpec 中心可用布局 828 | - ASRatioLayoutSpec 固定的比例布局图片GIF视频 829 | - ASRelativeLayoutSpec 9宫格缩放布局 830 | 831 | ## 布局样例 832 | 833 | 3个逐渐复杂的样例 834 | 835 | ### NSSpain Talk例子 836 | [图不翻译了] 837 | 838 | ```objectivec 839 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint 840 | { 841 | ASStackLayoutSpec *vStack = [[ASStackLayoutSpec alloc] init]; 842 | 843 | [vStack setChildren:@[titleNode, bodyNode]; 844 | 845 | ASStackLayoutSpec *hstack = [[ASStackLayoutSpec alloc] init]; 846 | hStack.direction = ASStackLayoutDirectionHorizontal; 847 | hStack.spacing = 5.0; 848 | 849 | [hStack setChildren:@[imageNode, vStack]]; 850 | 851 | ASInsetLayoutSpec *insetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(5,5,5,5) child:hStack]; 852 | 853 | return insetSpec; 854 | } 855 | ``` 856 | 857 | ### 社交APP布局 858 | 859 | [图不翻译了] 860 | 861 | ```objectivec 862 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize 863 | { 864 | // header stack 865 | _userAvatarImageView.preferredFrameSize = CGSizeMake(USER_IMAGE_HEIGHT, USER_IMAGE_HEIGHT); // constrain avatar image frame size 866 | 867 | ASLayoutSpec *spacer = [[ASLayoutSpec alloc] init]; 868 | spacer.flexGrow = YES; 869 | 870 | ASStackLayoutSpec *headerStack = [ASStackLayoutSpec horizontalStackLayoutSpec]; 871 | headerStack.alignItems = ASStackLayoutAlignItemsCenter; // center items vertically in horizontal stack 872 | headerStack.justifyContent = ASStackLayoutJustifyContentStart; // justify content to left side of header stack 873 | headerStack.spacing = HORIZONTAL_BUFFER; 874 | 875 | [headerStack setChildren:@[_userAvatarImageView, _userNameLabel, spacer, _photoTimeIntervalSincePostLabel]]; 876 | 877 | // header inset stack 878 | 879 | UIEdgeInsets insets = UIEdgeInsetsMake(0, HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER); 880 | ASInsetLayoutSpec *headerWithInset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:headerStack]; 881 | headerWithInset.flexShrink = YES; 882 | 883 | // vertical stack 884 | 885 | CGFloat cellWidth = constrainedSize.max.width; 886 | _photoImageView.preferredFrameSize = CGSizeMake(cellWidth, cellWidth); // constrain photo frame size 887 | 888 | ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec]; 889 | verticalStack.alignItems = ASStackLayoutAlignItemsStretch; // stretch headerStack to fill horizontal space 890 | 891 | [verticalStack setChildren:@[headerWithInset, _photoImageView, footerWithInset]]; 892 | 893 | return verticalStack; 894 | } 895 | ``` 896 | 897 | 完整的ASDK工程可以查阅 example/ASDKgram 898 | 899 | ### 社交APP布局2 900 | 901 | [图不翻译了] 902 | 903 | ```objectivec 904 | - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize { 905 | 906 | ASLayoutSpec *textSpec = [self textSpec]; 907 | ASLayoutSpec *imageSpec = [self imageSpecWithSize:constrainedSize]; 908 | ASOverlayLayoutSpec *soldOutOverImage = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:imageSpec 909 | overlay:[self soldOutLabelSpec]]; 910 | 911 | NSArray *stackChildren = @[soldOutOverImage, textSpec]; 912 | 913 | ASStackLayoutSpec *mainStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical 914 | spacing:0.0 915 | justifyContent:ASStackLayoutJustifyContentStart 916 | alignItems:ASStackLayoutAlignItemsStretch 917 | children:stackChildren]; 918 | 919 | ASOverlayLayoutSpec *soldOutOverlay = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:mainStack 920 | overlay:self.soldOutOverlay]; 921 | 922 | return soldOutOverlay; 923 | } 924 | 925 | - (ASLayoutSpec *)textSpec { 926 | CGFloat kInsetHorizontal = 16.0; 927 | CGFloat kInsetTop = 6.0; 928 | CGFloat kInsetBottom = 0.0; 929 | UIEdgeInsets textInsets = UIEdgeInsetsMake(kInsetTop, kInsetHorizontal, kInsetBottom, kInsetHorizontal); 930 | 931 | ASLayoutSpec *verticalSpacer = [[ASLayoutSpec alloc] init]; 932 | verticalSpacer.flexGrow = YES; 933 | 934 | ASLayoutSpec *horizontalSpacer1 = [[ASLayoutSpec alloc] init]; 935 | horizontalSpacer1.flexGrow = YES; 936 | 937 | ASLayoutSpec *horizontalSpacer2 = [[ASLayoutSpec alloc] init]; 938 | horizontalSpacer2.flexGrow = YES; 939 | 940 | NSArray *info1Children = @[self.firstInfoLabel, self.distanceLabel, horizontalSpacer1, self.originalPriceLabel]; 941 | NSArray *info2Children = @[self.secondInfoLabel, horizontalSpacer2, self.finalPriceLabel]; 942 | if ([ItemNode isRTL]) { 943 | info1Children = [[info1Children reverseObjectEnumerator] allObjects]; 944 | info2Children = [[info2Children reverseObjectEnumerator] allObjects]; 945 | } 946 | 947 | ASStackLayoutSpec *info1Stack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal 948 | spacing:1.0 949 | justifyContent:ASStackLayoutJustifyContentStart 950 | alignItems:ASStackLayoutAlignItemsBaselineLast children:info1Children]; 951 | 952 | ASStackLayoutSpec *info2Stack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal 953 | spacing:0.0 954 | justifyContent:ASStackLayoutJustifyContentCenter 955 | alignItems:ASStackLayoutAlignItemsBaselineLast children:info2Children]; 956 | 957 | ASStackLayoutSpec *textStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical 958 | spacing:0.0 959 | justifyContent:ASStackLayoutJustifyContentEnd 960 | alignItems:ASStackLayoutAlignItemsStretch 961 | children:@[self.titleLabel, verticalSpacer, info1Stack, info2Stack]]; 962 | 963 | ASInsetLayoutSpec *textWrapper = [ASInsetLayoutSpec insetLayoutSpecWithInsets:textInsets 964 | child:textStack]; 965 | textWrapper.flexGrow = YES; 966 | 967 | return textWrapper; 968 | } 969 | 970 | - (ASLayoutSpec *)imageSpecWithSize:(ASSizeRange)constrainedSize { 971 | CGFloat imageRatio = [self imageRatioFromSize:constrainedSize.max]; 972 | 973 | ASRatioLayoutSpec *imagePlace = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:imageRatio child:self.dealImageView]; 974 | 975 | self.badge.layoutPosition = CGPointMake(0, constrainedSize.max.height - kFixedLabelsAreaHeight - kBadgeHeight); 976 | self.badge.sizeRange = ASRelativeSizeRangeMake(ASRelativeSizeMake(ASRelativeDimensionMakeWithPercent(0), ASRelativeDimensionMakeWithPoints(kBadgeHeight)), ASRelativeSizeMake(ASRelativeDimensionMakeWithPercent(1), ASRelativeDimensionMakeWithPoints(kBadgeHeight))); 977 | ASStaticLayoutSpec *badgePosition = [ASStaticLayoutSpec staticLayoutSpecWithChildren:@[self.badge]]; 978 | 979 | ASOverlayLayoutSpec *badgeOverImage = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:imagePlace overlay:badgePosition]; 980 | badgeOverImage.flexGrow = YES; 981 | 982 | return badgeOverImage; 983 | } 984 | 985 | - (ASLayoutSpec *)soldOutLabelSpec { 986 | ASCenterLayoutSpec *centerSoldOutLabel = [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY 987 | sizingOptions:ASCenterLayoutSpecSizingOptionMinimumXY child:self.soldOutLabelFlat]; 988 | ASStaticLayoutSpec *soldOutBG = [ASStaticLayoutSpec staticLayoutSpecWithChildren:@[self.soldOutLabelBackground]]; 989 | ASCenterLayoutSpec *centerSoldOut = [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY sizingOptions:ASCenterLayoutSpecSizingOptionDefault child:soldOutBG]; 990 | ASBackgroundLayoutSpec *soldOutLabelOverBackground = [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:centerSoldOutLabel background:centerSoldOut]; 991 | return soldOutLabelOverBackground; 992 | } 993 | ``` 994 | 995 | 完整的ASDK工程可以查阅 example/CatDealsCollectionView 996 | 997 | ## 布局调试 998 | 999 | 使用ASC II Art 调试 1000 | 1001 | ASLayoutSpecPlayground App 1002 | 1003 | ## 布局选项 1004 | 当使用ASDK的时候，你有3种布局选择，注意：UIKit的autolayout不支持 1005 | 1006 | ### 手动计算布局 1007 | 1008 | 最原始的布局方式，类似于UIKit的布局方法，ASViewControllers使用这种布局方法 1009 | 1010 | [ASDisplayNode calculateSizeThatFits:] vs. [UIView sizeThatFits:] 1011 | 1012 | [ASDisplayNode layout] vs. [UIView layoutSubviews] 1013 | 1014 | 优势：（针对UIKit） 1015 | 1016 | - 消除了所有主线程布局的开销 1017 | - 结果缓存 1018 | 1019 | 缺点：（针对UIKit） 1020 | 1021 | - 代码之间会有重复代码 1022 | - 逻辑不可重用 1023 | 1024 | # 优化 1025 | ## 层处理 Layer-Backing 1026 | 1027 | 有些时候，大幅度使用Layer而不是使用views，可以提高你的app的性能，但是手动的把基于view开发的界面代码改为基于layer的界面代码，非常的费劲，如果有时候因为要开启触摸或者view特定的功能的时候，你可能要功能回退 1028 | 1029 | 当你使用ASDK的node的时候，如果你打算把所有的view转换成layer，只需要一行代码 1030 | 1031 | `rootNode.layerBacked = YES;` 1032 | 1033 | 如果你想回退，也只需要删除这一行，我们建议不需要触摸处理的所有视图都开启 1034 | 1035 | ## 同步并发 1036 | 1037 | 敬请期待...... 1038 | 1039 | ## 子树光栅化 1040 | 1041 | 预压缩，扁平化整个视图层级到一个图层，也可以提高性能，node也可以帮你做这件事 1042 | 1043 | `rootNode.shouldRasterizeDescendants = YES;` 1044 | 1045 | 你的整个node层级都会渲染在一个layer下 1046 | 1047 | ## 绘制优先级 1048 | 1049 | 敬请期待...... 1050 | 1051 | # 开发工具 1052 | 1053 | ## 点击区域扩展 1054 | 1055 | ASDisplayNode有一个hitTestSlop属性，是UIEdgeInsets，当这个值非零的时候，可以增加点击区域，更加方便进行点击 1056 | 1057 | ASDisplayNode是所有节点的基类，所以这个属性可以在任何node上使用 1058 | 1059 | 注意： 1060 | 这会影响-hitTest和-pointInside的默认实现，如果子类需要调用，请忽略 1061 | 1062 | 节点的触摸事件受到其父的边界+父HitTestSlop限制，如果想扩展父节点下的一个孩子节点的边界，请直接扩展父节点 1063 | 1064 | ## 批量获取API 1065 | ASDK的批量获取API可以很方便的让开发者获取大量新数据，如果用户滚动一个列表或者宫格的view，会自动的在特定范围内批量抓取，时机是由ASDK触发的 1066 | 1067 | 作为开发者，可以定义批量抓取的时机，ASTableView和ASCollectionView有个leadingScreensForBatching属性，用来处理这个，默认是2.0 1068 | 1069 | 为了实现批量抓取，必须实现2个delegate 1070 | 1071 | `- (BOOL)shouldBatchFetchForTableView:(ASTableView *)tableView` 1072 | 1073 | 或者 1074 | 1075 | `- (BOOL)shouldBatchFetchForCollectionView:(ASCollectionView *)collectionView` 1076 | 1077 | 在这两个方法你来决定当用户滚动到一定范围的时候，批量获取是否启动。一般是基于数据是否已经抓取完毕，或者本地操作来决定的 1078 | 1079 | 如果`- (BOOL)shouldBatchFetchForCollectionView:(ASCollectionView *)collectionView,`返回NO，就不会产生新的批量抓取处理，如果返回YES，批量抓取就会开始，会调用下面2个方法 1080 | 1081 | `- (void)tableView:(ASTableView *)tableView willBeginBatchFetchWithContext:(ASBatchContext *)context;` 1082 | 1083 | 或者 1084 | 1085 | `- (void)collectionView:(ASCollectionView *)collectionView willBeginBatchFetchWithContext:(ASBatchContext *)context;` 1086 | 1087 | 首先你要小心，这两个方法是在后台线程被调用的，如果你必须在主线程上操作，你就得把它分派到主线程去完成这些操作 1088 | 1089 | 当你完成数据读取后，要让ASDK知道你已经完成了，必须调用completeBatchFetching:，并且传YES,这就确保整批提取机制保持同步，下一次提取循环可以正常工作，只有传YES上下文才知道在必要的时候准备下一次更新，如果传NO，什么都不会发生 1090 | 1091 | 批量获取demo 1092 | ```objectivec 1093 | - (BOOL)shouldBatchFetchForTableView:(ASTableView *)tableView 1094 | { 1095 | // Decide if the batch fetching mechanism should kick in 1096 | if (_stillDataToFetch) { 1097 | return YES; 1098 | } 1099 | return NO; 1100 | } 1101 | 1102 | - (void)tableView:(ASTableView *)tableView willBeginBatchFetchWithContext:(ASBatchContext *)context 1103 | { 1104 | // Fetch data most of the time asynchronoulsy from an API or local database 1105 | NSArray *data = ...; 1106 | 1107 | // Insert data into table or collection view 1108 | [self insertNewRowsInTableView:newPhotos]; 1109 | 1110 | // Decide if it's still necessary to trigger more batch fetches in the future 1111 | _stillDataToFetch = ...; 1112 | 1113 | // Properly finish the batch fetch 1114 | [context completeBatchFetching:YES] 1115 | } 1116 | ``` 1117 | 1118 | 查看更多demo可以看 1119 | 1120 | - ASDKgram 1121 | - Kittens 1122 | - CatDealsCollectionView 1123 | - ASCollectionView 1124 | 1125 | 1126 | ## 图片修改块 1127 | 1128 | 敬请期待...... 1129 | 1130 | ## 占位符渐隐 1131 | 1132 | 敬请期待...... 1133 | 1134 | ## 点击区域可视 1135 | ### 可视化的点击区域 1136 | 1137 | 这是一个调试功能，把任何的ASControlNodes加上半透明高亮，点击，手势识别，这个范围定义为ASControlNodes的frame+hitTestSlop的范围 1138 | 1139 | 在下面的截图中你可以看到 1140 | 1141 | - 头像图片区域+用户名区域可点击， 1142 | - hitTestSlop扩大的点击范围，可以显示出来，更容易点击 1143 | - hitTestSlop缩小的点击范围，也可以观察出来 1144 | 1145 | [图不翻译了] 1146 | 1147 | ### 限制 1148 | 在收到父节点clipsToBounds的剪裁 1149 | 1150 | ### 用法 1151 | 在你的Appdelegate.m中 1152 | 添加[ASControlNode setEnableHitTestDebug:YES] 到你的didFinishLaunchingWithOptions: 方法的最上方， 1153 | 确保在任何ASControllNode初始化前调用这个方法，包括ASButtonNodes, ASImageNodes, and ASTextNodes. 1154 | 1155 | ## 图片缩放 1156 | 1157 | 可视化的ASImageNode.image像素缩放 1158 | 如果像素图像不符合像素大小，这个调试工具会增加了一个红色的文本出现在ASImageNode右下角， 1159 | 1160 | ```objectivec 1161 | imageSizeInPixels = image.size * image.scale 1162 | boundsSizeInPixels = bounds.size * contentsScale 1163 | scaleFactor = imageSizeInPixels / boundsSizeInPixels 1164 | 1165 | if (scaleFactor != 1.0) { 1166 | NSString *scaleString = [NSString stringWithFormat:@"%.2fx", scaleFactor]; 1167 | _debugLabelNode.hidden = NO; 1168 | } 1169 | ``` 1170 | 此调试工具在下面的情况非常有用 1171 | 1172 | - 下载和展现的图像数据过多 1173 | - 放大低质量的图片 1174 | 1175 | 在下面的截图中，你可以看到，低质量图片被放大因此右下角有文字，你需要优化你的功能，控制最终的尺寸和最佳的图像 1176 | 1177 | [图不翻译了] 1178 | 1179 | ### 使用 1180 | 1181 | 在appdelegate.m文件中 1182 | 1183 | 导入AsyncDisplayKit+Debug.h 1184 | 1185 | 添加[ASImageNode setShouldShowImageScalingOverlay:YES] 到didFinishLaunchingWithOptions: 方法的最上方 1186 | 1187 | 1188 | # 测试中的功能 1189 | ## 隐藏节点层次管理 1190 | 1191 | 先不翻译了吧。。未稳定的功能 1192 | 1193 | ## 排版动画API 1194 | 1195 | 先不翻译了把。。未稳定的功能 1196 | --------------------------------------------------------------------------------