Google发布flexbox-layout 能替代FlowLayout吗？

转载自鸿洋的微信推送：http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820197&idx=1&sn=b500621730e63ae9b082ac802e48798c&scene=23&srcid=05177lW6p9V1Cfq4Fwh4V56I#rd

原创 2016-05-17 鸿洋 鸿洋

1

概述

Google最近开源了一个和CSS3中FlexBox布局功能类似的flexbox-layout，项目地址：

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

那么flexbox有什么用呢？

我们看一下CSS3中一篇文章的介绍：

Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器（伸缩容器）中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。

有点类似于LinearLayout中的weight属性，但是比weight属性强大的多，支持非常多的属性，基本和CSS3中的属性含义一致，也有不同的部分，在Readme中都进行了详细的介绍。

如果你还不了解FlexBox，下面的文章可以非常好的带里了解：

http://www.w3cplus.com/css3/css3-flexbox-layout.html

http://w4lle.github.io/2016/05/08/Flexbox/

http://dwz.cn/3n4pBT

2

能干什么

从大的方面看FlexBoxLayout可以帮我们很好的控制UI的区域比例分块，不过当我第一眼看到这个的时候，我第一反应是FlowLayout，早在github上就有了很多的开源方案，例如：

https://github.com/blazsolar/FlowLayout

看一眼效果图：

大家对这个效果肯定不陌生，因为根据这个效果，然后衍生了很多针对Tag的控件，例如：

扯这么远，主要为了说明FlexBoxLayout也可以非常轻松的实现类似FlowLayout的效果。

3

实现

我们可以看看FlexBoxLayout如果想要实现类似标签选择的布局，具体该怎么做：

首先引入该库：

dependencies {

compile ‘com.google.android:flexbox:0.1.2’

}

布局文件中声明该控件：

贴一下style：

注意它有很多自定义的属性，文章开始给的链接里面有非常详细的介绍。

我们这里设置该控件：

app:flexDirection=”row” 主轴为水平方向，起点在左端。

app:flexWrap=”wrap” 支持多行

然后呢？然后就不需要干什么了运行吧

效果图如下：

会不会惊讶，就这样？ 这么简单，怪我咯~

可以看到FlexBoxLayout可以非常轻松的实现标签的容器，你还可以设置居中，只需要添加一个属性：

app:justifyContent=”center”

效果图即可变为：

现在，你还可以对FlexBoxLayout针对标签容器做一下封装，使其更加方便的管理标签内容。

4

简单的封装

比如我们可以继承FlexBoxLayout写个针对标签容器的布局,例如叫：TagFlowLayout，然后自定义一个Adapter作为TagFlowLayout的适配器。

完整的demo可以点击文章末尾链接下载（链接需要复制访问）；

首先来个简单的Adapter

我们可以通过getView去初始化View,然后加入到我们的TagFlowLayout，复写onSelect方法完成未选中到选中的标签UI变化，onUnSelect完成选中到未选中的标签UI变化。

下面看TagFlowLayout

我们固定其FlexDirection和FlexWrap为特定的值，然后通过adapter初始化内部的View，然后可以为View去设置OnClickListener，然后对外提供点击回调，以及控制View选中前后UI的变化。

我们使用一个集合去存储选中的标签，当标签选中时，调用mAdapter.onSelect方法，当标签被取消选中则调用mAdapter.onUnSelect方法即可。

接下来的用法，就是这样的：

是不是有点感觉了？ 效果图是这样的：

当然了，如果要完整的封装好，还需要做更多的细节操作，所以说剩下的就交给你了。

本文demo下载地址：

https://github.com/hongyangAndroid/FlexboxLayout-Tag

记得一定要看文章开头的几篇文章，会对你理解各种属性以及FlexBoxLayout控件本身有非常大的帮助，然后自己可以想想它能用到什么地方，说不定能发现一些巧妙实用的用法或者一些坑呢~

你觉得FlexBoxLayout还能做什么呢？

–欢迎长按或者扫码关注–

-本公众号支持投稿，直接投递md文件或者链接至我邮箱-