AsyncDisplaykit2.0

前言

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

AsyncDisplayKit

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

官方地址

目錄

• Quickstart（快速學(xué)習(xí)）
• 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（快速學(xué)習(xí)）

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

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

2、LayoutElements（布局元素）

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

3、組合LayoutSpecs和LayoutElements，創(chuàng)建復(fù)雜的UI

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

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必須設(shè)置它們的初始大小，使用ASRatioLayoutSpec（“比例布局規(guī)則”），ASAbsoluteLayoutSpec（“絕對布局規(guī)則”）或者對象的size屬性。

5、Layout調(diào)試

#在任何ASDisplayNode或ASLayoutSpec上調(diào)用-asciiArtString，會返回對象及其子對象的字符圖。
(可選）如果在任何Node或layoutSpec上設(shè)置.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（簡單標(biāo)題左右對齊）

layout-examples-1

示例工程

創(chuàng)建布局：

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

layout-examples-2.png

代碼：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  // 當(dāng)用戶名和位置信息文本太長時,收縮堆放視圖來適應(yīng)屏幕,而不是將所有內(nèi)容向右堆放
  ASStackLayoutSpec *nameLocationStack = [ASStackLayoutSpec verticalStackLayoutSpec];
  nameLocationStack.style.flexShrink = 1.0;
  nameLocationStack.style.flexGrow = 1.0;
  
  //如果從服務(wù)器獲取位置信息,并檢查位置信息是否可用
  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];
  
}

將示例項目從縱向旋轉(zhuǎn)到橫向，看看間隔體是如何增長和收縮的。

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（圖片上覆蓋和圖標(biāo)）

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子類，用于組成簡單或復(fù)雜的布局

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

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

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

ASInsetLayoutSpec-diagram-1.png

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

代碼：

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

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

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

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布局一個組件(紅色)，作為背景伸展到另一個組件(藍(lán)色)之后背景布局的大小，是根據(jù)子項的大小計算得出的。下圖中，子項是藍(lán)色層，然后，子項的大小作為constrainedSize傳遞給背景布局元素（紅色層），子項（藍(lán)色層）必須具有固有大小或在其上設(shè)置的大小。

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提供固有大小是非常常見的，因為兩者在服務(wù)器返回內(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]];

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

  return mainStack;
}

說明:

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

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

在ASAbsoluteLayoutSpec中，可以通過設(shè)置其layoutPosition屬性來指定其子元素的確切位置（x / y坐標(biāo)），絕對布局比其他類型的布局更不靈活和難以維護(hù)。

ASAbsoluteLayoutSpec屬性：

確定絕對規(guī)格將占用多少空間。
注意：Size to Fit選項將復(fù)制舊的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ī)格，只有超級高級應(yīng)該希望/需要創(chuàng)建ASLayoutSpec的自定義子類。相反，嘗試使用提供的布局規(guī)則，并將它們組合在一起以創(chuàng)建更高級的布局。

ASLayoutSpec的另一個用途是充當(dāng)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使用