Android开发之玩转FlexboxLayout布局（可用于普通控件实现流式布局，也可结合RecycleView实现流式布局）

转载地址：http://blog.csdn.net/u012702547/article/details/52293593

在这之前，我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout，按照大神的思路写出了一个流式布局，所有的东西都是难者不会会者不难，当自己能自定义流式布局的时候就会觉得这东西原来很简单了。如果各位小伙伴也看过那篇文章的话，应该知道自定义流式布局还是非常麻烦的，不过Google今年开源了新的容器，就是这个FlexboxLayout，如果你玩过前端开发或者玩过RN，就会觉得这个FlexboxLayout真是简单，OK，那我们今天就来看看这个FlexboxLayout的使用吧！先来看看显示效果：

OK，我们来看看这个东东要怎么实现吧！

1.引入项目

使用之前当然是先引入了，Google在GitHub上开源了这个控件，地址如下：

                 https://github.com/google/flexbox-layout

OK，在项目中引入方式如下：

在module的gradle文件中添加如下一行：

[java]  view plain  copy  print ?

1. compile 'com.google.android:flexbox:0.2.3'  

版本号为本文发布时的最新版本号。

引入之后就可以使用了。

2.基本用法

根据GitHub上给我们的Demo，可以看到FlexboxLayout在使用的过程中只需要用容器将我们的子控件包裹起来就行了，主布局文件如下：

[java]  view plain  copy  print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     xmlns:tools="http://schemas.android.com/tools"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="org.lenve.flexbox.MainActivity">  
9.   
10.     <com.google.android.flexbox.FlexboxLayout  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         app:flexWrap="wrap">  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_margin="8dp"  
19.             android:background="@drawable/tv_bg"  
20.             android:padding="8dp"  
21.             android:text="1.水陆草木之花"/>  
22.   
23.         <TextView  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:layout_margin="8dp"  
27.             android:background="@drawable/tv_bg"  
28.             android:padding="8dp"  
29.             android:text="2.可爱者甚蕃"/>  
30.   
31.         <TextView  
32.             android:layout_width="wrap_content"  
33.             android:layout_height="wrap_content"  
34.             android:layout_margin="8dp"  
35.             android:background="@drawable/tv_bg"  
36.             android:padding="8dp"  
37.             android:text="3.晋陶渊明独爱菊"/>  
38.   
39.         <TextView  
40.             android:layout_width="wrap_content"  
41.             android:layout_height="wrap_content"  
42.             android:layout_margin="8dp"  
43.             android:background="@drawable/tv_bg"  
44.             android:padding="8dp"  
45.             android:text="4.自李唐来"/>  
46.   
47.         <TextView  
48.             android:layout_width="wrap_content"  
49.             android:layout_height="wrap_content"  
50.             android:layout_margin="8dp"  
51.             android:background="@drawable/tv_bg"  
52.             android:padding="8dp"  
53.             android:text="5.世人甚爱牡丹"/>  
54.   
55.         <TextView  
56.             android:layout_width="wrap_content"  
57.             android:layout_height="wrap_content"  
58.             android:layout_margin="8dp"  
59.             android:background="@drawable/tv_bg"  
60.             android:padding="8dp"  
61.             android:text="6.予独爱莲之出淤泥而不染"/>  
62.   
63.         <TextView  
64.             android:layout_width="wrap_content"  
65.             android:layout_height="wrap_content"  
66.             android:layout_margin="8dp"  
67.             android:background="@drawable/tv_bg"  
68.             android:padding="8dp"  
69.             android:text="7.濯清涟而不妖"/>  
70.   
71.         <TextView  
72.             android:layout_width="wrap_content"  
73.             android:layout_height="wrap_content"  
74.             android:layout_margin="8dp"  
75.             android:background="@drawable/tv_bg"  
76.             android:padding="8dp"  
77.             android:text="8.中通外直"/>  
78.   
79.         <TextView  
80.             android:layout_width="wrap_content"  
81.             android:layout_height="wrap_content"  
82.             android:layout_margin="8dp"  
83.             android:background="@drawable/tv_bg"  
84.             android:padding="8dp"  
85.             android:text="9.不蔓不枝"/>  
86.   
87.         <TextView  
88.             android:layout_width="wrap_content"  
89.             android:layout_height="wrap_content"  
90.             android:layout_margin="8dp"  
91.             android:background="@drawable/tv_bg"  
92.             android:padding="8dp"  
93.             android:text="10.香远益清"/>  
94.   
95.         <TextView  
96.             android:layout_width="wrap_content"  
97.             android:layout_height="wrap_content"  
98.             android:layout_margin="8dp"  
99.             android:background="@drawable/tv_bg"  
100.             android:padding="8dp"  
101.             android:text="11.亭亭净植"/>  
102.     </com.google.android.flexbox.FlexboxLayout>  
103. </RelativeLayout>  

显示效果就是我们上文贴出来的图。

3.父容器属性简介

flexWrap    属性表示换行与否，默认为noWrap，表示不换行，wrap表示自动换行，还有一个wrap_reverse 表示副轴反转，副轴的含义我们一会来说。

flexDirection  表示子元素的排列方向，元素的排列方向为主轴的方向，该属性有四种取值，不同取值对应不同的主副轴，看下面一张图：

默认为row，所以如果我给flexWrap取wrap_reverse属性，则效果如下：

副轴取反，由于flexDirection默认为row，即副轴为竖直方向，副轴取反，即竖直方向倒着显示。同理，如果我给flexDirection属性设置为column，对应主轴方向为竖直向下，这个时候控件就会按如下方式来显示：

其它值我就不一一测试了。

justifyContent 表示控件沿主轴对齐方向，有五种取值，默认情况下大家看到控件是左对齐（flex_start），另外还有主轴居中对齐（center）：

主轴居右对齐（flex_end）：

两端对齐，子元素之间的间隔相等，但是两端的子元素分别和左右两边的间距为0（space_between）：

子元素两端的距离相等，所有子元素两端的距离都相相等（space_around）：

alignContent 表示控件在副轴上的对齐方向（针对多行元素），默认值为stretch，表示占满整个副轴，因为上文中我把FlexboxLayout的高度设置为包裹内容，所以这个属性大家可能没看到效果，这里我把FlexboxLayout的高度改为match_parent，我们再来看看效果：

代码：

[java]  view plain  copy  print ?

1.   <com.google.android.flexbox.FlexboxLayout  
2.       android:layout_width="match_parent"  
3.       android:layout_height="match_parent"  
4.       app:alignContent="stretch"  
5.       app:flexWrap="wrap">  
6. ....  
7. ....  

效果：

大家看到系统会自动放大子元素的高度以使之填满父容器。

与副轴起点对齐（flex_start）：

代码：

[java]  view plain  copy  print ?

1.     <com.google.android.flexbox.FlexboxLayout  
2.         android:layout_width="match_parent"  
3.         android:layout_height="match_parent"  
4.         app:alignContent="flex_start"  
5.         app:flexWrap="wrap">  
6. ....  
7. ....  

与副轴终点对齐（flex_end）：

[java]  view plain  copy  print ?

1.     <com.google.android.flexbox.FlexboxLayout  
2.         android:layout_width="match_parent"  
3.         android:layout_height="match_parent"  
4.         app:alignContent="flex_end"  
5.         app:flexWrap="wrap">  
6. ...  
7. ...  

还有两个值，分别是space_around和space_between，意思和上文说的一样，这里不再赘述。

alignItems 也是描述元素在副轴上的对齐方向（针对单行），属性含义和上文基本一致，只是多了一个baseline，表示基线对齐，其余属性不赘述。

这里说的都是父容器的属性，那么子元素都有哪些属性呢？

4.子元素属性简介

[java]  view plain  copy  print ?

1. app:layout_order="2"  

这个表示子元素的优先级，默认值为1，数值越大越靠后显示。

[java]  view plain  copy  print ?

1. app:layout_flexGrow="2"  

这个类似于权重属性，来个示例代码：

[java]  view plain  copy  print ?

1. <com.google.android.flexbox.FlexboxLayout  
2.     android:layout_width="300dp"  
3.     android:layout_height="wrap_content">  
4.   
5.     <TextView  
6.         android:layout_width="0dp"  
7.         android:layout_height="48dp"  
8.         android:background="@color/colorPrimary"  
9.         app:layout_flexGrow="2"/>  
10.   
11.     <TextView  
12.         android:layout_width="0dp"  
13.         android:layout_height="48dp"  
14.         android:background="@color/colorAccent"  
15.         app:layout_flexGrow="1"/>  
16. </com.google.android.flexbox.FlexboxLayout>  

显示效果：

[java]  view plain  copy  print ?

1. app:layout_flexShrink="2"  

表示空间不足时子控件的缩放比例，0表示不缩放，比如下面一行代码：

[java]  view plain  copy  print ?

1. <com.google.android.flexbox.FlexboxLayout  
2.     android:layout_width="300dp"  
3.     android:layout_height="wrap_content">  
4.   
5.     <TextView  
6.         android:layout_width="300dp"  
7.         android:layout_height="48dp"  
8.         app:layout_flexShrink="2"  
9.         android:background="@color/colorPrimary"/>  
10.   
11.     <TextView  
12.         app:layout_flexShrink="1"  
13.         android:layout_width="100dp"  
14.         android:layout_height="48dp"  
15.         android:background="@color/colorAccent"/>  
16. </com.google.android.flexbox.FlexboxLayout>  

父容器总宽度为300dp，结果两个子元素加起来就400，超过了100dp，总共需要缩小100dp，根据flexShrink属性，第一个TextView缩小100的三分之二，第二个TextView缩小100的三分之一。

Ok，以上就是FlexboxLayout的一个基本使用，更多资料请参考https://github.com/google/flexbox-layout

以上。

参考：http://www.jianshu.com/p/b3a9c4a99053

参考：http://www.jianshu.com/p/3c471953e36d

==============================================================================================

我自己写的demo下载：

普通使用我用的依赖

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

如果是在RecycleView中使用我添加的是

compile 'com.google.android:flexbox:0.3.0-alpha2'

源码：http://download.csdn.net/detail/zhaihaohao1/9875331