初探FlexboxLayout

初探FlexboxLayout

FlexboxLayout项目开源地址https://github.com/google/flexbox-layout
借助官方的demo，对各个属性截图实例，具体介绍如下。

使用场景

字面意思就是【弹性布局】，可以在不同屏幕尺寸上提供一致的布局结构，可以简便、完整、响应式地实现各种页面布局，我们经常所见的标签、流式布局等都可以用FlexboxLayout来实现。
如一下场景：
1.标签场景



2.选择项

FlexboxLayout属性介绍

flexDirection
此属性决定主轴的方向（子item的排列方向）。
有如下四个值：
row（默认值）：主轴为水平方向，起点在左端，从左往右依次排列。

row-reverse：主轴为水平方向，排列与row相反，起点在右端，从右往左依次排列。

column：主轴为垂直方向，起点在上沿，从上往下一次排列。

column-reverse：主轴为垂直方向，排列与column相反，起点在下沿，从下往上依次排列。

flexWrap
此属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：
noWrap: 不换行，一行显示完子元素。

wrap: 按正常方向换行。

wrap_reverse: 按反方向换行。

justifyContent

此属性控制元素主轴方向上的对齐方式，有以下5个值：
flex_start (default): 默认值，左对齐

flex_end: 右对齐

center: 居中对齐

space_between: 两端对齐，中间间隔相同

space_around: 每个元素到两侧的距离相等。

space_evenly: 每个元素之间的距离相等。

alignItems
此属性控制元素在副轴方向的对齐方式，有以下5种取值：
stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。

flex_start：顶端对齐

flex_end：底部对齐

center：居中对齐

baseline：第一行内容的的基线对齐。

alignContent
此属性控制多根轴线的对齐方式(也就是控制多行，如果子元素只有一行，则不起作用)，可能有一下6种取值：

stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。

flex_start: 与交叉轴起点对齐。

flex_end: 与交叉轴终点对齐。

center: 与交叉轴居中对齐。

space_between: 交叉轴两端对齐，中间间隔相等。

space_around: 到交叉轴两端的距离相等。

分割线

设置分割线的属性如下：
dividerDrawable
dividerDrawable 设置水平和垂直方向的分割线。

app:dividerDrawable="@drawable/divider"

dividerDrawableVertical
dividerDrawableVertical 设置子元素垂直方向的分割线。

app:dividerDrawableVertical="@drawable/divider"

dividerDrawableHorizontal
dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。

app:dividerDrawableHorizontal="@drawable/divider"

设置分割线方向

设置完分割线之后，可以设置显示方向。showDivider、showDividerVertical、showDividerHorizontal 这三个都是控制分割线的显示方向。
showDivider
showDivider 控制显示水平和垂直方向的分割线，值为：
none：

beginning：

middle：

end：

showDividerVertical
showDividerVertical 控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
none：

beginning：

middle：

end：

showDividerHorizontal
showDividerHorizontal 控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

none：

beginning：

middle：

end：

FleboxLayout子元素支持的属性介绍

FlexboxLayout 不仅有自身的属性，还可以设置子元素的属性。子元素支持的属性：
layout_order
默认情况下子元素的排列方式按照文档流的顺序依次排序，而order属性可以控制排列的顺序，负值在前，正值在后，按照从小到大的顺序依次排列。简而言之就是你可以定义子元素的排列顺序。

layout_flexGrow
layout_flexGrow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。其实就是 LinearLayout 中的weight属性，如果所有项目的layout_flexGrow 属性都为1，则它们将等分剩余空间。如果一个项目的layout_flexGrow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

layout_flexShrink
layout_flexShrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的 layout_flexShrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

layout_alignSelf
layout_alignSelf 属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。默认值为auto，表示继承父元素的alignItems 属性，如果没有父元素，则等同于stretch。

1. auto (default)
2. stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。
3. flex_start：顶端对齐
4. flex_end：底部对齐
5. center：居中对齐
6. baseline：第一行内容的的基线对齐。
   
   layout_flexBasisPercent
   layout_flexBasisPercent 属性定义了在分配多余空间之前，子元素占据的主轴空间的百分比。它的默认值为auto，即子元素的本来大小。
   

与RecyclerView 的结合

Flexbox能够作为一个LayoutManager(FlexboxlayoutManager) 用在RecyclerView里面

使用FlexboxLayoutManager代替LinearLayoutManager,如下：

	FlexboxLayoutManager manager = new FlexboxLayoutManager();
    //设置主轴排列方式
    manager.setFlexDirection(FlexDirection.ROW);
    //设置是否换行
    manager.setFlexWrap(FlexWrap.WRAP);
    manager.setAlignItems(AlignItems.STRETCH);

效果如下：

由于RecyclerView 的一些特性，Flexbox 的一些属性在FlexboxLayoutManager中没有实现，下面是FlexboxLayout和FlexboxLayoutManager支持的属性的对比：

参考资料
https://www.jianshu.com/p/b3a9c4a99053
https://www.cnblogs.com/huolongluo/p/6607877.html