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

AutoFlowLayout

项目地址：LRH1993/AutoFlowLayout

简介：自定义 ViewGroup,实现多功能流式布局与网格布局

更多：作者提 Bug 官网

标签：

流式布局-

一、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.使用示例

布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.example.library.AutoFlowLayoutandroid:id="@+id/afl_cotent"android:layout_width="match_parent"android:layout_height="wrap_content"/>
</RelativeLayout>

代码设置数据

mFlowLayout.setAdapter(new FlowAdapter(Arrays.asList(mData)) {@Overridepublic 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 即可。

自定义 ViewGroup,实现多功能流式布局与网格布局相关推荐

Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
1.概述 1.1 布局的作用:布局是对界面结构的全面规划和安排,通过api中提供的各种布局能够快速的完成对界面的设计和规划 1.2 布局的种类:线性布局(LinearLayout).相对布局(Rela ...
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
【第八篇】CSS布局之网格布局
一个网页根据其各个功能块的分布,通常将其分成多个组成部分.同时为了页面美观,通常将各个功能模块放在页面固定的地方.CSS中存在多种布局方法,例如浮动,弹性和网格布局.每种布局都有其适用的范围. 网格布 ...
CSS3：动画、flexbox、响应式设计、网格布局
自学前端的学习笔记,参考的教程是W3Cschool,写给自己看的,很主观这里是我一边自学一边写的个人主页,2-3天更新一次,欢迎围观:Your Ideal World CSS3 一.边框.渐变与字体 ...
流式布局java_Java_流式布局、边框布局以及网格布局
功能简介: 简单使用流式.边框以及网格布局:效果图: =>StuInfoAdd.java package ui.stuinfo; import java.awt.BorderLayout; im ...
CSS 布局 - grid - 二维布局方法 - 网格布局
目录一.grid 二维布局模块二.基本概念理解逻辑 - 容器 - 项目理解行列 - 二维布局理解单元格网格线三.容器属性使用方法 CSS 重要属性配置 grid-template-co ...
css 网格布局_CSS网格布局三年
css 网格布局 As I was updating my slides for An Event Apart in San Francisco, I realised how much comple ...
css 网格布局_CSS网格布局：解决装订线问题
css 网格布局 In my recent conference presentations on the emerging CSS Grid Layout specification I've po ...
css 网格布局_CSS网格布局
css 网格布局网格布局 (Grid Layout) CSS Grid Layout, simply known as Grid, is a layout scheme that is the ne ...