如何实现灵活多变的瀑布流？FlexboxLayout告诉你

之前看到一个很炫酷的布局：FlexboxLayout，可以很方便地实现瀑布流的效果。今天正好用到项目中，对FlexboxLayout进行一个简单的学习。

一、效果图

先来看一波效果图。

很熟习，对不对？就是简书的定制热门页面。通过今天的学习，利用FlexboxLayout+RecyclerView即可以实现。

下面是自己实现的效果图：

像上述的应用场景，会经常在少量APP中看到。那么就学起来吧，看看是怎样实现的。

二、FlexboxLayout简介

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具备换行的特性。

FlexboxLayout是Google开源的一款强大的布局，假如英文好可以直接看其属性信息的详细详情，Github地址。

当然，也可以看少量翻译过来的对FlexboxLayout的详情，比方：Android可伸缩布局－FlexboxLayout(支持RecyclerView集成),详情的很清楚。

三、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: 到交叉轴两端的距离相等。

FleboxLayout子元素支持的重要属性

以下详情几个子元素支持的重要属性

layout_flexGrow(float)

layout_flexGrow 子元素的放大比例， 决定如何分配剩余空间（假如存在剩余空间的话），默认值为0,不会分配剩余空间，假如有一个item的 layout_flexGrow 是一个正值，那么会将一律剩余空间分配给这个Item,假如有多个Item这个属性都为正值，那么剩余空间的分配按照layout_flexGrow定义的比例（有点像LinearLayout的layout_weight属性）。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，假如设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者者layout_height的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。

FlexboxLayout还有需要其余的拥有强大功能的属性，如有需要，可通过上面两篇文章进行理解。

四、FlexboxLayout使用

1、增加依赖

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

2、具体代码

第一种方式：

布局文件

<?xml version="1.0" encoding="utf-8"?><com.google.android.flexbox.FlexboxLayout    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/flexbox_layout"    app:flexWrap="wrap"    app:alignItems="center"    app:alignContent="flex_start"    app:flexDirection="row"    app:justifyContent="flex_start"    >    <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"        />  ..............................................................................</com.google.android.flexbox.FlexboxLayout>

可以通过向FlexboxLayout增加多个子控件来实现瀑布流的效果。也可以在代码中动态增加子控件来实现同种效果。不过这种情况不适合子View过多的场景，假如子View过多，建议使用FlexboxLayout+RecyclerView的方式，下面具体详情。

第二种方式：

首先要换掉原来的依赖，依赖最新的alpha版本，如下：

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

布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="false"                android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="@color/background_material_light_1"        android:fitsSystemWindows="true">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/iv_wrong"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentLeft="true"                android:src="@drawable/favor_wrong"/>            <ImageView                android:id="@+id/iv_right"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentRight="true"                android:paddingRight="10dp"                android:src="@drawable/favor_right"/>        </RelativeLayout>    </android.support.v7.widget.Toolbar>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_favor"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@+id/toolbar">    </android.support.v7.widget.RecyclerView></RelativeLayout>

主布局中放入RecyclerView。

增加内容

 mAdapter = new FavorMovieAdapter(list,mContext,mSelectList);        FlexboxLayoutManager manager = new FlexboxLayoutManager();        //设置主轴排列方式        manager.setFlexDirection(FlexDirection.ROW);        //设置能否换行        manager.setFlexWrap(FlexWrap.WRAP);        mRvFavor.setLayoutManager(manager);        mRvFavor.setItemAnimator(new DefaultItemAnimator());        mRvFavor.setAdapter(mAdapter);

通过FlexboxLayoutManager 作为一个LayoutManager(FlexboxlayoutManager) 用在RecyclerView里面，实现FlexboxLayout的强大功能。

在Adapter设置子元素属性

填充每一行的剩余空间

ViewGroup.LayoutParams params = holder.mTitle.getLayoutParams();        if (params instanceof FlexboxLayoutManager.LayoutParams) {            FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) holder.mTitle.getLayoutParams();            flexboxLp.setFlexGrow(1.0f);        }

五、总结

FlexboxLayout+RecyclerView可以实现瀑布流的效果，不需要指定列数，可以实现自动换行，而且FlexboxLayout具备的各种属性，使得瀑布流的形式更加灵活多变。以上只是少量简单的使用。

自己是从事了七年开发的Android工程师，不少人私下问我，2019年Android进阶该怎样学，方法有没有？

没错，年初我花了一个多月的时间整理出来的学习资料，希望能帮助那些想进阶提升Android开发，却又不知道怎样进阶学习的朋友。【包括高级UI、性能优化、架构师课程、NDK、Kotlin、混合式开发（ReactNative+Weex）、Flutter等架构技术资料】，希望能帮助到您面试前的复习且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

资料获取方式：加入Android架构交流QQ群聊：513088520 ，进群即领取资料！！！

点击链接加入群聊【Android移动架构总群】：加入群聊

资料大全