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

1 . 前言

前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout，看见第一眼我心里的想法是，卧槽，Android 居然有这么一个强大的布局。作为一个有好奇心的工程狮，当然第一时间就去试了试手，效果非常赞，因此这篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）,Github地址：https://github.com/google/flexbox-layout 。本文目录如下：

本文目录.png

2 . 什么是FlexboxLayout

那么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具有换行的特性。

3 . FlexboxLayout示例

既然说FlexboxLayout方便、强大，那么我们就先以一个示例来看一下它的一个简单实用场景：现在很多APP都有标签功能，本节以简书首页的热门专题（标签）为例，看一下使用FlexboxLayout来实现有多方便。
简书首页热门专题如下图：

简书专题标签.png

使用Flexbox实现效果如下：

FlexboxLayout.png

添加依赖：

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"
        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真正强大的是它定义的这些属性，通过设置不同的值可以得到不同的效果，接下来就看一下它支持哪些属性。

4 . FlexboxLayout支持的属性介绍

上面说了FlexboxLayout真正强大的是它定义的属性，那么这一节我们看一下Flexbox支持哪些属性,分为2个方面，FlexboxLayout支持的属性和FlexboxLayout 子元素支持的属性：

FlexboxLayout 支持的属性：

flexDirection

flexDirection属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：

  • row (default)： 默认值，主轴为水平方向，从左到右。
  • row_reverse：主轴为水平方向，起点在有端，从右到左。
  • column：主轴为竖直方向，起点在上端，从上到下。
  • column_reverse：主轴为竖直方向，起点在下端，从下往上。

文字有点苍白无力，看一下四种排列的对比，就明白了：

Paste_Image.png
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：第一行内容的的基线对齐。

文字显示有些苍白无力，用一张图来对比看一下，更好理解(图片来自Google 开源的 Android 排版库：FlexboxLayout)：

AlignItems.png
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其中的一个或者多个。

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值。

6 . 与RecyclerView 的结合

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

来看一下继承RecyclerView 使用的示例:

（1）首先要依赖最新的alpha版本，如下：

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

（2）使用FlexboxLayoutManager代替LinearLayoutManager,如下：

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

(3) 在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);
        }

效果图如下：

FlexboxLayoutManager.gif

是不是很强大？效果类似瀑布流，但是瀑布流是指定了列数的，这个完全是自定换行，大小屏幕的适配完全解决，简直完美。但是目前与RecyclerView 的集成还是alpha版本,还没有合并到master分支，相信不久后能出稳定的版本。

由于RecyclerView 的一些特性，Flexbox 的一些属性在FlexboxLayoutManager中没有实现，下面是FlexboxLayout和FlexboxLayoutManager支持的属性的对比：

支持属性的异同.png

注意红框中圈出来的属性，FlexboxlayoutManager是支持View回收的，而FlexboxLayout是不支持View回收的，FlexboxLayout只适用于少量Item的场景，这也是为什么会出现FlexboxLayoutManager的原因吧.

7 . 总结

FlexboxLayout是Google 去年开源的一个与CSS Flexbox有类似功能的强大布局，具有换行特性，使用起来特别方便，但是,FlexboxLayout是没有考虑View回收的，因此，它只使用于只有少量子Item的场景，如果向其中添加大量Item 是灰导致内存溢出的。所幸，最新的版本添加了与RecyclerView的集成，这就可以在有大量子Item的场景下使用了，只是最新的版本还是alpha版，还没有出稳定的版本，相信不久后就能使用稳定的版本了。另外，FlexboxLayout的这写属性的意义可能不好理解 ，建议大家去写个demo试一下每个属性的每个值看看是什么效果，这样就能很好的理解每个属性了。

评论区有人说需要Demo,因此上传到Github了，请戳FlexboxLayout Demo

参考：

https://github.com/google/flexbox-layout
Build flexible layouts with FlexboxLayout
Google 开源的 Android 排版库：FlexboxLayout

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345

推荐阅读更多精彩内容