Texture布局文檔

Layout 布局

?ASDK有一套自己的成熟的的布局方案牲览,最大的好處是提升性能诵原,這套布局主要借鑒了CSS的FlexBox思想,在布局的時候我們要注意一個原則:
?從里往外!

  • flex有2個很重要的概念:主軸交叉軸案淋。主軸是子視圖默認的排列方向矢腻,交叉軸是和主軸相垂直的軸煌张,是項目在交叉方向上的排列方式早歇。主軸默認是水平的焰檩,可以修改為豎直方向憔涉。
    layout-1.png
  • 在自定義的displaynode類中重寫- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize方法,進行布局析苫。如果沒有自定義node兜叨,官方提供了一個layoutSpecBlock同樣可以實現(xiàn)布局。
// 1.自定義node
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  請在這里進行布局
  衩侥、国旷、、
}

// 2.沒有自定義node
self.node.layoutSpecBlock = ^ASLayoutSpec *(ASDisplayNode *node, ASSizeRange constrainedSize) {

  請在這里進行布局
  茫死、跪但、、
};

相關API繼承關系

  • ASLayoutSpec
    • ASStackLayoutSpec:?棧布局
    • ASAbsoluteLayoutSpec:?絕對布局
    • ASBackgroundLayoutSpec:?背景布局
    • ASOverlayLayoutSpec :?覆蓋布局
    • ASInsetLayoutSpec:?邊距布局
    • ASRatioLayoutSpec:?比例布局
    • ASRelativeLayoutSpec:?相對布局
    • ASCenterLayoutSpec:?居中布局
    • ASWrapperLayoutSpec:?填充布局
    • ASCornerLayoutSpec:?圓角布局
ASStackLayoutSpec

?ASStackLayoutSpec是比較常用的spec峦萎,包含幾個常見的屬性:

  • direction:?主軸的方向
    • ASStackLayoutDirectionHorizontal:?水平
    • ASStackLayoutDirectionVertical:?豎直
  • spacing:?主軸上子視圖的之間的間距
  • justifyContent:?子視圖在主軸上的排列方式(下面默認主軸為水平)
    • ASStackLayoutJustifyContentStart:?從左往右排列
    • ASStackLayoutJustifyContentCenter:?居中排列
    • ASStackLayoutJustifyContentEnd:?從后往前排列
    • ASStackLayoutJustifyContentSpaceBetween:?間隔排列屡久,兩端沒有間隙
    • ASStackLayoutJustifyContentSpaceAround:?間隔排列,兩端有間隙(每個子視圖的兩端距離是相等的爱榔,所以如果有超過3個視圖涩馆,那么中間的視圖的間距比兩端的視圖大一倍)
  • alignItems:?交叉軸排列方式
    • ASStackLayoutAlignItemsStart:?起點對齊
    • ASStackLayoutAlignItemsEnd:?終點對齊
    • ASStackLayoutAlignItemsCenter:?居中對齊
    • ASStackLayoutAlignItemsStretch:?沒有設置高度前提下双抽,會去拉伸直到填滿整個父視圖
    • ASStackLayoutAlignItemsBaselineFirst:?(水平布局專有)第一個子視圖的文字內容作為基線對齊
    • ASStackLayoutAlignItemsBaselineLast:?(水平布局專有)最后一個子視圖的文字內容作為基線對齊
  • children:?添加約束的子視圖 (注意:添加順序不同优床,布局順序不同e.g.[view1,view2] 和[view2,view1]這兩種布局會不同)
ASAbsoluteLayoutSpec
  • 可以設置視圖的絕對位置疼邀,但是這個比較固定,官方文檔里不建議使用
ASAbsoluteLayoutSpec *absoluteLayoutSpec = [ASAbsoluteLayoutSpec absoluteLayoutSpecWithChildren:@[self.photoNode,
            self.iconNode]];
return absoluteLayoutSpec;
ASBackgroundLayoutSpec && ASOverlayLayoutSpec
  • 這兩種布局方式比較類似
    • 背景布局:把一個視圖拉伸作為另外一個視圖的背景
    • 覆蓋布局:和背景布局是對立的
      比較常見的業(yè)務場景:組合兩個視圖
ASBackgroundLayoutSpec *backgroundLayoutSpec = [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:self.blueNode
                                                                                             background:self.redNode];

// child:是在下面的視圖妒潭,overlay是設置在上層的視圖
ASOverlayLayoutSpec *overlayLayoutSpec = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:self.redNode overlay:self.blueNode];
ASInsetLayoutSpec
  • 可以設置邊距悴能,需要設置一個UIEdgeInsets
ASInsetLayoutSpec *insetLayoutSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(30, 30, 30, 30)
                                                                                child:self.cyanNode];
ASRatioLayoutSpec
  • 根據(jù)自身的高度或者寬度來設置自身比例(高度 : 寬度),所以必須先設置自身的高度或者寬度雳灾。 (ratio > 1 == 高>寬漠酿,ratio < 1 == 高<寬)
    常見的業(yè)務場景:圖片設置比例等
layout-2.png
ASRelativeLayoutSpec
  • 可以設置類似九宮格上任意一個區(qū)域的位置,需要水平和豎直方向組合使用:
    • horizontalPosition:?水平方向位置
      • ASRelativeLayoutSpecPositionStart:?左邊
      • ASRelativeLayoutSpecPositionCenter:?中間
      • ASRelativeLayoutSpecPositionEnd:?右邊
    • verticalPosition:?豎直方向位置
      • ASRelativeLayoutSpecPositionStart:?上邊
      • ASRelativeLayoutSpecPositionCenter:?中間
      • ASRelativeLayoutSpecPositionEnd:?下邊
self.subNode.style.preferredSize = CGSizeMake(100, 100);
ASRelativeLayoutSpec *relativeLayoutSpec = [ASRelativeLayoutSpec
          relativePositionLayoutSpecWithHorizontalPosition:ASRelativeLayoutSpecPositionEnd
                                          verticalPosition:ASRelativeLayoutSpecPositionCenter
                                              sizingOption:ASRelativeLayoutSpecSizingOptionDefault child:self.subNode];

return relativeLayoutSpec;  
ASCenterLayoutSpec
  • 設置主軸或者交叉軸上的居中布局
    • centeringOptions:?居中方式(X谎亩,Y炒嘲,XY軸)
    • sizingOptions:?這個中心布局會占據(jù)多少空間(minimum X, minimum Y, minimum XY)
layout-3.png
ASCenterLayoutSpec *centerLayoutSpec = [ASCenterLayoutSpec
           centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY
                                  sizingOptions:ASCenterLayoutSpecSizingOptionDefault child:self.subNode];
ASWrapperLayoutSpec
  • 根據(jù)布局視圖上設置的大小來包裝和計算子視圖的布局。
ASCornerLayoutSpec
  • 常見的業(yè)務場景:設置角標
layout-4.png
// corner:邊角上的node
// location: corner的位置可以設置為
/*
    ASCornerLayoutLocationTopLeft, 左上
    ASCornerLayoutLocationTopRight, 右上
    ASCornerLayoutLocationBottomLeft, 左下
    ASCornerLayoutLocationBottomRight, 右下
*/

ASCornerLayoutSpec *cornerLayoutSpec = [ASCornerLayoutSpec cornerLayoutSpecWithChild:self.photoNode corner:self.dotNode
                                                                                location:ASCornerLayoutLocationTopRight];
    // offset:corner的偏移量            
    cornerLayoutSpec.offset = CGPointMake(-3, 3);
    self.photoNode.style.preferredSize = CGSizeMake(100, 100);
    self.dotNode.style.preferredSize = CGSizeMake(10, 10);
    return cornerLayoutSpec;

layout 元素的屬性

  • ASStackLayoutElement

    • spacingBefore:?棧布局中匈庭,第一個子視圖在主軸上的間隙

    • spacingAfter:?棧布局中夫凸,最后一個子視圖在主軸上的間隙

    • flexGrow:?定義子視圖的放大比例,如果為0阱持,即使有剩余空間也不會放大夭拌。如果所有子視圖都設置,那么就按照設置的比例分配,如果都設置為1鸽扁,那么是均分剩余空間蒜绽,如果有一個設置為2,那么該視圖分到的空間將是其他視圖的2倍

    • flexShrink:?縮小比例:當空間不足的時候桶现,縮小子視圖躲雅,如果所有的子視圖都設置為1就是等比例縮小,如果有一個子視圖設置為0骡和,表示該視圖不縮小相赁。

    • flexBasis:?可以指定某個約束的初始大小

    • alignSelf:這個屬性和alignItems效果一樣,設置了這個慰于,那么就會覆蓋alignItems的效果

    • ascender:在baseline選項中生效噪生,文字基準線的頂部距離

    • descender:在baseline選項中生效,文字基準線的底部距離

  • ASAbsoluteLayoutElement

    • layoutPosition:ASAbsoluteLayoutSpec布局中东囚,設置的起點位置
  • ASLayoutElement

    • width:設置ASLayoutElement的內容寬度,默認ASDimensionAuto战授。minWidth和maxWidth會覆蓋width页藻。
    • height:設置spec的內容高度
    • minWidth:設置spec最小寬度
    • maxWidth:設置spec最大寬度
    • minHeight:設置spec最小高度
    • maxHeight:設置spec最大高度
    • preferredSize:?設置視圖的大小,但是如果設置了maxSize或者minSize植兰,那么maxsize和minSize的優(yōu)先級高份帐。
    • minSize:設置最小尺寸
    • maxSize:設置最大尺寸
    • preferredLayoutSize:設置建議的相對尺寸,也就是一般推薦寫百分比
    • minLayoutSize:設置最小的相對尺寸
    • maxLayoutSize:設置最大的相對尺寸
  • size

    • ASDimension:本質上就是CGFloat楣导,可以表示具體的值也可以表示百分比废境。
    // dimension returned is relative (%)
    ASDimensionMake(@"50%");  
    ASDimensionMakeWithFraction(0.5);
    
    // dimension returned in points
    ASDimensionMake(@"70pt");
    ASDimensionMake(70);      
    ASDimensionMakeWithPoints(70);
    

    -ASLayoutSize:類似CGSize,不同點是width和height既可以代表點的值也可以代表百分比的值

    • ASSizeRange:表示CGSize對(最小size和最大size)
//  constrainedSize:表示一個自定義的node里的子元素可以設置的最大和最小的size
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize;
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末筒繁,一起剝皮案震驚了整個濱河市噩凹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌毡咏,老刑警劉巖驮宴,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異呕缭,居然都是意外死亡堵泽,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門恢总,熙熙樓的掌柜王于貴愁眉苦臉地迎上來迎罗,“玉大人,你說我怎么就攤上這事片仿∥瓢玻” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長钻蔑。 經(jīng)常有香客問我啥刻,道長,這世上最難降的妖魔是什么咪笑? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任可帽,我火速辦了婚禮,結果婚禮上窗怒,老公的妹妹穿的比我還像新娘映跟。我一直安慰自己,他們只是感情好扬虚,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布努隙。 她就那樣靜靜地躺著,像睡著了一般辜昵。 火紅的嫁衣襯著肌膚如雪荸镊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天堪置,我揣著相機與錄音躬存,去河邊找鬼。 笑死舀锨,一個胖子當著我的面吹牛岭洲,可吹牛的內容都是我干的。 我是一名探鬼主播坎匿,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼盾剩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了替蔬?” 一聲冷哼從身側響起告私,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎承桥,沒想到半個月后德挣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡快毛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年格嗅,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唠帝。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡屯掖,死狀恐怖,靈堂內的尸體忽然破棺而出襟衰,到底是詐尸還是另有隱情贴铜,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站绍坝,受9級特大地震影響徘意,放射性物質發(fā)生泄漏。R本人自食惡果不足惜轩褐,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一椎咧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧把介,春花似錦勤讽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至巢墅,卻和暖如春诸狭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背君纫。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工作谚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人庵芭。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像雀监,于是被迫代替她去往敵國和親双吆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內容