AutoFlowLayout:多功能流式布局与网格布局控件

作者博客

http://www.jianshu.com/u/0fa6f5d09040

源码地址

https://github.com/LRH1993/AutoFlowLayout

文章目录

• 前言
• 应用场景
• 实现效果
• 使用
• 原理

0

前言

近期工作需要用到流式布局，网上也有很多关于这方面的资料。发现流式布局与网格布局的自定义很有意思，是学习自定义控件的一个很好的方式，所以就撸了个几百行代码的控件，既实用又具有学习价值。

1

应用场景

流式布局，在很多标签类的场景中可以用的；而网格布局在分类中以及自拍九宫格等场景很常见。如下所示：

如此使用频繁而又实现简单的控件，怎能不自己撸一个呢？控件，还是定制的好啊。

2

实现效果

先介绍下自己撸的这个控件的功能及效果。

1.功能

流式布局

• 自动换行
• 行数自定：单行/多行
• 支持单选/多选
• 支持行居中/靠左显示
• 支持添加/删除子View
• 支持子View点击/长按事件

网格布局

• 行数/列数自定
• 支持单选/多选
• 支持添加/删除子View
• 支持子View点击/长按事件
• 支持添加多样式分割线及横竖间隔

2.效果

下面以gif图的形式展现下实现的效果，样式简单了些，不过依然能展示出这个简单控件的多功能实用性。

流式布局

网格布局

最后一个是带间隔以及分割线的，由于录屏原因，只在跳过去的一瞬间显示了粉红色的一条线。真实如下图所示，可以定义横竖间距的大小，以及分割线的颜色，宽度。

3

使用

1.添加依赖

①.在项目的 build.gradle 文件中添加

②.在 module 的 build.gradle 文件中添加依赖

2.属性说明

下表是自定义的属性说明，可在xml中声明，同时有对应的get/set方法，可在代码中动态添加。

3.使用示例

布局

代码设置数据

与ListView,GridView使用方式一样，实现FlowAdapter即可。

4

原理

ViewGroup的测量、布局及绘制顺序如下所示：

详细的自定义View原理参考：图解View测量、布局及绘制原理http://www.jianshu.com/p/3d2c49315d68

下面具体介绍自定义实现网格布局的过程。

1.重写generateLayoutParams()方法

因为我们要在onMeasure以及onLayout的过程中，测量子View的margin，所以要重写该方法，并返回MarginLayoutParams。

2.onMeasure过程

主要针对wrap_content情况下，要逐行逐列的测量每个子View的宽高，padding，margin以及横竖间距，来获得最终ViewGroup的宽高。

3.onLayout过程

网格布局默认所有子View的宽高一致，先推算出每个子View的平均宽高，然后逐个推算每个子View的left,top,right,bottom位置，调用child.layout()进行子View布局。

4.dispatchDraw过程

绘制分割线得问过程，需要逐个对子View进行绘制分割线。所以重写dispatchDraw()方法。因为不需要对自己进行绘制，所以不需要重写onDraw()方法。 需要额外注意下，绘制过程中，考虑横竖间距的大小，这种情况下默认不考虑margin。

绘制流式标签的过程类似，一样的简单。不过通过实现的过程，确实加深了对自定义ViewGroup的理解。