piaotu1.png

最近學(xué)習(xí)AsyncDisplayKit的使用，現(xiàn)在將自己這幾天的學(xué)習(xí)的成果記錄一下，大家可以看一下，有什么不對的或者更好的方法大家也可以學(xué)習(xí)交流一下。AsyncDisplayKit的使用好處：在復(fù)雜布局的界面流暢絲毫不弱。（原理大家可以去看官方文檔 http://texturegroup.org/docs/getting-started.html）

第一天

AsyncDisplayKit的使用在官網(wǎng)上有相關(guān)的技術(shù)文檔以及demo，自己可以邊學(xué)習(xí)邊看（網(wǎng)址：https://github.com/facebookarchive/AsyncDisplayKit）。第一天的第一步就是導(dǎo)入AsyncDisplayKit控件，我用的是cocoapod安裝的直接pod 'AsyncDisplayKit' 就可以啦，也可以將我項目中的文件發(fā)直接拖過去用（demo在后面）。下面是AsyncDisplayKit的控件以及布局

ASLayoutSpec子類布局

第二天

今天我大概分析一下我的頁面布局，下圖就是我的頁面布局示意圖，整體是ASTableNode搭建，里面一條一條內(nèi)容我使用的是for循環(huán)創(chuàng)建ASDisPlayNode(綠色方框內(nèi)的)，ASDisPlayNode中的圖片是ASCollectionNode創(chuàng)建的。綠色部分我剛開始用的是ASTableNode,開始使用ASTableView控件但是在后面的ASCollectionNode點擊事件不響應(yīng)（具體原因我還不知道，大家如果有知道可以告訴我一下?。?/p>

1.png

第三天

今天主要將頁面搭建完成，以及數(shù)據(jù)加載，里面涉及到布局以及控件使用大家可以查考AsyncDisplayKit官方文檔或者官方示例demo(如果官方示例demo不能運行記得將工程pod install 一下就行了)。下面是我的布局代碼：

#import "OneCellNode.h"

@implementation OneCellNode
- (instancetype)initWithCommentItem:(OrderModel *)item indexPath:(NSIndexPath *)indexPath{
    if (self = [super init]) {
        self.index = indexPath;
        self.orderNodel = item;
        [self addDateNode];
        [self addTitleNode];
        [self addDescNode];
        [self addGoodNode];
    }
    return self;

}
- (void)addDateNode{
    self.dateNode = [[DateView alloc] initWithCommentItem:self.orderNodel.time date:self.orderNodel.date dateNum:self.orderNodel.dayCount];
    self.dateNode.backgroundColor = [UIColor whiteColor];
    [self addSubnode:self.dateNode];
}
- (void)addTitleNode{
    self.titleNode = [[ASTextNode alloc] init];
    self.titleNode.layerBacked = YES;
    self.titleNode.maximumNumberOfLines = 0;
    NSDictionary *attrs = @{ NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:15.0f] ,NSForegroundColorAttributeName:UIColorFromRGB(0x444444)};
    self.titleNode.attributedText = [[NSAttributedString alloc]initWithString:self.orderNodel.title attributes:attrs];
    [self addSubnode:self.titleNode]; 
}
- (void)addDescNode{
    self.descNode = [[ASTextNode alloc] init];
    self.descNode.layerBacked = YES;
    self.descNode.maximumNumberOfLines = 0;
    NSDictionary *attrs = @{ NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:15.0f] ,NSForegroundColorAttributeName:UIColorFromRGB(0x444444)};
    self.descNode.attributedText = [[NSAttributedString alloc]initWithString:self.orderNodel.desc attributes:attrs];
    [self addSubnode:self.descNode];  
}

- (void)addGoodNode{
    NSMutableArray *array = [NSMutableArray arrayWithCapacity:self.orderNodel.goodArray.count];
   //遍歷循環(huán)創(chuàng)建每個商品條目
    for (int i = 0; i<self.orderNodel.goodArray.count; i++) {
                GoodImageView *node = [[GoodImageView alloc]initWithCommentItem:self.orderNodel.goodArray[i]];
                [self addSubnode:node];
                [array addObject:node];
            }
      _replayNodes = [array copy];
}
- (void)layout{
    [super layout];
    self.dateNode.frame = CGRectMake(0, 0, 130, self.frame.size.height);
}
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
    NSMutableArray *rightArray =[[NSMutableArray alloc] initWithObjects:_titleNode, _descNode,nil];
    [rightArray addObjectsFromArray:_replayNodes];
    ASStackLayoutSpec *rightStackLayout = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical spacing:8 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsStart children:rightArray];
    rightStackLayout.style.flexGrow = YES;
    rightStackLayout.style.flexShrink  = YES;
 //給dateNode節(jié)點一個寬度，高度可以隨意
    self.dateNode.style.preferredSize =  CGSizeMake(130 ,100);
    self.dateNode.style.flexShrink = YES;
    ASStackLayoutSpec *horStackLayout = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsStart children:@[self.dateNode,rightStackLayout]];
    horStackLayout.style.flexShrink = YES;
    return horStackLayout;
}

第四天

項目已經(jīng)完成了，功能也能實現(xiàn)了，但是關(guān)于縱向的紫色線條高度我一直沒有搞定，紫色線條是一個ASDisplayNode控件，在頁面中要設(shè)置他的高度否則不顯示,最后找了一個方法在layout方法中固定其寬高，代碼方法如下

- (void)layout{
    [super layout];
    self.dateNode.frame = CGRectMake(0, 0, 130, self.frame.size.height);
}

第五天

項目基本完成，將自己這幾天的開發(fā)過程記錄下來，來看一下效果

app.gif

demo:https://github.com/guofeifeifei/AsyncDisplayKitWuLiu
如果大家有好的方法也可以告訴我，我也會持續(xù)更新、時時在線,
在網(wǎng)上發(fā)現(xiàn)一個好的AsyncDisplayKit框架做的項目：https://github.com/12207480/LovePlayNews