Android实现类似京东筛选的流式布局标签（可单选/多选）

前言：很久以前的一篇文章《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<FilterBean> 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<FilterBean.TableMode> 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<labelLists.size();i++){
                            String tvDes=labelLists.get(i);
                            //判断当前集合中是否包含TypeName
                            if (tvDes.contains(model.getTypeName())){
                                flag=i;
                            }
                        }
                        if (flag!=-1){
                            //先删除返回数据集合中的之前选中的
                            labelLists.remove(flag);
                            //添加当前选中的数据到集合
                            labelLists.add(flag,model.getTypeName()+"-"+labelText);
                        }
                        //记录选中状态下
                        recordStatus(labelText, flag, model);
                        //labelLists.add(model.getTypeName()+"-"+labelText);
                        Log.e("rcw","labelText--->"+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<FilterBean.TableMode> 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<model.getLabels().size();j++){
                    if (tab == model.getLabels().get(j)){
                        label.setSelected(true);
                        //解决不点击label情况下记录上次选中的状态及参数
                        selectTab.add(tab);
                        labelLists.add(model.getTypeName()+"-"+tab.name);
                        selectLabel.add(label);
                    }
                }
            }
            //标签的点击事件
            label.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (label.isSelected()){
                        label.setSelected(false);
                        labelLists.remove(model.getTypeName()+"-"+label.getText().toString());
                        Log.e("rcw","labelLists="+labelLists);
                        selectTab.remove(tab);
                        Log.e("rcw","selectTab="+selectTab.size());
                        Log.e("rcw","selectTab="+selectTab);
                        selectLabel.remove(label);
                    }else {
                        label.setSelected(true);
                        labelLists.add(model.getTypeName()+"-"+label.getText().toString());
                        Log.e("rcw","labelLists="+labelLists);
                        selectTab.add(tab);
                        Log.e("rcw","selectTab="+selectTab.size());
                        Log.e("rcw","selectTab="+selectTab);
                        selectLabel.add(label);
                    }
                    //记录选中的label
                    model.setLabels(selectTab);
                }
            });
        }
        //记录选中的label
        model.setLabels(selectTab);
    }

3.3 设置TextView标签的属性

    /**
     * 设置标签的属性
     * @param tabIndex 标签的位置
     * @param tab 标签数据
     * @param label 标签控件
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void setLabel(int tabIndex, FilterBean.TableMode tab, TextView label) {
        label.setTextSize(tabTextSize);
        label.setTextColor(context.getResources().getColorStateList(labelTextColor));
        label.setBackgroundDrawable(context.getResources().getDrawable(labelBg));
        label.setSingleLine(true);
        label.setGravity(Gravity.CENTER);
        label.setEllipsize(TextUtils.TruncateAt.MIDDLE);
        //上下padding值
        int paddingT = context.getResources().getDimensionPixelSize(R.dimen.dp_8);
        //左右padding值
        int paddingL = context.getResources().getDimensionPixelSize(R.dimen.dp_8);
        label.setPadding(paddingL,paddingT,paddingL,paddingT);
        //getItemLayoutParams用于设置label标签的参数
        addView(label,getItemLayoutParams(tabIndex,row));
        label.setText(tab.name);
    }

注：颜色及padding值需要使用getResourese方法获取

3.4 默认选中的方法

    /**
     * 设置是否默认选中
     * @param model model
     * @param isSelect boolean
     * @param tabs tabs
     * @param i 下标
     * @param tab tab
     * @param label 标签
     * @return boolean
     */
    private boolean setDefaultFirst(FilterBean model, boolean isSelect, List<FilterBean.TableMode> tabs, int i, FilterBean.TableMode tab, TextView label) {
        //循环判断是否有选中的标签
        for (int j = 0; j < tabs.size(); j++){
            if (tabs.get(j) == model.getTab()){
                isSelect=true;
            }
        }
        //没有选中的标签则，设置默认选中第一个
        if (i==0&&!isSelect&&defaultFirst) {
            //每个tab的第一个设置为选中
            label.setSelected(true);
            //记录选中的tab值
            model.setTab(tab);
        }
        return isSelect;
    }

4.自定义TypeLabelGridLayout的公共属性方法

4.1 标签字体大小

/**
     * tab标签字体大小
     * @param tabTextSize 标签字体大小
     */
    public void setLabelSize(int tabTextSize) {
        this.tabTextSize = tabTextSize;
    }

4.2 标签字体颜色

/**
     * tab标签字体颜色
     * @param labelTextColor 颜色
     */
    public void setLabelColor(int labelTextColor) {
        this.labelTextColor = labelTextColor;
    }

注：color属性是res文件下的color不是values文件下的color

4.3 标题的字体大小

    /**
     * 标题字体大小
     * @param titleTextSize 字体大小
     */
    public void setTitleSize(int titleTextSize) {
        this.titleTextSize = titleTextSize;
    }

4.4 标题的字体颜色

    /**
     * 标题字体颜色
     * @param titleTextColor 颜色
     */
    public void setTitleColor(int titleTextColor) {
        this.titleTextColor = titleTextColor;
    }

4.5 标签背景色

/**
     * 设置标签的背景色
     * @param labelBg 背景色（drawable）
     */
    public void setLabelBg(int labelBg) {
        this.labelBg = labelBg;
    }

4.6 设置是否能多选

/**
     * 设置标签是否可以多选
     * @param mulEnable 是否可以多选标签
     */
    public void setMulEnable(boolean mulEnable){
        this.mulEnable = mulEnable;
    }

4.7 设置GridLayout的列数

/**
     * 设置gridLayout的列数
     * @param columnCount 列数
     */
    public void setColumnCount(int columnCount){
        this.columnCount = columnCount;
    }

4.8 重置数据的方法

    /**
     * 重置数据
     */
    public void resetData(){
        for (int i=0;i<selectLabel.size();i++){
            selectLabel.get(i).setSelected(false);
        }
        selectTab.clear();
        labelLists.clear();
    }

4.9 设置是否默认选中第一项

    /**
     * 设置标签是否默认选中首项
     * @param defaultFirst 是否默认选中首项
     */
    public void setDefaultFirst(boolean defaultFirst){
        this.defaultFirst = defaultFirst;
    }

5.控件使用

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void setViewData() {
        if (isMul){
            tvTitle.setText("带标题的标签(多选)");
            lglLabel.setMulEnable(true);
        }else {
            tvTitle.setText("带标题的标签(单选)");
            lglLabel.setMulEnable(false);
        }
        lglLabel.setColumnCount(3);
        lglLabel.setLabelBg(R.drawable.flow_popup);
        lglLabel.setGridData(labelLists);
    }

总结：通过自定义TypeLabelGridLayout的方式，实现了类似京东筛选的流式布局的筛选控件，并通过属性方法设置标签属性及实现可控制的单选或多选。

如有任何疑问，欢迎评论留言，谢谢！！！

源码地址：https://github.com/ruancw/FlowFilterDemo

​