本文來自尚妝iOS團隊嘉文
發(fā)表于尚妝github博客房待，歡迎訂閱！

原文鏈接 http://texturegroup.org/docs/getting-started.html

AsyncDisplaykit2.0

前言

AsyncDisplayKit是一個建立在UIKit基礎上的iOS框架，讓即使是最復雜的用戶界面光滑和響應。它最初建成Facebook的Paper應用，并與流行的pop基于物理的動畫相輔相成——它與UIKit動力學和傳統(tǒng)應用程序的設計同樣強大。最近窿撬，它是用于Pinterest應用的重寫。

AsyncDisplayKit

隨著框架的發(fā)展叙凡，添加了許多功能劈伴，在現(xiàn)代iOS應用程序中通過消除常見的樣板風格和結構可以節(jié)省開發(fā)人員大量的時間。如果你曾經(jīng)處理過Cell重用的Bug握爷，試圖高性能預加載數(shù)據(jù)頁面或滾動風格界面跛璧，甚至只是試圖讓你的應用從下降太多的幀可以受益于整合ASDK。

官方地址

目錄

• Quickstart（快速學習）
• Layout Examples（布局示例）
• Layout Specs（布局規(guī)則）
• ASInsetLayoutSpec（插入布局規(guī)則）
• ASOverlayLayoutSpec（覆蓋布局規(guī)則）
• ASBackgroundLayoutSpec（背景布局規(guī)則）
• ASCenterLayoutSpec（中心布局規(guī)則）
• ASRatioLayoutSpec（比例布局規(guī)則）
• ASRelativeLayoutSpec（相對布局規(guī)則）
• ASStackLayoutSpec（堆疊布局規(guī)則）
• ASAbsoluteLayoutSpec（絕對布局約束)
• ASLayoutSpec（布局規(guī)則）
• Layout Element Properties（布局元素屬性）
• ASStackLayoutElement Properties（堆疊布局元素屬性）
• ASAbsoluteLayoutElement Properties（絕對布局元素屬性）
• ASLayoutElement Properties（布局元素屬性）

章節(jié)

一新啼、Quickstart（快速學習）

1追城、LayoutSpecs（布局規(guī)則）

LayoutSpecs是“l(fā)ayout specification”的縮寫，沒有物理存在燥撞。
相反座柱，LayoutSpecs充當其他LayoutElements的容器，來理解這些子LayoutElements如何相互關聯(lián)物舒。
AsyncDisplayKit提供了ASLayoutSpec的幾個子類色洞。
從插入單個簡單布局規(guī)則到更多更復雜的布局規(guī)則，變化堆放排列配置冠胯。

2火诸、LayoutElements（布局元素）

LayoutSpecs包含并排列LayoutElements。
所有ASDisplayNodes和ASLayoutSpecs都符合<ASLayoutElement>協(xié)議荠察。
這意味著您可以從Nodes和其他LayoutSpecs構成LayoutSpecs置蜀。
ASLayoutElement協(xié)議有幾個屬性，可用于創(chuàng)建非常復雜的LayoutSpecs悉盆。
此外LayoutSpecs也具有自己的一組屬性盯荤，可用于調(diào)整LayoutElements的排列。

3焕盟、組合LayoutSpecs和LayoutElements秋秤，創(chuàng)建復雜的UI

可以看到如何將ASTextNode（黃色高亮），ASVideoNode（頂部圖像）和ASStackLayoutSpec（“堆放布局規(guī)則”）組合來創(chuàng)建復雜布局。

LayoutSpecs和LayoutElements

使用ASCenterLayoutSpec（“中心布局規(guī)則”）和ASOverlayLayoutSpec（“覆蓋布局規(guī)則”）航缀，來放置頂部ASVideoNode（頂部圖像）的播放按鈕。

LayoutSpecs和LayoutElements

4堰怨、一些Node需要固定大小

#一些元素具有一個”固有大小“芥玉，基于他們可用內(nèi)容。
例如备图，ASTextNode可以根據(jù)其屬性字符串計算其大小灿巧，其他具有固有大小的Node包括：
ASImageNode
ASTextNode
ASButtonNode
ASTextNode
#所有其他Node在外部資源加載完成之前沒有或者缺乏固有大小。
例如揽涮，在從URL下載圖像之前抠藕，ASNetworkImageNode不知道它的大小。這些種類包括:
ASVideoNode
ASVideoPlayerNode
ASNetworkImageNode
ASEditableTextNode
#注意:
#缺少初始固有大小的這些Node必須設置它們的初始大小蒋困，使用ASRatioLayoutSpec（“比例布局規(guī)則”）盾似，ASAbsoluteLayoutSpec（“絕對布局規(guī)則”）或者對象的size屬性。

5雪标、Layout調(diào)試

#在任何ASDisplayNode或ASLayoutSpec上調(diào)用-asciiArtString零院，會返回對象及其子對象的字符圖。
(可選）如果在任何Node或layoutSpec上設置.debugName村刨，那么也將包含在字符圖告抄。
例如:
  -----------------------ASStackLayoutSpec----------------------
|  -----ASStackLayoutSpec-----  -----ASStackLayoutSpec-----  |
|  |       ASImageNode       |  |       ASImageNode       |  |
|  |       ASImageNode       |  |       ASImageNode       |  |
|  ---------------------------  ---------------------------  |
--------------------------------------------------------------
#可以在任何ASLayoutElement(node或layoutSpec)上打印對象樣式，調(diào)整大小屬性時極其方便嵌牺。
例如:
(lldb) po _photoImageNode.style
Layout Size = min {414pt, 414pt} <= preferred {20%, 50%} <= max {414pt, 414pt}

二打洼、Layout Examples（布局示例）

1、Simple Header with Left and Right Justified Text（簡單標題左右對齊）

layout-examples-1

示例工程

創(chuàng)建布局：

布局的組成（layout specs + nodes）逆粹，如圖:

layout-examples-2.png

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  // 當用戶名和位置信息文本太長時,收縮堆放視圖來適應屏幕,而不是將所有內(nèi)容向右堆放
  ASStackLayoutSpec *nameLocationStack = [ASStackLayoutSpec verticalStackLayoutSpec];
  nameLocationStack.style.flexShrink = 1.0;
  nameLocationStack.style.flexGrow = 1.0;
  
  //如果從服務器獲取位置信息,并檢查位置信息是否可用
  if (_postLocationNode.attributedText) {
    nameLocationStack.children = @[_usernameNode, _postLocationNode];
  } else {
    nameLocationStack.children = @[_usernameNode];
  }
  
  //水平堆放
  ASStackLayoutSpec *headerStackSpec = [ASStackLayoutSpec   stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
                     spacing:40     
              justifyContent:ASStackLayoutJustifyContentStart
                  alignItems:ASStackLayoutAlignItemsCenter
                    children:@[nameLocationStack, _postTimeNode]];
  
  //插入堆放
  return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, 10, 0, 10)    
                                                child:headerStackSpec];
  
}

將示例項目從縱向旋轉到橫向募疮，看看間隔體是如何增長和收縮的。

2僻弹、Photo with Inset Text Overlay（圖片上覆蓋文本）

layout-examples-3.png

創(chuàng)建布局：

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  _photoNode.style.preferredSize = CGSizeMake(USER_IMAGE_HEIGHT*2, USER_IMAGE_HEIGHT*2);
  
  // INIFINITY(插入無邊界)
  UIEdgeInsets insets = UIEdgeInsetsMake(INFINITY, 12, 12, 12);
  ASInsetLayoutSpec *textInsetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:_titleNode];
  
  return [ASOverlayLayoutSpec overlayLayoutSpecWithChild:_photoNode 
                                                 overlay:textInsetSpec];
  
}

3酝锅、Photo with Outset Icon Overlay（圖片上覆蓋和圖標）

layout-examples-4.png

創(chuàng)建布局：

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  _iconNode.style.preferredSize = CGSizeMake(40, 40);
  _iconNode.style.layoutPosition = CGPointMake(150, 0);
  
  _photoNode.style.preferredSize = CGSizeMake(150, 150);
  _photoNode.style.layoutPosition = CGPointMake(40 / 2.0, 40 / 2.0);
  
  return [ASAbsoluteLayoutSpec absoluteLayoutSpecWithSizing:ASAbsoluteLayoutSpecSizingSizeToFit
                                                   children:@[_photoNode, _iconNode]];
  
}  

4、Simple Inset Text Cell（簡單插入文本單元格）

layout-examples-5

創(chuàng)建布局：

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

    UIEdgeInsets insets = UIEdgeInsetsMake(0, 12, 4, 4);
    ASInsetLayoutSpec *inset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets
                                                                      child:_titleNode];

    return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringY                                                  
    sizingOptions:ASCenterLayoutSpecSizingOptionMinimumX 
            child:inset];
            
}

5奢方、Top and Bottom Separator Lines（頂部和底部分隔線）

layout-examples-6.png

創(chuàng)建布局：

布局的組成（layout specs + nodes）搔扁，如圖：

layout-examples-7.png

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

  _topSeparator.style.flexGrow = 1.0;
  _bottomSeparator.style.flexGrow = 1.0;

  ASInsetLayoutSpec *insetContentSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(20, 20, 20, 20) child:_textNode];

  return [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
                                                 spacing:0
                                          justifyContent:ASStackLayoutJustifyContentCenter
                                              alignItems:ASStackLayoutAlignItemsStretch
                                                children:@[_topSeparator, insetContentSpec, _bottomSeparator]];
}
  

三、Layout Specs（布局規(guī)則）

1蟋字、以下ASLayoutSpec子類稿蹲，用于組成簡單或復雜的布局

你可以子類化ASLayoutSpec，自定義ASLayoutSpec

四鹊奖、ASInsetLayoutSpec（插入布局規(guī)則）

在布局過程中苛聘，ASInsetLayoutSpec通過constrainedSize.max傳遞插入減掉后的CGSize給子項，一旦子項確定它的最終尺寸，插入規(guī)則將其最終尺寸加上其插入邊距向上傳遞设哗，由于插圖布局規(guī)則的大小基于其子項的大小唱捣，所以子項必須具有固有大小或明確設置其大小。

ASInsetLayoutSpec-diagram-1.png

1网梢、如果在UIEdgeInsets中設置了INFINITY作為值震缭，插入規(guī)則只使用子項固有大小。

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
  ...
  UIEdgeInsets *insets = UIEdgeInsetsMake(10, 10, 10, 10);
  ASInsetLayoutSpec *headerWithInset = insetLayoutSpecWithInsets:insets child:textNode];
  ...
}

五战虏、ASOverlayLayoutSpec（覆蓋布局規(guī)則）

ASOverlayLayoutSpec布局一個組件(紅色)拣宰，作為覆蓋伸展到另個組件(藍色)之前覆蓋布局的大小，是根據(jù)子項的大小計算得出的烦感。下圖中巡社，子項是藍色層，然后子項的大小作為constrainedSize傳遞給覆蓋布局元素（紅色層）手趣，子項（藍色層）必須具有固有大小或在其上設置的大小晌该。

ASOverlayLayouSpec-diagram-2.png

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ASDisplayNode *backgroundNode = ASDisplayNodeWithBackgroundColor([UIColor blueColor]);
  ASDisplayNode *foregroundNode = ASDisplayNodeWithBackgroundColor([UIColor redColor]
  return [ASOverlayLayoutSpec overlayLayoutSpecWithChild:backgroundNode overlay:foregroundNode]];
}

六、ASBackgroundLayoutSpec（背景布局規(guī)則）

ASBackgroundLayoutSpec布局一個組件(紅色)绿渣，作為背景伸展到另一個組件(藍色)之后背景布局的大小气笙，是根據(jù)子項的大小計算得出的。下圖中怯晕，子項是藍色層潜圃，然后，子項的大小作為constrainedSize傳遞給背景布局元素（紅色層）舟茶，子項（藍色層）必須具有固有大小或在其上設置的大小谭期。

ASBackgroundLayoutSpec-diagram-3.png

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ASDisplayNode *backgroundNode = ASDisplayNodeWithBackgroundColor([UIColor redColor]);
  ASDisplayNode *foregroundNode = ASDisplayNodeWithBackgroundColor([UIColor blueColor]);
  return [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:foregroundNode background:backgroundNode]];
}

七、ASCenterLayoutSpec（中心布局規(guī)則）

ASCenterLayoutSpec將其子項居中在其最大值中constrainedSize。
如果中心規(guī)格的寬度或高度不受約束，它會縮小到子項的大小扼劈。

ASCenterLayoutSpec的兩個屬性：

ASCenterLayoutSpec-diagram-4.png

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ASStaticSizeDisplayNode *subnode = ASDisplayNodeWithBackgroundColor([UIColor greenColor], CGSizeMake(70, 100));
  return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY
                                             sizingOptions:ASRelativeLayoutSpecSizingOptionDefault
                                                     child:subnode]
}

八、ASRatioLayoutSpec（比例布局規(guī)則）

ASRatioLayoutSpec布局縮放固定寬高比忍级，此規(guī)則必須具有作為constrainedSize傳遞給它的寬度或高度帆谍，因為它使用此值來縮放自身。
使用比例布局為ASNetworkImageNode或ASVideoNode提供固有大小是非常常見的轴咱，因為兩者在服務器返回內(nèi)容之前都沒有內(nèi)在大小汛蝙。

ASRatioLayoutSpec-diagram-5.png

代碼：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  //一半比例
  ASStaticSizeDisplayNode *subnode = ASDisplayNodeWithBackgroundColor([UIColor greenColor], CGSizeMake(100, 100));
  return [ASRatioLayoutSpec ratioLayoutSpecWithRatio:0.5 child:subnode];
}

九烈涮、ASRelativeLayoutSpec（相對布局規(guī)則）

根據(jù)垂直和水平位置說明范圍內(nèi)布局組件,子項可以被定位在4個角中的任何一個，或者4個邊緣中的任何一個窖剑，以及中心坚洽。

代碼：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ...
  ASDisplayNode *backgroundNode = ASDisplayNodeWithBackgroundColor([UIColor redColor]);
  ASStaticSizeDisplayNode *foregroundNode = ASDisplayNodeWithBackgroundColor([UIColor greenColor], CGSizeMake(70, 100));

  ASRelativeLayoutSpec *relativeSpec = [ASRelativeLayoutSpec relativePositionLayoutSpecWithHorizontalPosition:ASRelativeLayoutSpecPositionStart
                                verticalPosition:ASRelativeLayoutSpecPositionStart
                                    sizingOption:ASRelativeLayoutSpecSizingOptionDefault                                                                       
                                           child:foregroundNode]

  ASBackgroundLayoutSpec *backgroundSpec = [ASBackgroundLayoutSpecbackgroundLayoutSpecWithChild:relativeSpec background:backgroundNode];
  ...
}

十、ASStackLayoutSpec（堆疊布局規(guī)則）

在ASDK中的所有l(wèi)ayoutSpecs中西土，ASStackLayoutSpec是非常強大的讶舰，ASStackLayoutSpec使用flexbox算法來確定其子節(jié)點的位置和大小，F(xiàn)lexbox旨在在不同的屏幕尺寸上提供一致的布局翠储，在堆疊布局中，以垂直或水平堆疊對齊item橡疼。堆疊布局可以是另一個堆疊布局的子布局援所，這使得可以使用堆疊布局規(guī)則創(chuàng)建幾乎任何布局。

ASStackLayoutSpec除了ASLayoutElement還有7個屬性:

代碼：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

  ASStackLayoutSpec *mainStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal                                                                                   spacing:6.0
        justifyContent:ASStackLayoutJustifyContentStart
     alignItems:ASStackLayoutAlignItemsCenter
                  children:@[_iconNode, _countNode]];

  //設置一些大小約束
  mainStack.minWidth = ASDimensionMakeWithPoints(60.0);
  mainStack.maxHeight = ASDimensionMakeWithPoints(40.0);

  return mainStack;
}

說明:

Flexbox在AsyncDisplayKit中的工作方式與在Web上的CSS中的工作方式相同豁辉，有一些例外。
默認值不同舀患，沒有flex參數(shù)秋忙，flexGrow和flexShrink只支持一個布爾值。

十一构舟、ASAbsoluteLayoutSpec（絕對布局約束）

在ASAbsoluteLayoutSpec中灰追，可以通過設置其layoutPosition屬性來指定其子元素的確切位置（x / y坐標）堵幽，絕對布局比其他類型的布局更不靈活和難以維護。

ASAbsoluteLayoutSpec屬性：

確定絕對規(guī)格將占用多少空間弹澎。
注意：Size to Fit選項將復制舊的ASStaticLayoutSpec行為朴下。

代碼：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

  CGSize maxConstrainedSize = constrainedSize.max;

  //在靜態(tài)布局中布局所有Node
  guitarVideoNode.layoutPosition = CGPointMake(0, 0);
  guitarVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width, maxConstrainedSize.height / 3.0));

  nicCageVideoNode.layoutPosition = CGPointMake(maxConstrainedSize.width / 2.0, maxConstrainedSize.height / 3.0);
  nicCageVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width / 2.0, maxConstrainedSize.height / 3.0));

  simonVideoNode.layoutPosition = CGPointMake(0.0, maxConstrainedSize.height - (maxConstrainedSize.height / 3.0));
  simonVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width/2, maxConstrainedSize.height / 3.0));

  hlsVideoNode.layoutPosition = CGPointMake(0.0, maxConstrainedSize.height / 3.0);
  hlsVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width / 2.0, maxConstrainedSize.height / 3.0));

  return [ASAbsoluteLayoutSpec absoluteLayoutSpecWithChildren:@[guitarVideoNode, nicCageVideoNode, simonVideoNode, hlsVideoNode]];
}

十二、ASLayoutSpec（布局規(guī)則）

ASLayoutSpec是所有布局規(guī)則都被子類化的父類苦蒿，它的主要工作是處理和管理所有的子類殴胧，但它也可以用于創(chuàng)建自定義布局規(guī)格，只有超級高級應該希望/需要創(chuàng)建ASLayoutSpec的自定義子類佩迟。相反团滥，嘗試使用提供的布局規(guī)則，并將它們組合在一起以創(chuàng)建更高級的布局报强。

ASLayoutSpec的另一個用途是充當ASStackLayoutSpec中的其他子元素灸姊，在使用.flexGrow和/或.flexShrink時。

代碼：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ...
  // ASLayoutSpec作為間隔
  let spacer = ASLayoutSpec()
  spacer.flexGrow = true

  stack.children = [imageNode, spacer, textNode]
  ...
}

十三秉溉、Layout Element Properties（布局元素屬性）

十四力惯、ASStackLayoutElement Properties（堆疊布局元素屬性）

十五、ASAbsoluteLayoutElement Properties（絕對布局元素屬性）

十六驱敲、ASLayoutElement Properties（布局元素屬性）

Demo

Demo地址

AsyncDisplaykit2.0使用