FlexboxLayout

项目主页，可从上面下载看 Demo。

compile 'com.google.android:flexbox:1.0.0'

看现在的版本已经到了 1.1.0，如果使用了 AndroidX 的依赖，需要使用 1.1.0 及以上版本，如果项目没用它，要用 1.0.0。

FlexboxLayout 可以理解为高级的 LinearLayout，因为这两个布局都将其子视图按序排列。二者之间的重要差异在于 FlexboxLayout 具有 “换行” 的特性。同时 FlexboxLayout 还为 RecycleView 提供了管理器 FlexboxLayoutManager。

也可以通过代码设置排列方向等：

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

属性

1. flexDirection 主轴项目排列方向。类似 LinearLayout 的 vertical 和 horizontal，但是 FlexboxLayout 更加强大，还可以设置不同的排列的起点。

• row：默认值，主轴为水平方向，起点在左端
• row_reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column_reverse：主轴为垂直方向，起点在下沿

2. flexWrap 换行方式

• nowrap ：默认值，不换行
• wrap：按正常方向换行
• wrap_reverse：按反方向换行

3. justifyContent 在主轴上的对齐方式。

• flex_start：默认值，左对齐
• flex_end：右对齐
• center： 居中
• space_between：两端对齐，项目之间的间隔都相等
• space_around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

4. alignItems 在副轴轴上如何对齐

• flex-start：交叉轴的起点对齐

• flex-end：交叉轴的终点对齐

• center：交叉轴的中点对齐

• baseline: 项目的第一行文字的基线对齐，如果没有文本基线，那么默认基线就是左上角

• stretch：默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度

  15161071507856.jpg

5. alignContent 多根轴线的对齐方式。子元素有多行时起作用，如果子元素只有一行，该属性不起作用。

   • flex_start：与交叉轴的起点对齐
   • flex_end：与交叉轴的终点对齐
   • center：与交叉轴的中点对齐
   • space_between：与交叉轴两端对齐，轴线之间的间隔平均分布
   • space_around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
   • stretch（默认值）：轴线占满整个交叉轴。

   alignContent 和 justifyContent 里面的属性值都是一样的，一个是设置主轴的对齐方式，一个是设置多个轴的对齐方式。

   比如是项目是水平换行，alignContent 就是设置垂直方向的对齐方式，justifyContent 就是设置水平方向的对齐方式。而 alignItems 是说第二行的第一个和第一行的第一个怎么对齐。

6. showDividerHorizontal/showDividerVertical 控制显示水平/垂直方向的分割线，值是下面四个取值中的一个或者多个

   • none
   • beginning
   • middle
   • end

7. dividerDrawableHorizontal/dividerDrawableVertical 设置轴线之间水平/垂直方向的分割线。

8. showDivider

   控制显示水平和垂直方向的分割线

9. dividerDrawable

   设置水平和垂直方向的分割线，如果同时和其他属性使用，比如子元素设置了 justifyContent="space_around"、alignContent="space_between" 等等，可能会看到意料不到的空间，因此应该避免和这些值同时使用。

子元素属性

FlexboxLayout 不仅有自身的属性，还可以设置子元素的属性。

1. layout_order

   默认情况下子元素的排列方式按照文档流的顺序依次排序，而 order 属性可以控制排列的顺序，负值在前，正值在后，按照从小到大的顺序依次排列。简而言之就是可以定义子元素的排列顺序。

2. layout_flexGrow

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

3. layout_flexShrink

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

4. layout_alignSelf

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

   该属性可能取 6 个值，除了 auto，其他都与 align_items 属性完全一致：

   • auto (default)
   • flex_start
   • flex_end
   • center
   • baseline
   • stretch

5. layout_flexBasisPercent

   定义了在分配多余空间之前，子元素占据的主轴空间的百分比。它的默认值为 auto，即子元素的本来大小。

   如果设置了这个值，那么通过这个属性计算的值将会覆盖 layout_width 或者 layout_height 的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是 MeasureSpec mode 是 MeasureSpec.EXACTLY）。

6. layout_minWidth/layout_minHeight

   强制限制 FlexboxLayout 的子元素（宽或高）不会小于最小值，不管 layout_flexShrink 这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。

7. layout_maxWidth/layout_maxHeight

   强制限制 FlexboxLayout 子元素不会大于这个最大值, 不管 layout_flexGrow 的值为多少，子元素不会被放大到超过这个最大值。

8. layout_wrapBefore

   控制强制换行，默认值为 false，如果将一个子元素的这个属性设置为 true，那么这个子元素将会成为一行的第一个元素。这个属性将忽略 flex_wrap 设置的 noWrap 值。

和 RecyclerView 配合

RecyclerView mRecyclerView = (RecyclerView)findViewById(R.id.test_recyclerView);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexWrap(FlexWrap.WRAP); //设置是否换行        
layoutManager.setFlexDirection(FlexDirection.ROW); // 设置主轴排列方式
layoutManager.setAlignItems(AlignItems.STRETCH);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
mRecyclerView.setLayoutManager(layoutManager);

Adapter 中绑定 View 的时候，设置子元素的属性

if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}