Android自定义GridLayout实现流式布局热门标签（可单选/多选）

前言：最近一直忙与公司项目开发维护，已经N久没有记录过项目的技术实现与问题（其实还是由于太懒）。之前项目中也有自定义的流式标签筛选控件只能单选，不过项目重构需求改变，需要能多选标签（之前也有人问过如何实现，当时只是大概说了思路，敢问苍天饶过谁）。本篇文章记录自定义GridLayout实现无标题的流式布局标签，根据属性可自行设置单选还是多选，并且能重置数据。

效果图：


无标题流式标签筛选

技术实现

1.自定义GridLayout

2.GridLayout属性设置

3.TextView标签属性设置

1.重写GridLayout的属性方法

public LabelGridLayout(Context context) {
        super(context);
        this.context=context;
    }

    public LabelGridLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
    }

    public LabelGridLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
    }

2.设置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
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void singleAddTabs(final FilterBean model){
        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);
            //设置标签属性
            setLabel(i, tab, label);
            //记录上次选中状态
            if (tabs.get(i) == model.getTab()){
                label.setSelected(true);
            }
            //标签的点击事件
            label.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (tab != model.getTab()){
                        //清除上次选中的状态
                        getChildAt(getIndex(model)).setSelected(false);
                        //设置当前点击选中的tab值
                        model.setTab(tab);
                        label.setSelected(true);
                        selectTvLabel.add(label);
                        String labelText=label.getText().toString();
                        //清楚集合中的数据再添加
                        selectLabel.clear();
                        selectLabel.add(labelText);
                        Log.e("rcw","labelText--->"+labelText);
                    }
                }
            });
        }
    }

3.2 添加多选标签

/**
     * 添加tab多选标签
     * @param model 数据bean
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void mulAddTabs(final FilterBean model){
        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);
            //显示标签的控件TextView
            final TextView label = new TextView(context);
            //设置标签属性
            setLabel(i, tab, label);
            //记录上次选中状态
            Log.e("rcw","tabs.get(i)="+tabs.get(i));
            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);
                        selectLabel.add(tab.name);
                        //记录选中的标签用于重置数据
                        selectTvLabel.add(label);
                    }
                }
            }

            //标签的点击事件
            label.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //控制标签的选择与取消
                    if (label.isSelected()){
                        label.setSelected(false);
                        selectLabel.remove(label.getText().toString());
                        Log.e("rcw","selectLabel="+selectLabel);
                        selectTab.remove(tab);
                        Log.e("rcw","selectTab="+selectTab.size());
                        Log.e("rcw","selectTab="+selectTab);
                        selectTvLabel.remove(label);
                    }else {
                        label.setSelected(true);
                        selectLabel.add(label.getText().toString());
                        Log.e("rcw","selectLabel="+selectLabel);
                        selectTab.add(tab);
                        Log.e("rcw","selectTab="+selectTab.size());
                        Log.e("rcw","selectTab="+selectTab);
                        selectTvLabel.add(label);
                    }
                    //记录选中的label
                    model.setLabels(selectTab);
                }
            });
        }
        Log.e("rcw","selectLabel="+selectLabel);
        //不走点击事件，重新设置上次的记录
        model.setLabels(selectTab);
    }

3.3 设置TextView标签的属性

/**
     * 设置标签属性
     * @param tabIndex 标签的位置
     * @param tab 标签的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方法获取

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

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 labelBg 背景色（drawable）
     */
    public void setLabelBg(int labelBg) {
        this.labelBg = labelBg;
    }

4.4 设置是否能多选

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

4.5 设置GridLayout的列数

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

4.6 重置数据的方法

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

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);
    }

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

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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,378评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,356评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,702评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,259评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,263评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,036评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,349评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,979评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,469评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,703评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,257评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2赞 345