iOS使用flexBox

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:垂直逆向排列

image

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

Flex Wrap

是否换行

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

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

image

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

Justify Content

主轴上的对齐方式

1.flex start:起点对齐

2.center:中间对齐

3.flex end:终点对齐

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

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

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

image

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

Align Items

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

image

Align Self

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

演示

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

Align Content

一行:Align Items

多行:Align Content

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

image

Flex Basis,Grow,and Shrink

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

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

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

演示

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

Complex Layout

重叠布局

image

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

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

Performance

frame布局

image

yogalayout布局

image

结论

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

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,954评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,560评论 0 6
  • title: flex布局date: 2017-07-07 14:13:33tags: css笔记 flexbox...
    Gary23阅读 1,144评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,174评论 0 11
  • 简书的Markdown貌似不支持插入iframe,所以文章里的JSFiddle示例都改做截图了,如果有需要可以点击...
    kangflict阅读 743评论 2 8
  • 我轻轻的走 正如我轻轻的来 我轻轻的放慢脚步 一睹你夜晚的风采 您那如书的身姿 在霓虹灯的映衬下 格外出彩 如同放...
    墨笔書心阅读 81评论 0 3
  • 午夜,独自从镇上骑着小三轮回家。 路上无行人,速度开到80多马,整个车身都震动不已。我小心翼翼的看着前路,大灯发出...
    武疯子阅读 57评论 0 1
  • 作者:清风悲秋1.不是所有的浪漫与你无关你躲在我制造的黑暗我假装在白天召唤2.在没有星辰的夜里记得想起我而我想你的...
    清风悲秋阅读 140评论 0 2