来自CSS的Flexbox for Android
今天给大家介绍一个新的控件，这个是谷歌在3个月之前的一天突然在GitHub上发布的。他的介绍言简意赅Flexbox for Android。Flexbox 的概念是从CSS Flexible Box Layout 模块中得到相应的灵感，然后把它的理念搬到Android上面来的。以我现在的水平来看，我觉得他就是为了方便我们实现FlowLayout的功能，以及在某种程度上替代GridView与GridLayout而生，至于我说的对不对，请大家多多给点意见
基本概念
axis
将上图模型中包含的重要概念明确下
main axis 主轴，子元素通过主轴来排列，如上图是从左往右。
corss axis 侧轴就是与主轴垂直的轴
这2个概念是后续官方描述中经常提到的概念
加载
加载过程没有什么不同，compile下就好了
dependencies {
compile 'com.google.android:flexbox:0.2.2'
}
加载完成了我们就可以使用了，如果你想看看动图特效，可以直接去Github上直接查看
父元素属性
先上布局文件，大致看看怎么写的
<com.google.android.flexbox.FlexboxLayout xmlns:app="http://schemas.android.com/apk/res-auto"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:alignItems="flex_start"
app:alignContent="flex_start"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Hello1Hello1Hello1Hello1Hello1Hello1"
android:layout_width="100dip"
android:layout_height="70dip"
android:background="@android:color/holo_red_light"
android:gravity="center"/>
<TextView
android:text="Hello2"
android:layout_width="100dip"
android:layout_height="70dip"
android:background="@android:color/holo_blue_bright"
android:gravity="center"/>
<TextView
android:text="Hello3Hello3Hello3Hello3Hello3"
android:layout_width="100dip"
android:layout_height="70dip"
android:background="@android:color/holo_green_light"
android:gravity="center"/>
<TextView
android:text="Hello4Hello4"
android:layout_width="100dip"
android:layout_height="70dip"
android:background="@android:color/holo_purple"
android:gravity="center"/>
<TextView
android:text="Hello5Hello5Hello5"
android:layout_width="100dip"
android:layout_height="70dip"
android:background="@android:color/holo_orange_light"
android:gravity="center"/>
</com.google.android.flexbox.FlexboxLayout>
主要的有这5个属性
app:flexDirection
app:flexWrap
app:justifyContent
app:alignItems
app:alignContent
- flexDirection: 决定了FlexBodyLayout中子View的方向
<attr name="flexDirection">
<enum name="row" value="0"/>
<enum name="row_reverse" value="1"/>
<enum name="column" value="2"/>
<enum name="column_reverse" value="3"/>
</attr>
row: 水平方向由左往右排列
row_reverse: 这是反向的，水平方向由右往左排列
column: 垂直方向由上往下排列
column_reverse: 这也是反向的，垂直方向由下往下上排列
来看看效果是什么样的。注意每一个Item上面的文字，以备于同后续做对比
row
row_reverse
column
column_reverse
- flexWrap: 这个属性用来控制排列到底是一行排完还是多行排完，还是正常方向排还是反方向排
<attr name="flexWrap">
<enum name="nowrap" value="0"/>
<enum name="wrap" value="1"/>
<enum name="wrap_reverse" value="2"/>
</attr>
nowrap: 不换行排
wrap: 换行排
wrap_reverse: 反方向换行排
nowrap
wrap
wrap_reverse
- justifyContent: 这个属性用来控制主轴上的对齐方式
<attr name="justifyContent">
<enum name="flex_start" value="0"/>
<enum name="flex_end" value="1"/>
<enum name="center" value="2"/>
<enum name="space_between" value="3"/>
<enum name="space_around" value="4"/>
</attr>
flex_start: 与起始位置对齐（比如你设置的flexDirection是row，那么起始位置就是左边，采用左对齐）
flex_end: 与终止位置对齐（比如你设置的flexDirection是row，那么终止位置就是右边，采用右对齐）
center: 居中对齐（这个不是在ViewGroup中间的意思，仅仅是在他位置的主轴方向居中）
space_between: 两端对齐，Item之间的间隔都相等
space_around: 这个不知道怎么翻译了，效果就是每个Item之间的间隔相等
flex_start
flex_end
center
space_between
space_around
- alignItems 刚设置了主轴的属性，现在到了侧轴了。当然，有个前提，如果你项目中轴线不止一根，那么久不起作用了。多根轴线需要align-content
<attr name="alignItems">
<enum name="flex_start" value="0"/>
<enum name="flex_end" value="1"/>
<enum name="center" value="2"/>
<enum name="baseline" value="3"/>
<enum name="stretch" value="4"/>
</attr>
flex_start: 与起始位置对齐（比如你设置的flexDirection是row，那么起始位置就是左边，采用上对齐）
flex_end: 与终止位置对齐（比如你设置的flexDirection是row，那么终止位置就是右边，采用下对齐）
center: 居中对齐（这个不是在ViewGroup中间的意思，仅仅是在他位置的侧轴方向居中）
baseline: 与项目的第一行文字的基线对齐
stretch: 如果项目未设置高度或设为auto，那么高度将占满整个容器
flex_start
flex_end
center
baseline
stretch
- alignContent: 此属性定义了多根轴线的对齐方式，如果只有一根轴线，将不起作用
<attr name="alignContent">
<enum name="flex_start" value="0"/>
<enum name="flex_end" value="1"/>
<enum name="center" value="2"/>
<enum name="space_between" value="3"/>
<enum name="space_around" value="4"/>
<enum name="stretch" value="5"/>
</attr>
flex_start: 与起始位置对齐（比如你设置的flexDirection是row，那么起始位置就是左边，采用上对齐）
flex_end: 与终止位置对齐（比如你设置的flexDirection是row，那么终止位置就是右边，采用下对齐）
center: 居中对齐（这个不是在ViewGroup中间的意思，仅仅是在他位置的侧轴方向居中）
space_between: 两端对齐，每一个轴之间的间隔都相等
space_around: 这个不知道怎么翻译了，效果就是每个轴之间的间隔相等
stretch: 如果项目未设置高度或设为auto，那么高度将占满整个容器
flex_start
flex_end
center
space_between
space_around
stretch
子元素属性
对父元素属性介绍完毕之后，我们再来说说子元素
-
layout_order: 这个可以更改视图的顺序，负值在前正值在后，默认为1。
我现在将第二个item的layout_order值变成0，看看效果图
layout_order
到第一个来了，优先级最高
-
layout_flexGrow 这个属性的意思是，一旦有剩余空间可以放大，这个值决定了同一行中这个Item可以放大的比例。默认值是0，就是有空间也不放大。如果每个Item的layout_flexGrow值一样大，那么他们将均分这个剩余空间；如果某个值稍微大一些， 那么他分配的也稍微多一些。
我现在将第二个item的layout_flexGrow值变成1，看看效果图
layout_flexGrow
占满了。
然后我又给1、3均加上layout_flexGrow="1"
layout_flexGrow
均分剩余空间了
- layout_flexShrink 有了放大也有缩小了，默认值为1，意思是如果需要你缩小你就缩小。如果大家值都是一样的，那么大家就等比缩小
我加了一个黑色的，大家可以与上图对比下，确实是等比缩小
flex_start
flex_start
我现在将红色的第一个设置为0，红色部分恢复到之前的大小了，而其他几个元素都被压缩了
flex_start
flex_start
如果数字越大，那么压缩比例就会越大，这里就不重复贴图了
- layout_flexBasisPercent: 这个属性很好理解，视图占据主轴的空间比例。我们这边是row，所以我们给第四个紫色的加layout_flexBasisPercent="50%"之后，看看效果
layout_flexBasisPercent
占据一半空间了
- layout_alignSelf: 该属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖父视图的alignItems属性。默认值为auto，表示继承父元素的alignItems属性。他一共有6种属性
<attr name="layout_alignSelf">
<enum name="auto" value="-1"/>
<enum name="flex_start" value="0"/>
<enum name="flex_end" value="1"/>
<enum name="center" value="2"/>
<enum name="baseline" value="3"/>
<enum name="stretch" value="4"/>
</attr>
除了这个auto属性值，其他都与alignItems一致
来看看具体效果，我们把第二个textview的高度设置成wrap_content，然后添加app:layout_alignSelf="flex_start"
layout_alignSelf
再换成app:layout_alignSelf="flex_end"属性
layout_alignSelf
-
**layout_minWidth / layout_minHeight (dimension) **
layout_maxWidth / layout_maxHeight (dimension):
最大最小高度、宽度没什么好说，其实跟layout_flexShrink、layout_flexGrow的概念差不多，不管你怎么压榨我这一行，我始终就是这么大 -
layout_wrapBefore (boolean): 叫你换行你就换行
我们在第二个textView上面加了换行的要求
layout_wrapBefore
果断换行了
OK，今天的介绍就结束了，希望大家能够自己积极思考这个控件的使用场景，相信谷歌推出它一定有它的意义
