FlexboxLayout——实现灵活多变的瀑布流

4,554 阅读5分钟

之前看到一个很炫酷的布局: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具有的各种属性,使得瀑布流的形式更加灵活多变。以上只是一些简单的使用。