Android自定義GridLayout實現(xiàn)流式布局熱門標(biāo)簽（可單選/多選）

前言：最近一直忙與公司項目開發(fā)維護(hù)荧嵌，已經(jīng)N久沒有記錄過項目的技術(shù)實現(xiàn)與問題（其實還是由于太懶）停士。之前項目中也有自定義的流式標(biāo)簽篩選控件只能單選，不過項目重構(gòu)需求改變完丽，需要能多選標(biāo)簽（之前也有人問過如何實現(xiàn)恋技，當(dāng)時只是大概說了思路，敢問蒼天饒過誰）逻族。本篇文章記錄自定義GridLayout實現(xiàn)無標(biāo)題的流式布局標(biāo)簽蜻底，根據(jù)屬性可自行設(shè)置單選還是多選，并且能重置數(shù)據(jù)聘鳞。

效果圖：


無標(biāo)題流式標(biāo)簽篩選

技術(shù)實現(xiàn)

1.自定義GridLayout

2.GridLayout屬性設(shè)置

3.TextView標(biāo)簽屬性設(shè)置

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.設(shè)置GridLayout的數(shù)據(jù)及屬性

/**
     * 將數(shù)據(jù)設(shè)置給GridLayout
     */
    @SuppressLint("RtlHardcoded")
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public void setGridData(List<FilterBean> listData) {
        //設(shè)置列數(shù)
        setColumnCount(columnCount);
        //設(shè)置行數(shù)
        setRowCount(getRowCount(listData));
        //將數(shù)據(jù)源設(shè)置到每個標(biāo)簽
        for (int i = 0; i < listData.size(); i++){
            //行數(shù)++
            ++row;
            //顯示每個條目類型的控件
            //配置列 第一個參數(shù)是起始列標(biāo) 第二個參數(shù)是占幾列薄辅，so -> 總列數(shù)
            GridLayout.Spec columnSpec = spec(0,columnCount);
            //配置行 第一個參數(shù)是起始行標(biāo)  起始行+起始列就是一個確定的位置
            GridLayout.Spec rowSpec = spec(row);
            //將Spec傳入GridLayout.LayoutParams并設(shè)置寬高為0或者WRAP_CONTENT，必須設(shè)置寬高抠璃，否則視圖異常
            GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams(rowSpec, columnSpec);
            //設(shè)置寬度
            layoutParams.width = GridLayout.LayoutParams.WRAP_CONTENT;
            //設(shè)置高度
            layoutParams.height = GridLayout.LayoutParams.WRAP_CONTENT;
            //設(shè)置位置
            layoutParams.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
            //設(shè)置間距
            layoutParams.bottomMargin = context.getResources().getDimensionPixelSize(R.dimen.dp_8);
            //根據(jù)mulEnable屬性值添加tab標(biāo)簽
            if (mulEnable){
                //多選
                mulAddTabs(listData.get(i));
            }else {
                //單選
                singleAddTabs(listData.get(i));
            }

        }
    }

3.GridLayout添加單選/多選標(biāo)簽

3.1 添加單選標(biāo)簽及屬性

/**
     * 添加tab單選標(biāo)簽
     * @param model 數(shù)據(jù)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++){
            //行數(shù)
            if (i % columnCount == 0){
                row ++;
            }
            final FilterBean.TableMode tab = tabs.get(i);
            //顯示標(biāo)簽的控件
            final TextView label = new TextView(context);
            //設(shè)置標(biāo)簽屬性
            setLabel(i, tab, label);
            //記錄上次選中狀態(tài)
            if (tabs.get(i) == model.getTab()){
                label.setSelected(true);
            }
            //標(biāo)簽的點擊事件
            label.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (tab != model.getTab()){
                        //清除上次選中的狀態(tài)
                        getChildAt(getIndex(model)).setSelected(false);
                        //設(shè)置當(dāng)前點擊選中的tab值
                        model.setTab(tab);
                        label.setSelected(true);
                        selectTvLabel.add(label);
                        String labelText=label.getText().toString();
                        //清楚集合中的數(shù)據(jù)再添加
                        selectLabel.clear();
                        selectLabel.add(labelText);
                        Log.e("rcw","labelText--->"+labelText);
                    }
                }
            });
        }
    }

3.2 添加多選標(biāo)簽

/**
     * 添加tab多選標(biāo)簽
     * @param model 數(shù)據(jù)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++){
            //判斷是否增加行數(shù)
            if (i % columnCount == 0){
                row ++;
            }
            final FilterBean.TableMode tab = tabs.get(i);
            //顯示標(biāo)簽的控件TextView
            final TextView label = new TextView(context);
            //設(shè)置標(biāo)簽屬性
            setLabel(i, tab, label);
            //記錄上次選中狀態(tài)
            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情況下記錄上次選中的狀態(tài)及參數(shù)
                        selectTab.add(tab);
                        selectLabel.add(tab.name);
                        //記錄選中的標(biāo)簽用于重置數(shù)據(jù)
                        selectTvLabel.add(label);
                    }
                }
            }

            //標(biāo)簽的點擊事件
            label.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //控制標(biāo)簽的選擇與取消
                    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);
        //不走點擊事件站楚，重新設(shè)置上次的記錄
        model.setLabels(selectTab);
    }

3.3 設(shè)置TextView標(biāo)簽的屬性

/**
     * 設(shè)置標(biāo)簽屬性
     * @param tabIndex 標(biāo)簽的位置
     * @param tab 標(biāo)簽的tab
     * @param label 標(biāo)簽控件
     */
    @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用于設(shè)置label標(biāo)簽的參數(shù)
        addView(label,getItemLayoutParams(tabIndex,row));
        label.setText(tab.name);
    }

注：顏色及padding值需要使用getResourese方法獲取

4.自定義GridLayout的公共屬性方法

4.1 標(biāo)簽字體大小

/**
     * tab標(biāo)簽字體大小
     * @param tabTextSize 標(biāo)簽字體大小
     */
    public void setLabelSize(int tabTextSize) {
        this.tabTextSize = tabTextSize;
    }

4.2 標(biāo)簽字體顏色

/**
     * tab標(biāo)簽字體顏色
     * @param labelTextColor 顏色
     */
    public void setLabelColor(int labelTextColor) {
        this.labelTextColor = labelTextColor;
    }

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

4.3 標(biāo)簽背景色

/**
     * 設(shè)置標(biāo)簽的背景色
     * @param labelBg 背景色（drawable）
     */
    public void setLabelBg(int labelBg) {
        this.labelBg = labelBg;
    }

4.4 設(shè)置是否能多選

/**
     * 設(shè)置標(biāo)簽是否可以多選
     * @param mulEnable 是否可以多選標(biāo)簽
     */
    public void setMulEnable(boolean mulEnable){
        this.mulEnable = mulEnable;
    }

4.5 設(shè)置GridLayout的列數(shù)

/**
     * 設(shè)置gridLayout的列數(shù)
     * @param columnCount 列數(shù)
     */
    public void setColumnCount(int columnCount){
        this.columnCount = columnCount;
    }

4.6 重置數(shù)據(jù)的方法

/**
     * 重置數(shù)據(jù)
     */
    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("無標(biāo)題的標(biāo)簽(多選)");
            lglLabel.setMulEnable(true);
        }else {
            tvTitle.setText("無標(biāo)題的標(biāo)簽(單選)");
            lglLabel.setMulEnable(false);
        }
        lglLabel.setColumnCount(3);
        lglLabel.setLabelBg(R.drawable.flow_popup);
        lglLabel.setGridData(labelLists);
    }

總結(jié)：通過自定義GridLayout的方式，實現(xiàn)了類似流布局的篩選控件搏嗡，并通過屬性方法設(shè)置標(biāo)簽屬性及實現(xiàn)可控制的單選或多選窿春。

如有任何疑問，歡迎評論留言采盒，謝謝＞善颉！磅氨！

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末尺栖，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子烦租，更是在濱河造成了極大的恐慌延赌，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,692評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件叉橱，死亡現(xiàn)場離奇詭異挫以，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)赏迟，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門屡贺，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蠢棱，“玉大人锌杀，你說我怎么就攤上這事甩栈。” “怎么了糕再？”我有些...
    開封第一講書人閱讀 162,995評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵量没，是天一觀的道長。 經(jīng)常有香客問我突想，道長殴蹄，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,223評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任猾担，我火速辦了婚禮袭灯，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘绑嘹。我一直安慰自己稽荧，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,245評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布工腋。 她就那樣靜靜地躺著姨丈，像睡著了一般。 火紅的嫁衣襯著肌膚如雪擅腰。 梳的紋絲不亂的頭發(fā)上蟋恬，一...
    開封第一講書人閱讀 51,208評論 1贊 299
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音趁冈，去河邊找鬼歼争。 笑死，一個胖子當(dāng)著我的面吹牛渗勘，可吹牛的內(nèi)容都是我干的矾飞。 我是一名探鬼主播，決...
    沈念sama閱讀 40,091評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼呀邢，長吁一口氣：“原來是場噩夢啊……” “哼洒沦！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起价淌，我...
    開封第一講書人閱讀 38,929評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤申眼，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后蝉衣，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體括尸，經(jīng)...
    沈念sama閱讀 45,346評論 1贊 311
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年病毡，在試婚紗的時候發(fā)現(xiàn)自己被綠了濒翻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,739評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖有送，靈堂內(nèi)的尸體忽然破棺而出淌喻，到底是詐尸還是另有隱情，我是刑警寧澤雀摘，帶...
    沈念sama閱讀 35,437評論 5贊 344
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布裸删，位于F島的核電站，受9級特大地震影響阵赠，放射性物質(zhì)發(fā)生泄漏涯塔。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一清蚀、第九天 我趴在偏房一處隱蔽的房頂上張望匕荸。 院中可真熱鬧，春花似錦枷邪、人聲如沸每聪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0贊 22
  • 一樁弒父案齿风，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽药薯。三九已至，卻和暖如春救斑，著一層夾襖步出監(jiān)牢的瞬間童本，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工脸候， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留穷娱，地道東北人。 一個月前我還...
    沈念sama閱讀 47,760評論 2贊 369
  • 代替公主和親
    正文 我出身青樓运沦，卻偏偏與公主長得像泵额，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子携添，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,647評論 2贊 354