Android可伸缩布局－FlexboxLayout(支持RecyclerView集成)

前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout,第一时间就去试了试手，效果非常赞，因此这篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）

那么FlexboxLayout 它到底是个什么东西呢？看一下Github对这个库的介绍:FlexboxLayout is a library project which brings the similar capabilities of

CSS Flexible Box Layout Module to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。

使用Flexbox实现效果如下：

使用

添加依赖

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

代码如下
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/flexbox_layout"
app:flexWrap="wrap"
app:alignItems="center"
app:alignContent="flex_start"
app:flexDirection="row"
app:justifyContent="flex_start"
app:showDivider="beginning|middle"
app:dividerDrawable="@drawable/divider_shape"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="程序员"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="影视天堂"
app:layout_flexGrow="1"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_flexGrow="1"
app:layout_alignSelf="flex_start"
android:text="美食"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_flexGrow="1"
app:layout_alignSelf="flex_start
4000
"
android:text="漫画.手绘"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="广告圈"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="旅行.在路上"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="娱乐八卦"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="青春"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="谈写作"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="短篇小说"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="散文"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:layout_alignSelf="flex_start"
android:text="摄影"
app:layout_order="2"
android:gravity="center"
android:textColor="@color/text_color"
android:background="@drawable/label_bg_shape"
/>
</com.google.android.flexbox.FlexboxLayout>

很简单，就一个布局文件，以FlexboxLayout为父布局，向容器里面添加子Item 就行了。当然了，你可以在代码中向FlexboxLayout布局动态添加子元素，代码如下：

mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);

// 通过代码向FlexboxLayout添加View
TextView textView = new TextView(this);
textView.setBackground(getResources().getDrawable(R.drawable.label_bg_shape));
textView.setText("Test  Label");
textView.setGravity(Gravity.CENTER);
textView.setPadding(30,0,30,0);
textView.setTextColor(getResources().getColor(R.color.text_color));
mFlexboxLayout.addView(textView);
//通过FlexboxLayout.LayoutParams 设置子元素支持的属性
ViewGroup.LayoutParams params = textView.getLayoutParams();
if(params instanceof FlexboxLayout.LayoutParams){
FlexboxLayout.LayoutParams layoutParams = (FlexboxLayout.LayoutParams) params;
layoutParams.setFlexBasisPercent(0.5f);
}

要是不用这FlexboxLayout，以前要实现这样的一个界面，需要自定义View，还是有点麻烦，网上也有很多通过自定义View来实现可伸缩变迁界面的，有兴趣的可以去搜来看一下。要知道，
这只是FlexboxLayout的冰山一角，FlexboxLayout真正强大的是它定义的这些属性，通过设置不同的值可以得到不同的效果，接下来就看一下它支持哪些属性。
FlexboxLayout真正强大的是它定义的属性，那么这一节我们看一下Flexbox支持哪些属性,分为2个方面，FlexboxLayout支持的属性和FlexboxLayout 子元素支持的属性：
FlexboxLayout 支持的属性：
flexDirection

flexDirection

属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：
row (default)： 默认值，主轴为水平方向，从左到右。
row_reverse：主轴为水平方向，起点在有端，从右到左。
column：主轴为竖直方向，起点在上端，从上到下。
column_reverse：主轴为竖直方向，起点在下端，从下往上。
文字有点苍白无力，看一下四种排列的对比，就明白了：

flexWrap

flexWrap

这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

noWrap: 不换行，一行显示完子元素。
wrap: 按正常方向换行。
wrap_reverse: 按反方向换行。
justifyContent

justifyContent

属性控制元素主轴方向上的对齐方式，有以下5种取值：

flex_start (default): 默认值，左对齐
flex_end: 右对齐
center: 居中对齐
space_between: 两端对齐，中间间隔相同
space_around: 每个元素到两侧的距离相等。
alignItems

alignItems

属性控制元素在副轴方向的对齐方式，有以下5种取值：

stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。
flex_start：顶端对齐
flex_end：底部对齐
center：居中对齐
baseline：第一行内容的的基线对齐。
alignContent

alignContent

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

stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。
flex_start: 与交叉轴起点对齐。
flex_end: 与交叉轴终点对齐。
center: 与交叉轴居中对齐。
space_between: 交叉轴两端对齐，中间间隔相等。
space_around: 到交叉轴两端的距离相等。
showDividerHorizontal

showDividerHorizontal

控制显示水平方向的分割线，值为

none | beginning | middle | end

其中的一个或者多个。

dividerDrawableHorizontal

dividerDrawableHorizontal

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

showDividerVertical

showDividerVertical

控制显示垂直方向的分割线，值为

none | beginning | middle | end

其中的一个或者多个。

dividerDrawableVertical

dividerDrawableVertical

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

showDivider

showDivider

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

none | beginning | middle | end

其中的一个或者多个。

dividerDrawableVertical

dividerDrawableVertical

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

showDivider

showDivider

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

none | beginning | middle | end

其中的一个或者多个。

dividerDrawable

dividerDrawable

设置水平和垂直方向的分割线，但是注意,如果同时和其他属性使用，比如为 Flex 轴、子元素设置了

justifyContent="space_around"

、

alignContent="space_between"

等等。可能会看到意料不到的空间，因此应该避免和这些值同时使用。

5 . FleboxLayout子元素支持的属性介绍

FlexboxLayout 子元素支持的属性：

layout_order

layout_order

属性可以改变子元素的排列顺序，默认情况下，FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1，值越小排在越靠前。

layout_flexGrow(float)

layout_flexGrow

子元素的放大比例， 决定如何分配剩余空间（如果存在剩余空间的话），默认值为0,不会分配剩余空间，如果有一个item的

layout_flexGrow

是一个正值，那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值，那么剩余空间的分配按照

layout_flexGrow

定义的比例（有点像

LinearLayout

的

layout_weight

属性）。

layout_flexShrink(float)

layout_flexShrink

:子元素缩小比例，当空间不足时，子元素需要缩小（设置了换行则无效），默认值为1，如果所有子元素的

layout_flexShrink

值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。

layout_alignSelf

layout_alignSelf

属性可以给子元素设置对齐方式，上面讲的

alignItems

属性可以设置对齐，这个属性的功能和

alignItems

一样，只不过

alignItems

作用于所有子元素，而

layout_alignSelf

作用于单个子元素。默认值为auto, 表示继承

alignItems

属性，如果为auto以外的值，则会覆盖

alignItems

属性。有以下6种取值：

auto (default)
flex_start
flex_end
center
baseline
stretch
除了

auto

以外，其他和

alignItems

属性一样。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent

的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖

layout_width

或者

layout_height

的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。

layout_minWidth / layout_minHeight (dimension)
强制限制 FlexboxLayout的子元素（宽或高）不会小于最小值，不管

layout_flexShrink

这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。

layout_maxWidth / layout_maxHeight (dimension)
这个和上面的刚好相反，强制限制FlexboxLayout子元素不会大于这个最大值, 不管

layout_flexGrow

的值为多少，子元素不会被放大到超过这个最大值。

layout_wrapBefore

layout_wrapBefore

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

flex_wrap

设置的 noWrap值。

与RecyclerView 的结合

在最新的alpha版本，Flexbox能够作为一个LayoutManager(FlexboxlayoutManager) 用在RecyclerView里面，这也就意味着你可以在一个有大量Item的可滚动容器里面使用Flexbox了。

//  compile 'com.google.android:flexbox:0.2.5'
// 使用最新的alpha版本
compile 'com.google.android:flexbox:0.3.0-alpha2'

使用FlexboxLayoutManager代替LinearLayoutManager,如下：

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

在Adapter里设置 flexGrow

ImageView mImageView =  rvBaseViewHolder.getImageView(R.id.image_src);
mImageView .setImageResource(mData);

ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
FlexboxLayoutManager.LayoutParams flexboxLp =
(FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
flexboxLp.setFlexGrow(1.0f);
}