Skip to content

Texture 容器 Node Containers

pro648 edited this page Dec 16, 2019 · 1 revision

这是 Texture 文档系列翻译,其中结合了自己的理解和工作中的使用体会。如果哪里有误,希望指出。

  1. Texture 核心概念

  2. Texture 布局 Layout

  3. Texture 便捷方法

  4. Texture 性能优化

  5. Texture 容器 Node Containers

  6. Texture 基本控件 Node

  7. Texture 中 Node 的生命周期

ASViewController

ASViewControllerUIViewController的子类,添加了诸多实用功能以维护ASDisplayNode层级结构。

ASViewController用以替代UIViewController,可以用在UINavigationControllerUITabBarControllerUISplitViewController中,也可以单独使用。

使用ASViewController的好处:

  1. 节省内存。离开屏幕的ASViewController将自动减少获取数据的大小,减少子级的显示范围。这是大型应用程序中内存管理的关键。
  2. ASVisibility功能。当在ASNavigationControllerASTabBarController中使用时,ASViewController将获知用户点击几次后会显示该控制器。

ASViewController的使用

UIViewController提供了自己的视图,ASViewController在其初始化方法initWithNode:中指定了负责管理的 node。

下面ASViewController的子类PhotoFeedNodeController想要使用 table node 作为管理者。table node 被赋值给initWithNode:

- (instancetype)init
{
  _tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain];
  self = [super initWithNode:_tableNode];
  
  if (self) {
    _tableNode.dataSource = self;
    _tableNode.delegate = self;
  }
  
  return self;
}

示例来自ASDKgram

如果app已经具有复杂视图层级,也可以将其全部更改为ASViewController的子类。也就是说,即使不使用ASViewController的指定初始化程序initWithNode:,也可以仅以传统UIViewController方式使用ASViewController。这样可以选择在部分位置支持ASViewController

ASTableNode

ASTableNode用以代替UIKit中的UITableView

UITableView中的

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

可以使用ASTableNode中的下面任一方法替代:

- (ASCellNode *)tableNode:(ASTableNode *)tableNode nodeForRowAtIndexPath:(NSIndexPath *)indexPath

- (ASCellNodeBlock)tableNode:(ASTableNode *)tableNode nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath

推荐使用 node block,这样 cell 可以并发绘制。也就是所有 cell node 初始化方法会在后台调用,因此需要注意线程安全。

上述方法返回ASCellNodeASCellNodeBlockASCellNodeBlockblock可以在后台线程创建ASCellNodeASCellNode被用在了ASTableNodeASCollectionNodeASPagerNode

UITableViewCell会采用复用机制提高性能,但 Texture 中的上述方法不会复用 cell。

使用ASViewController替换UITableViewController

Texture 未提供与UITableViewController对应的控件,但可以使用ASViewController初始化ASTableNode获得。

ASDKgram中PhotoFeedNodeController所示,在ASViewController的初始化方法中指定由其管理ASTableNode

- (instancetype)init
{
    _tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain];
    self = [super initWithNode:_tableNode];
    
    if (self) {
      _tableNode.dataSource = self;
      _tableNode.delegate = self;
    }
    
    return self;
}

Node Block 线程安全

Node block 必须线程安全,需要确保在 node block 外访问数据模型。因此,不要在 node block 中使用 indexPath。

查看ASDKgram中的PhotoFeedNodeControllertableNode:nodeBlockForRowAtIndexPath:方法:

- (ASCellNodeBlock)tableNode:(ASTableNode *)tableNode nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath
{
    PhotoModel *photoModel = [_photoFeed objectAtIndex:indexPath.row];
    
    // this may be executed on a background thread - it is important to make sure it is thread safe
    ASCellNode *(^cellNodeBlock)() = ^ASCellNode *() {
        PhotoCellNode *cellNode = [[PhotoCellNode alloc] initWithPhoto:photoModel];
        cellNode.delegate = self;
        return cellNode;
    };
    
    return cellNodeBlock;
}

从上述代码可以看到如何在创建 node block 前使用 indexPath 获取数据模型。

获取 ASTableView

为了推荐使用ASTableNode,目前已经移除了ASTableView

ASTableViewUITableView的子类,目前仍被ASTableNode在内部使用,但不应直接创建ASTableView,可以通过ASTableNodeview属性获取。但应在viewDidLoaddidLoad之后调用。

例如,想要设置表视图的分割线,可以在viewDidLoad方法中设置 table node 的 view 属性实现:

- (void)viewDidLoad
{
  [super viewDidLoad];
  
  _tableNode.view.allowsSelection = NO;
  _tableNode.view.separatorStyle = UITableViewCellSeparatorStyleNone;
  _tableNode.view.leadingScreensForBatching = 3.0;  // default is 2.0
}

Table Row Height

ASTableNode并未提供与UITableViewtableView:heightForRowAtIndexPath:对应的方法。

这是因为 node 会根据约束决定自身高度,因此无需在 table node 层设置 cell 高度。

node 通过layoutSpecThatFits:方法返回的 layout spec 确定自身尺寸。所有 node 均能够根据布局规范计算自身尺寸。

默认情况下,ASTableNode为 cell 提供 size range,最小宽度为 tableNode 的宽,最小高度为0;最大宽度仍然为 tableNode 的宽,最大高度为FLT_MAX

也就是说,tableNode cell 的宽度始终为 tableNode 的宽,但高度是灵活的,以便 cell 自适应调整大小。

ASCellNode上调用setNeedsLayout,会自动重新布局。如果 cell 大小发生变化,会自动通知 table node 进行更新。在UIKit中必须调用reloadRowsAtIndexPaths:withRowAnimation:。查看ASDKgram demo 对比UITableViewASTableNode的区别。

以下是使用了ASTableNode的demo:

ASCollectionNode

ASCollectionNodeUIKit中的UICollectionView等效,用以替代UICollectionView

UICollectionView中的

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

使用下面任一方法替换:

- (ASCellNode *)collectionNode:(ASCollectionNode *)collectionNode nodeForItemAtIndexPath:(NSIndexPath *)indexPath

- (ASCellNodeBlock)collectionNode:(ASCollectionNode *)collectionNode nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath

ASTableNode一样,仍然推荐使用ASCellNodeBlock方法,这样 cell 可以并发创建。

ASTableNode一样,ASCollectionNode满足以下几点:

  • ASCollectionNode不会对 cell 进行复用。
  • 推荐使用 nodeBlock 方法创建 node。
  • 返回的 node block 需线程安全。
  • ASCellNode同时用在ASTableNodeASCollectionNodeASPagerNode

在线程安全、替换UICollectionViewController、获取ASCollectionView方面,ASCollectionNodeASTableNode类似,具体可以查看文档

Cell 大小和布局

Cell 将根据 constrained size 调整大小,并根据提供的UICollectionViewLayout进行布局。

也可以通过ASCollectionNodeconstrainedSizeForItemAtIndexPath:限制 cell 大小。

示例

CustomCollectionView详细演示了如何使用ASCollectionNode,其包含一个 Pinterest 风格ASCollectionNode,并使用自定义UICollectionViewLayout进行布局。

以下是采用了ASCollectionNode的demo:

与 UICollectionViewCell 组合使用

ASCollectionNode支持UICollectionViewCellASCellNode一起使用。但UIKit的 cell 将无法获得ASCellNode的性能提升(例如,预加载、异步布局、异步绘制),即使在ASCollectionNode中使用。

组合使用可以方便开发人员测试框架,而无需转换所有 cell。CustomCollectionView组合使用了UICollectionViewCellASCellNode

ASPagerNode

ASPagerNodeASCollectionNode的子类,其使用了特定的UICollectionViewLayout

使用ASPagerNode可以创建类似于UIPageViewController样式的 UI。旋转设备时,ASPagerNode能停留在当前页码,但不支持循环滚动。

dataSource 方法如下:

- (NSInteger)numberOfPagesInPagerNode:(ASPagerNode *)pagerNode

// 下面两个方法选择其一即可,推荐使用ASCellNodeBlock
- (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index
- (ASCellNodeBlock)pagerNode:(ASPagerNode *)pagerNode nodeBlockAtIndex:(NSInteger)index`

ASTableNodeASCollectionNode类似,推荐使用ASCellNodeBlock。这样可以在后台线程创建ASCellNode

ASCellNode不会进行复用,请勿依赖复用机制。与UIKit不同,即将显示时不会调用这些方法。

使用ASCellNodeBlock创建 cell 时,需要注意线程安全。

使用ASViewController优化性能

将已有的UIViewControllerASViewController返回给ASCellNode的初始化方法,可以提高性能,使用ASViewController能进一步优化性能。

- (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index
{
    NSArray *animals = self.animals[index];
    
    ASCellNode *node = [[ASCellNode alloc] initWithViewControllerBlock:^{
        return [[AnimalTableNodeController alloc] initWithAnimals:animals];;
    } didLoadBlock:nil];
    
    node.style.preferredSize = pagerNode.bounds.size;
    
    return node;
}

上面的示例使用initWithViewControllerBlock:方法构建 node。通常会为 cell 提供大小(style.preferredSize)以便正确布局。

以下是采用了ASPagerNode的demo:

上一篇:Texture 性能优化

下一篇:Texture 基本控件 Node

Clone this wiki locally