flex布局

Yogakit

https://github.com/facebook/yoga/tree/master/YogaKit

Yoga is a cross-platform layout engine which implements Flexbox.

YogaKit is used for iOS.

Yogakit Properties

容器默認(rèn)存在兩根軸：主軸和交叉軸
主軸方向由Flex Direction決定，Flex Direction = row 代表水平方向?yàn)橹鬏S，Flex Direction = column 代表 垂直方向?yàn)榻徊孑S。

Flex Direction

1.row: 水平正向排列

2.row-reverse:水平逆向排列

3.column:垂直正向排列

4.column-reverse:垂直逆向排列

image

<div STYLE="page-break-after: always;"></div>

Flex Wrap

是否換行

1.no wrap ：不換行，此時(shí)如果控件超出空間，則根據(jù)FlexShrink來計(jì)算縮放.

2.wrap : 控件超出空間是換行。

image

<div STYLE="page-break-after: always;"></div>

Justify Content

主軸上的對齊方式

1.flex start:起點(diǎn)對齊

2.center:中間對齊

3.flex end:終點(diǎn)對齊

4.space between:控件間等距對齊

5.space around:控件兩側(cè)邊距相同， 邊距 = 控件間距 / 2

6.space evenly:所有間距相同，邊距 = 控件間距

image

<div STYLE="page-break-after: always;"></div>

Align Items

交叉軸上的對齊方式
比Justify Content多一個(gè)stretch選項(xiàng)，stretch是指在垂直軸上拉伸，前提是垂直軸方向的長度值為auto

image

Align Self

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性

演示

<div STYLE="page-break-after: always;"></div>

Align Content

一行：Align Items

多行：Align Content

Align Content 屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

image

Flex Basis,Grow,and Shrink

1.basis:固定主軸方向的長度,優(yōu)先級(jí)高于width或height

2.grow:空間大，瓜分剩余空間，值越大，說明瓜分的剩余空間越大

3.shrink:空間不夠，控件縮小規(guī)則，值越大，說明該控件壓縮的空間越大

演示

<div STYLE="page-break-after: always;"></div>

Complex Layout

重疊布局

image

position 有兩個(gè)值：.relative 相對定位 和 .absolute 絕對定位, 默認(rèn)為相對定位;

絕對定位使得該視圖脫離布局流,坐標(biāo)系為父視圖。

    [YellowView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
                layout.isEnabled = YES;
                layout.flexDirection = YGFlexDirectionColumn;
                layout.justifyContent =  YGJustifyFlexStart;
                layout.alignItems     =  YGAlignCenter;
    }];
    
    [RedView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
                layout.isEnabled = YES;
    }];
    
    [YellowView addSubView: RedView];
    
    
    [BlueView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
                layout.isEnabled = YES;
                layout.position = YGPositionTypeAbsolute;
    }];
    
    [YellowView addSubView: BlueView];

<div STYLE="page-break-after: always;"></div>

Performance

frame布局

image

yogalayout布局

image

結(jié)論

???????frame布局性能還是最好的，均值在1.06ms, yogalayout均值在1.20ms左右，但yogalayout布局編寫簡單，靈活性強(qiáng)(空間過大或不夠的情況下)，省去了開發(fā)者的計(jì)算邏輯，開發(fā)者只需要關(guān)注邊距，布局方式，控件大小即可。