前言：很久以前的一篇文章《Android自定义PopupWindow实现流式布局筛选控件（一）》使用原生的GridLayout的实现了流式标签筛选控件不过只能单选，因为项目重构需求改变，需要能多选标签,类似京东的多条件筛选。本篇文章记录自定义TypeLabelGridLayout实现带标题类型及分割线的流式布局标签，根据属性方法可自行设置单选还是多选，是否默认选中首项等功能，并且能重置数据。
效果图：
带标题类型的流式标签
技术实现
1.自定义GridLayout
2.GridLayout属性设置
3.TextView标签属性设置
1.重写GridLayout的属性方法
public TypeLabelGridLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context=context;
}
public TypeLabelGridLayout(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
}
public TypeLabelGridLayout(Context context) {
super(context);
this.context=context;
}
2.设置GridLayout的数据、属性及标签添加
2.1 添加类型描述标题
//显示每个条目类型的控件
TextView tvType = new TextView(context);
tvType.setText(listData.get(i).getTypeName());
tvType.setTextColor(titleTextColor);
tvType.setTextSize(titleTextSize);
//配置列 第一个参数是起始列标 第二个参数是占几列 title（筛选类型）应该占满整行，so -> 总列数
GridLayout.Spec columnSpec = GridLayout.spec(0,columnCount);
//配置行 第一个参数是起始行标 起始行+起始列就是一个确定的位置
GridLayout.Spec rowSpec = GridLayout.spec(row);
//将Spec传入GridLayout.LayoutParams并设置宽高为0或者WRAP_CONTENT，必须设置宽高，否则视图异常
GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams(rowSpec, columnSpec);
layoutParams.width = GridLayout.LayoutParams.WRAP_CONTENT;
layoutParams.height = GridLayout.LayoutParams.WRAP_CONTENT;
layoutParams.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
layoutParams.bottomMargin = context.getResources().getDimensionPixelSize(R.dimen.dp_8);
addView(tvType,layoutParams);
2.2 添加类型与标签的分割线
//添加分割线
View view=new View(context);
GridLayout.LayoutParams layoutParams1 = new GridLayout.LayoutParams(rowSpec, columnSpec);
layoutParams1.width = GridLayout.LayoutParams.WRAP_CONTENT;
layoutParams1.height = context.getResources().getDimensionPixelSize(R.dimen.dp_1);
layoutParams1.setGravity(Gravity.CENTER| Gravity.BOTTOM);
view.setBackgroundColor(lineColor);
addView(view,layoutParams1);
2.3 设置GridLayout的数据及属性
/**
* 将数据设置给GridLayout
*/
@SuppressLint("RtlHardcoded")
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setGridData(List listData) {
//设置列数
setColumnCount(columnCount);
//设置行数
setRowCount(getRowCount(listData));
//将数据源设置到每个标签
for (int i = 0; i < listData.size(); i++){
//行数++
++row;
//显示每个条目类型的控件
//配置列 第一个参数是起始列标 第二个参数是占几列，so -> 总列数
GridLayout.Spec columnSpec = spec(0,columnCount);
//配置行 第一个参数是起始行标 起始行+起始列就是一个确定的位置
GridLayout.Spec rowSpec = spec(row);
//将Spec传入GridLayout.LayoutParams并设置宽高为0或者WRAP_CONTENT，必须设置宽高，否则视图异常
GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams(rowSpec, columnSpec);
//设置宽度
layoutParams.width = GridLayout.LayoutParams.WRAP_CONTENT;
//设置高度
layoutParams.height = GridLayout.LayoutParams.WRAP_CONTENT;
//设置位置
layoutParams.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
//设置间距
layoutParams.bottomMargin = context.getResources().getDimensionPixelSize(R.dimen.dp_8);
//根据mulEnable属性值添加tab标签
if (mulEnable){
//多选
mulAddTabs(listData.get(i));
}else {
//单选
singleAddTabs(listData.get(i));
}
}
}
3.GridLayout添加单选/多选标签
3.1 添加单选标签及属性
/**
* 添加tab标签
* @param model 数据bean
* @param labelIndex 标签的标号
*/
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void addSingleTabs(final FilterBean model, final int labelIndex){
boolean isSelect=false;//判断是否有选中的标签
List tabs = model.getTabs();
for (int i = 0; i < tabs.size(); i++){
if (i % columnCount == 0){
row ++;
}
final FilterBean.TableMode tab = tabs.get(i);
//显示标签的控件
final TextView label = new TextView(context);
//循环判断是否有选中的标签
isSelect = setDefaultFirst(model, isSelect, tabs, i, tab, label);
//设置标签属性
setLabel(i, tab, label);
//记录上次选中状态
if (tabs.get(i) == model.getTab()){
label.setSelected(true);
//将上次记录的标签添加到集合
labelLists.add(model.getTypeName()+"-"+tab.name);
}
//标签的点击事件
label.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//if (tab != model.getTab()){
Log.e("rcw","index--->"+getIndex(model,labelIndex));
//清空上次选中的状态
getChildAt(getIndex(model,labelIndex)).setSelected(false);
//设置当前点击选中的tab值
model.setTab(tab);
label.setSelected(true);
selectLabel.add(label);
String labelText=label.getText().toString();
//解决tab未被点击时 ，不添加默认的“不限”数据到集合中
int flag=-1;//用于记录需要替换的位置
//默认选中
for (int i=0;i"+model.getTypeName()+"-"+labelText);
}
// }
});
}
}
3.2 添加多选标签
/**
* 添加tab多选标签
* @param model 数据bean
*/
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void mulAddTabs(final FilterBean model){
boolean isSelect=false;
List tabs = model.getTabs();
for (int i = 0; i < tabs.size(); i++){
if (i % columnCount == 0){
row ++;
}
final FilterBean.TableMode tab = tabs.get(i);
//显示标签的控件
final TextView label = new TextView(context);
//是否默认选中第一项
isSelect = setDefaultFirst(model, isSelect, tabs, i, tab, label);
//设置标签
setLabel(i, tab, label);
//记录上次选中状态
if (model.getLabels()!=null){
//存储上次选中的集合
for (int j=0;j 总结：通过自定义TypeLabelGridLayout的方式，实现了类似京东筛选的流式布局的筛选控件，并通过属性方法设置标签属性及实现可控制的单选或多选。
如有任何疑问，欢迎评论留言，谢谢！！！
源码地址：https://github.com/ruancw/FlowFilterDemo