iOS 使用flexBox

1,784 阅读2分钟

#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

容器默认存在两根轴:主轴和交叉轴 主轴方向由Flex Direction决定,Flex Direction = row 代表水平方向为主轴,Flex Direction = column 代表 垂直方向为交叉轴。

Flex Direction

1.row: 水平正向排列

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

3.column:垂直正向排列

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

Flex Wrap

是否换行

1.no wrap :不换行,此时如果控件超出空间,则根据FlexShrink来计算缩放.

2.wrap : 控件超出空间是换行。

Justify Content

主轴上的对齐方式

1.flex start:起点对齐

2.center:中间对齐

3.flex end:终点对齐

4.space between:控件间等距对齐

5.space around:控件两侧边距相同, 边距 = 控件间距 / 2

6.space evenly:所有间距相同,边距 = 控件间距

Align Items

交叉轴上的对齐方式 比Justify Content多一个stretch选项,stretch是指在垂直轴上拉伸,前提是垂直轴方向的长度值为auto

Align Self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

演示

Align Content

一行:Align Items

多行:Align Content

Align Content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

Flex Basis,Grow,and Shrink

1.basis:固定主轴方向的长度,优先级高于width或height

2.grow:空间大,瓜分剩余空间,值越大,说明瓜分的剩余空间越大

3.shrink:空间不够,控件缩小规则,值越大,说明该控件压缩的空间越大

演示

Complex Layout

重叠布局

position 有两个值:.relative 相对定位 和 .absolute 绝对定位, 默认为相对定位;

绝对定位使得该视图脱离布局流,坐标系为父视图。

	[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];

Performance

frame布局

yogalayout布局

结论

       frame布局性能还是最好的,均值在1.06ms, yogalayout均值在1.20ms左右,但yogalayout布局编写简单,灵活性强(空间过大或不够的情况下),省去了开发者的计算逻辑,开发者只需要关注边距,布局方式,控件大小即可。