新大陆:AsyncDisplayKit

gongyan75

gongyan75

发表于 2017-01-03 11:48:24
内容来源: 网络

APP性能的优化,一直都是任重而道远,对于如今需要承载更多信息的APP来说更是突出,值得庆幸的苹果在这方面做得至少比安卓让开发者省心。UIKit 控件虽然在大多数情况下都能满足用户对于流畅性的需求,但有时候还是难以达到理想效果(因为我太菜)。

AsyncDisplayKit(以下简称ASDK) 的出现至少又给了开发者一个不错的选择。毕竟Paper(虽然 Facebook 已经关闭了这个应用)当年有着炫酷的效果的同时依然保持较好的流畅性也得益于 ASDK 的加入。在Paper发布的几个月后 Facebook 就干脆从中剥离出来成为一个独立的库,就在前两天 ASDK 刚好发布了 2.0 版本。

目前据我所知国内比较知名有 轻芒阅读(豌豆荚一览) 、 即刻Yep 在用ASDK。
即刻 来说包括 消息盒子主题的详情页动态通知我的喜欢评论页最近热门即刻小报他关注的人关注他的人以及搜索页 都用到了 ADSK。

关于 ASDK 的实现和原理就不介绍了(我也不懂),下面进入正题。

控件

ASDK 几乎涵盖了常用的控件,下面是 ASDKUIKit 的对应关系,有些封装可以说非常良心。

Nodes:

ASDK UIKit
ASDisplayNode UIView
ASCellNode UITableViewCell/UICollectionViewCell
ASTextNode UILabel
ASImageNode UIImageView
ASNetworkImageNode UIImageView
ASVideoNode AVPlayerLayer
ASControlNode UIControl
ASScrollNode UIScrollView
ASControlNode UIControl
ASEditableTextNode UITextView
ASMultiplexImageNode UIImageView

Node Containers

ASDK UIKit
ASViewController UIViewController
ASTableNode UITableView
ASCollectionNode UICollectionView
ASPagerNode UICollectionView

子父类关系:

  • ASDisplayNode

    • ASCellNode

      • ASTextCellNode

    • ASCollectionNode

      • ASPagerNode

    • ASControlNode

      • ASButtonNode

      • ASImageNode

        • ASMapNode

        • ASMultiplexImageNode

        • ASNetworkImageNode

          • ASVideoNode

      • ASTextNode

    • ASEditableTextNode

    • ASScrollNode

    • ASTableNode

    • ASVideoPlayerNode

ASDisplayNode:

作用同等于UIView,是所有 Node 的父类,需要注意的是 ASDisplayNode 其实拥有一个view属性,所以ASDisplayNode及其子类都可以通过这个view来添加UIKit控件,这样一来 ASDKUIKit混用是完全没问题的。

ASDisplayNode 中添加 UIKit

UIView *otherView = [[UIView alloc] init];
otherView.frame = ...;
[self.view addSubview:otherView];

ASDisplayNode *gradientNode = [[ASDisplayNode alloc] initWithViewBlock:^UIView * _Nonnull{
    UIView *view = [[UIView alloc] init];
    return view;
}];

第二种的初始化最终生成的就是 block 返回的 UIKit 对象,但外部表现出来的是 ASDisplayNode。这样子的好处在于布局,关于布局,后面会讲到。

UIKit 中添加 ASDisplayNode

ASImageNode *imageNode = [[ASImageNode alloc] init];
imageNode.image = [UIImage imageNamed:@"iconShowMore"];
imageNode.frame = ...;
[self addSubnode:imageNode];
self.imageNode = imageNode;

ASCellNode:

作用同等于 UITableViewCellUICollectionViewCell,自带 indexPath 属性,有些时候很有用。

ASTextNode

作用同等于UILabel,和 UILabel 不同的是 ASTextNode 必须通过 attributedText 添加文字。值得一提的是:UILabel 如果是通过 NSMutableParagraphStyle 来自定义行高,在一行的情况下总是会多加上行高的高度(或许是我还不知道怎么解决),就像这样:

不过 ASTextNode 就没有这个问题。

ASImageNode

作用同等于 UIImageView,但是只能设置静态图片,如果需要使用网络图片,请使用 ASNetworkImageNode

ASNetworkImageNode

作用同等于 UIImageView,如果使用网络图片请使用此类,ASDK 用的是第三方的图片加载库PINRemoteImageASNetworkImageNode 其实并不支持 gif,如果需要显示 gif 推荐使用FLAnimatedImage

ASButtonNode

作用同等于 UIButton,需要注意的是下面这个两个属性

@property (nonatomic, assign) CGFloat contentSpacing;// 设置图片和文字的间距
@property (nonatomic, assign) ASButtonNodeImageAlignment imageAlignment;// 图片和文字的排列方式,

简直要抱头痛哭一下

用户评论
开源开发学习小组列表