原创 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文件或者链接至我邮箱-