「iOS」譯 – AsyncDisplaykit2-0 使用「複雜介面流暢性」附 demo

尚妝產品技術刊讀發表於2019-03-04

本文來自尚妝iOS團隊嘉文
發表於尚妝github部落格，歡迎訂閱！

「iOS」譯 – AsyncDisplaykit2-0 使用「複雜介面流暢性」附 demo — AsyncDisplaykit2.0

前言

AsyncDisplayKit是一個建立在UIKit基礎上的iOS框架，讓即使是最複雜的使用者介面光滑和響應。它最初建成Facebook的Paper應用，並與流行的pop基於物理的動畫相輔相成——它與UIKit動力學和傳統應用程式的設計同樣強大。最近，它是用於Pinterest應用的重寫。

隨著框架的發展，新增了許多功能，在現代iOS應用程式中通過消除常見的樣板風格和結構可以節省開發人員大量的時間。如果你曾經處理過Cell重用的Bug，試圖高效能預載入資料頁面或滾動風格介面，甚至只是試圖讓你的應用從下降太多的幀可以受益於整合ASDK。

官方地址

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

章節

一、Quickstart（快速學習）

基本概念	英文	中文
Layout Specs	specification	佈局規則
Layout Elements	Elements	佈局元素

1、LayoutSpecs（佈局規則）

LayoutSpecs是“layout specification”的縮寫，沒有物理存在。
相反，LayoutSpecs充當其他LayoutElements的容器，來理解這些子LayoutElements如何相互關聯。
AsyncDisplayKit提供了ASLayoutSpec的幾個子類。
從插入單個簡單佈局規則到更多更復雜的佈局規則，變化堆放排列配置。複製程式碼

2、LayoutElements（佈局元素）

LayoutSpecs包含並排列LayoutElements。
所有ASDisplayNodes和ASLayoutSpecs都符合協議。
這意味著您可以從Nodes和其他LayoutSpecs構成LayoutSpecs。
ASLayoutElement協議有幾個屬性，可用於建立非常複雜的LayoutSpecs。
此外LayoutSpecs也具有自己的一組屬性，可用於調整LayoutElements的排列。複製程式碼

3、組合LayoutSpecs和LayoutElements，建立複雜的UI

可以看到如何將ASTextNode（黃色高亮），ASVideoNode（頂部影像）和ASStackLayoutSpec（“堆放佈局規則”）組合來建立複雜佈局。複製程式碼

使用ASCenterLayoutSpec（“中心佈局規則”）和ASOverlayLayoutSpec（“覆蓋佈局規則”），來放置頂部ASVideoNode（頂部影像）的播放按鈕。複製程式碼

4、一些Node需要固定大小

#一些元素具有一個”固有大小“，基於他們可用內容。
例如，ASTextNode可以根據其屬性字串計算其大小，其他具有固有大小的Node包括：
ASImageNode
ASTextNode
ASButtonNode
ASTextNode
#所有其他Node在外部資源載入完成之前沒有或者缺乏固有大小。
例如，在從URL下載影像之前，ASNetworkImageNode不知道它的大小。這些種類包括:
ASVideoNode
ASVideoPlayerNode
ASNetworkImageNode
ASEditableTextNode
#注意:
#缺少初始固有大小的這些Node必須設定它們的初始大小，使用ASRatioLayoutSpec（“比例佈局規則”），ASAbsoluteLayoutSpec（“絕對佈局規則”）或者物件的size屬性。複製程式碼

5、Layout除錯

#在任何ASDisplayNode或ASLayoutSpec上呼叫-asciiArtString，會返回物件及其子物件的字元圖。
(可選）如果在任何Node或layoutSpec上設定.debugName，那麼也將包含在字元圖。
例如:
  -----------------------ASStackLayoutSpec----------------------
|  -----ASStackLayoutSpec-----  -----ASStackLayoutSpec-----  |
|  |       ASImageNode       |  |       ASImageNode       |  |
|  |       ASImageNode       |  |       ASImageNode       |  |
|  ---------------------------  ---------------------------  |
--------------------------------------------------------------
#可以在任何ASLayoutElement(node或layoutSpec)上列印物件樣式，調整大小屬性時極其方便。
例如:
(lldb) po _photoImageNode.style
Layout Size = min {414pt, 414pt} <= preferred="" {20%,="" 50%}="" <="max" {414pt,="" 414pt}<="" code="">複製程式碼

二、Layout Examples（佈局示例）

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

示例工程

建立佈局：

約束	說明
ASStackLayoutSpec	垂直的
ASStackLayoutSpec	水平的
ASInsetLayoutSpec	插入整個標題

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

程式碼：

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

  // 當使用者名稱和位置資訊文字太長時,收縮堆放檢視來適應螢幕,而不是將所有內容向右堆放
  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（圖片上覆蓋文字）

建立佈局：

約束	說明
ASInsetLayoutSpec	插入文字
ASOverlayLayoutSpec	插入文字覆蓋在圖片上

程式碼：

//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（圖片上覆蓋和圖示）

建立佈局：

約束	說明
ASAbsoluteLayoutSpec	放置照片和icon
ASLayoutable屬性	單獨調整大小和位置

程式碼：

//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（簡單插入文字單元格）

建立佈局：

約束	說明
ASInsetLayoutSpec	插入文字
ASCenterLayoutSpec	根據指定屬性文字居中

程式碼：

//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（頂部和底部分隔線）

建立佈局：

約束	說明
ASInsetLayoutSpec	插入文字
ASStackLayoutSpec	垂直的堆放文字上下分割線

佈局的組成（layout specs + nodes），如圖：

程式碼：

//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（佈局規則）

1、以下ASLayoutSpec子類，用於組成簡單或複雜的佈局

佈局規則	說明
ASInsetLayoutSpec	插入佈局
ASOverlayLayoutSpec	覆蓋佈局
ASBackgroundLayoutSpec	背景佈局
ASCenterLayoutSpec	中心佈局
ASRatioLayoutSpec	比例佈局
ASStackLayoutSpec	堆疊佈局
ASAbsoluteLayoutSpec	絕對佈局

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

四、ASInsetLayoutSpec（插入佈局規則）

在佈局過程中，ASInsetLayoutSpec通過constrainedSize.max傳遞插入減掉後的CGSize給子項，一旦子項確定它的最終尺寸，插入規則將其最終尺寸加上其插入邊距向上傳遞，由於插圖佈局規則的大小基於其子項的大小，所以子項必須具有固有大小或明確設定其大小。複製程式碼

1、如果在UIEdgeInsets中設定了INFINITY作為值，插入規則只使用子項固有大小。

程式碼：

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

五、ASOverlayLayoutSpec（覆蓋佈局規則）

ASOverlayLayoutSpec佈局一個元件(紅色)，作為覆蓋伸展到另個元件(藍色)之前覆蓋佈局的大小，是根據子項的大小計算得出的。下圖中，子項是藍色層，然後子項的大小作為constrainedSize傳遞給覆蓋佈局元素（紅色層），子項（藍色層）必須具有固有大小或在其上設定的大小。複製程式碼

程式碼：

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

六、ASBackgroundLayoutSpec（背景佈局規則）

ASBackgroundLayoutSpec佈局一個元件(紅色)，作為背景伸展到另一個元件(藍色)之後背景佈局的大小，是根據子項的大小計算得出的。下圖中，子項是藍色層，然後，子項的大小作為constrainedSize傳遞給背景佈局元素（紅色層），子項（藍色層）必須具有固有大小或在其上設定的大小。複製程式碼

程式碼：

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

七、ASCenterLayoutSpec（中心佈局規則）

ASCenterLayoutSpec將其子項居中在其最大值中constrainedSize。
如果中心規格的寬度或高度不受約束，它會縮小到子項的大小。複製程式碼

ASCenterLayoutSpec的兩個屬性：

屬性	說明	值
centeringOptions	確定中心位置	None，X，Y，XY
sizingOptions	確定中心佔用空間	Default，minimum X，minimum Y，minimum XY

程式碼：

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

八、ASRatioLayoutSpec（比例佈局規則）

ASRatioLayoutSpec佈局縮放固定寬高比，此規則必須具有作為constrainedSize傳遞給它的寬度或高度，因為它使用此值來縮放自身。
使用比例佈局為ASNetworkImageNode或ASVideoNode提供固有大小是非常常見的，因為兩者在伺服器返回內容之前都沒有內在大小。複製程式碼

程式碼：

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

九、ASRelativeLayoutSpec（相對佈局規則）

根據垂直和水平位置說明範圍內佈局元件,子項可以被定位在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（堆疊佈局規則）

在ASDK中的所有layoutSpecs中，ASStackLayoutSpec是非常強大的，ASStackLayoutSpec使用flexbox演算法來確定其子節點的位置和大小，Flexbox旨在在不同的螢幕尺寸上提供一致的佈局，在堆疊佈局中，以垂直或水平堆疊對齊item。堆疊佈局可以是另一個堆疊佈局的子佈局，這使得可以使用堆疊佈局規則建立幾乎任何佈局。複製程式碼

ASStackLayoutSpec除了ASLayoutElement還有7個屬性:

屬性	說明	描述
direction	方向	指定堆疊方向,如果設定了horizontalAlignment和verticalAlignment,它們將被再次解決，導致justifyContent和alignItems被相應地更新。
spacing	間距	每個子元素之間的距離。
horizontalAlignment	水平對齊	指定子元素如何水平排列,取決於堆疊方向，設定對齊會導致justifyContent或alignItems被更新。未來方向更改後，對齊將保持有效。因此，優選那些性質。
verticalAlignment	豎直對齊	指定子元素如何垂直排列,取決於堆疊方向，設定對齊會導致justifyContent或alignItems被更新。未來方向更改後，對齊將保持有效。因此，優選那些性質。
justifyContent	對齊內容	每個子元素之間的距離。
alignItems	對齊Item	子元素沿著橫軸的方向。
baselineRelativeArrangement	基線相對佈局	如果YES，則從頂檢視的最後基線到底檢視的頂部測量兩個檢視之間的垂直間距。

程式碼：

- (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引數，flexGrow和flexShrink只支援一個布林值。

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

在ASAbsoluteLayoutSpec中，可以通過設定其layoutPosition屬性來指定其子元素的確切位置（x / y座標），絕對佈局比其他型別的佈局更不靈活和難以維護。複製程式碼

ASAbsoluteLayoutSpec屬性：

屬性	說明	值
sizing	大小	Default / Size to Fit

確定絕對規格將佔用多少空間。
注意：Size to Fit選項將複製舊的ASStaticLayoutSpec行為。

程式碼：

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

  CGSize maxConstrainedSize = constrainedSize.max;

  //在靜態佈局中佈局所有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（佈局規則）

ASLayoutSpec是所有佈局規則都被子類化的父類，它的主要工作是處理和管理所有的子類，但它也可以用於建立自定義佈局規格，只有超級高階應該希望/需要建立ASLayoutSpec的自定義子類。相反，嘗試使用提供的佈局規則，並將它們組合在一起以建立更高階的佈局。複製程式碼

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	只對stack堆疊佈局的Node生效
ASAbsoluteLayoutElement Properties	只對absolute絕對佈局的Node生效
ASLayoutElement Properties	對所有佈局和Node生效

十四、ASStackLayoutElement Properties（堆疊佈局元素屬性）

屬性	型別	描述
.style.spacingBefore	CGFloat	在堆疊方向上放置此物件之前的額外空間。
.style.spacingAfter	CGFloat	在堆疊方向上放置此物件之後的額外空間。
.style.flexGrow	BOOL	如果子元素的堆疊大小的總和小於最小大小，那麼這個物件是否增長？
.style.flexShrink	BOOL	如果子元素的堆疊大小的總和大於最大大小，那麼這個物件是否縮小？
.style.flexBasis	ASDimension	使用flexGrow或flexShrink屬性並分配剩餘空間之前，在堆疊維度（水平或垂直）中指定此物件的初始大小。
.style.alignSelf	ASStackLayoutAlignSelf	沿著橫軸的物件的方向，覆蓋alignItems。(ASStackLayoutAlignSelfAuto，ASStackLayoutAlignSelfStart， ASStackLayoutAlignSelfEnd， ASStackLayoutAlignSelfCenter， ASStackLayoutAlignSelfStretch)
.style.ascender	CGFloat	用於基線對準。從物件的頂部到其基線的距離。
.style.descender	CGFloat	用於基線對準。從物件的底部部到其基線的距離

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

屬性	型別	描述
.style.layoutPosition	CGPoint	該物件在ASAbsoluteLayoutSpec父規則中的CGPoint位置。

十六、ASLayoutElement Properties（佈局元素屬性）

屬性	型別	描述
.style.width	ASDimension	設定元素的寬度。會被minWidth和maxWidth覆蓋。預設為ASDimensionAuto
.style.height	ASDimension	設定元素的高度。會被minHeight和maxHeight覆蓋。預設為ASDimensionAuto。
.style.minHeight	ASDimension	設定元素的最大高度。它防止height屬性的已使用值變得大於為maxHeight指定的值。 maxHeight的值覆蓋height，但minHeight覆蓋maxHeight。預設為ASDimensionAuto
.style.maxHeight	ASDimension	如果子元素的堆疊大小的總和大於最大大小，那麼這個物件是否應該縮小呢？
.style.minWidth	ASDimension	設定元素的最小寬度。它防止width屬性的使用值變得小於為minWidth指定的值。 minWidth的值覆蓋maxWidth和width。預設為ASDimensionAuto
.style.maxWidth	ASDimension	設定元素的最大寬度。它防止width屬性的使用值變得大於為maxWidth指定的值。 maxWidth的值覆蓋width，但minWidth覆蓋maxWidth。預設為ASDimensionAuto
.style.preferredSize	CGSize	提供佈局元素的建議大小。如果提供了可選的minSize或maxSize，且preferredSize超過這些，則將強制執行minSize或maxSize, 如果未提供此可選值，則佈局元素的大小將預設為其提供的內在內容大小calculateSizeThatFits：
.style.minSize	CGSize
.style.maxSize	CGSize
.style.preferredLayoutSize	ASLayoutSize
.style.minLayoutSize	ASLayoutSize
.style.maxLayoutSize	ASLayoutSize	…

Demo

Demo地址

[譯] 構建流暢的互動介面
2018-08-23
複雜性系統是一種心智介面 – Charles
2022-02-26
iOS 藍芽4.0開發使用（內附Demo）
2019-03-26
iOS藍芽
iOS環信整合（附demo）
2018-11-20
iOS
複雜性Complex與複雜Complicated區別 - Sonja
2021-11-04
[譯] Font-size：一個意外複雜的 CSS 屬性
2018-06-02
CSS
告別複雜的流關閉
2019-05-09
網路流複雜度證明
2024-06-16
複雜度
**複雜業務流**末端的介面前置資料應該如何準備？
2020-04-29
Istio的複雜性揭祕
2021-10-15
iOS高階-WebView & JavaScript互動（附DEMO）
2019-01-20
iOSWebViewJavaScript
TMF Group：2019年全球商業複雜性指數（附下載）
2020-03-09
TMF Group：2021年全球商業複雜性指數（附下載）
2021-10-19
解決DDD核心的複雜性
2018-12-22
如何降低軟體的複雜性？
2018-09-10
什麼是幾何複雜性
2024-07-03
資料複雜性和簡單
2024-11-02
複雜性是心智殺手 - PhilipK
2022-05-10
直面不確定性與非線性的複雜現實：邁向複雜性經濟 - Cilliers
2021-06-20
[譯]在 Flutter 中解析複雜的 JSON
2018-07-29
FlutterJSON
Istio的複雜性導致一些使用者使用Linkerd –thenewstack
2021-01-21
Cadence：馴服複雜流程的工作流引擎
2022-02-05
害怕軟體的複雜嗎？其實複雜性是必須存在的 - ferd
2020-05-04
iOS效能優化系列篇之“列表流暢度優化”
2018-08-14
iOS優化
iOS 複雜物件的歸檔與反歸檔
2018-12-20
iOS物件
使用 JSBridge 與原生 IOS、Android 進行互動（含 H5、Android、IOS 端程式碼，附 Demo）
2019-07-09
JSiOSAndroidH5
Android ListView中複雜資料流的高效渲染（一）
2019-02-26
AndroidView
DDD之理解複雜度、尊重複雜度、掌控複雜度
2024-11-24
複雜度
Flex彈性佈局（附超Q小demo）
2019-04-20
Flex
[iOS] [OC] 輕量級的表單框架 GSForm（附demo）
2018-09-17
iOS框架ORM
Laravel使用MongoDB複雜的查詢
2021-01-14
LaravelMongoDB
藉助 Material You 為您的使用者提供個性化的流暢體驗
2022-03-15
複雜 Activity UI 介面模組化重構實踐
2020-03-30
UI
用 JMeter 做複雜介面測試遇到的問題
2020-05-01
JMeter
軟體的複雜性正在殺死我們
2018-09-05
分散式系統：常見陷阱和複雜性
2024-05-21
分散式
高複雜性下的藍芽安全危機
2019-05-24
藍芽
複雜性正在殺死軟體開發者
2022-03-04

「iOS」譯 – AsyncDisplaykit2-0 使用「複雜介面流暢性」附 demo

前言

目錄

章節

一、Quickstart（快速學習）

二、Layout Examples（佈局示例）

三、Layout Specs（佈局規則）

四、ASInsetLayoutSpec（插入佈局規則）

五、ASOverlayLayoutSpec（覆蓋佈局規則）

六、ASBackgroundLayoutSpec（背景佈局規則）

七、ASCenterLayoutSpec（中心佈局規則）

八、ASRatioLayoutSpec（比例佈局規則）

九、ASRelativeLayoutSpec（相對佈局規則）

十、ASStackLayoutSpec（堆疊佈局規則）

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

十二、ASLayoutSpec（佈局規則）

十三、Layout Element Properties（佈局元素屬性）

十四、ASStackLayoutElement Properties（堆疊佈局元素屬性）

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

十六、ASLayoutElement Properties（佈局元素屬性）

Demo

相關文章