自定义 ViewGroup,实现多功能流式布局与网格布局源码

应用介绍

目录

• 一、AutoFlowLayout 应用场景
• 二、AutoFlowLayout 实现效果
• 1.功能
• 2.效果
• 三、AutoFlowLayout 使用
• 1.添加依赖
• 2.属性说明
• 3.使用示例

作者LRH1993，源码AutoFlowLayout，

一、AutoFlowLayout 应用场景

流式布局，在很多标签类的场景中可以用的；而网格布局在分类中以及自拍九宫格等场景很常见。如下所示： 如此使用频繁而又实现简单的控件，怎能不自己撸一个呢？控件，还是定制的好啊。

二、AutoFlowLayout 实现效果

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

1.功能

流式布局

• 自动换行

• 行数自定：单行/多行

• 支持单选/多选

• 支持行居中/靠左显示

• 支持添加/删除子 View

• 支持子 View 点击/长按事件

网格布局

• 行数/列数自定

• 支持单选/多选

• 支持添加/删除子 View

• 支持子 View 点击/长按事件

• 支持添加多样式分割线及横竖间隔

  2.效果

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

流式布局

网格布局

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

三、AutoFlowLayout 使用

1.添加依赖

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

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

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

dependencies {
            compile 'com.github.LRH1993:AutoFlowLayout:1.0.5'
    }

2.属性说明

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

3.使用示例

布局

代码设置数据

mFlowLayout.setAdapter(new FlowAdapter(Arrays.asList(mData)) {
            @Override
            public View getView(int position) {
                View item = mLayoutInflater.inflate(R.layout.special_item, null);
                TextView tvAttrTag = (TextView) item.findViewById(R.id.tv_attr_tag);
                tvAttrTag.setText(mData[position]);
                return item;
            }
        });

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