先看樂有家app過濾搜索標(biāo)簽欄

image.png

具體功能如下
1.點(diǎn)擊某一個標(biāo)簽后，打開一個PopupWindow彈窗，如果選中PopupWindow中的某一個選項栈暇，那么選中文本顯示在對應(yīng)的標(biāo)簽欄中
2.選中后脾猛，標(biāo)簽要紅色高亮（圖標(biāo)同理），此時再次點(diǎn)擊該標(biāo)簽贤姆，保持高亮榆苞，如果在PopupWindow取消選中，恢復(fù)原本標(biāo)簽和默認(rèn)狀態(tài)

分析完直接開搞

一開始感覺就是單選標(biāo)簽 直接上適配器霞捡，點(diǎn)擊的時候清空其他選中就行了坐漏，沒啥難的,下面是我適配器的布局
開始覺得沒必要用單個textview來做，即drawableRight在右側(cè)添加箭頭圖標(biāo)，用ImageView很靈活仙畦，可以控制圖片大小間距输涕，還有一張白色圖（附著顏色+旋轉(zhuǎn)角度）就可以完成

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        >
        <TextView
            android:id="@+id/tv_quyu1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="區(qū)域"
            />
        <ImageView
            app:tint="@color/gray_color"
            android:layout_width="@dimen/dp_10"
            android:layout_height="8dp"
            android:layout_marginLeft="5dp"
            android:src="@mipmap/arrow_up"
            android:rotation="180"
            />
    </LinearLayout>

事實證明這種布局不行，當(dāng)你選中的文本超出之后慨畸，文字會顯示缺失莱坎，是前面的文本缺失，一個字只顯示一半寸士，這明顯是不行的
下面的圖 是樂有家app正常的狀態(tài)

image.png

研究了很久 還是無法解決這個問題檐什，有時圖標(biāo)直接被擠出，完全看不見

最后 不得不服弱卡， 使用TextView的 drawableRight來實現(xiàn)乃正。

這種方式，TextView的寬度是減掉drawableRight圖標(biāo)的婶博，即使文本超出瓮具，圖標(biāo)能正常顯示，文本只有超出部分被省略號代替凡人，前面可以完整顯示,修改之后的布局

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawablePadding="2dp"
        android:drawableRight="@drawable/ic_dn"
        android:gravity="center"
        android:ellipsize="end"
        android:maxLines="1"
        android:singleLine="true"
        android:text="66666"
        android:textColor="#222222" />
</FrameLayout>

這種也有去缺點(diǎn)名党，更改圖標(biāo)比較麻煩，需要準(zhǔn)備四張圖片
1.未選中PopupWindow選項 未打開
2.未選中PopupWindow選項 打開
3.選中PopupWindow選項 未打開
4.選中PopupWindow選項 打開
彈出PopupWindow挠轴，如果點(diǎn)擊空白處传睹，標(biāo)簽需要同步關(guān)閉，效果如下

標(biāo)簽.gif

1.增加三級列表選擇

這里直接采用三個RecyclerView來做岸晦，點(diǎn)擊item的時候做一下數(shù)據(jù)同步即可

標(biāo)簽-三級列表.gif

高仿版--其他布局也不難 就不一一改了欧啤，實際根據(jù)自己需求來

標(biāo)簽-高仿版.gif

使用方式

一、引入依賴

implementation 'com.gitee.Pino_W:tag_group:v1.0.0'

二启上、布局引入

<com.uni.taggroupview.TagGroupView
        android:id="@+id/tag_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         />

三邢隧、代碼設(shè)置數(shù)據(jù)

public class MainActivity extends AppCompatActivity {
    TagGroupView tagGroupView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tagGroupView=findViewById(R.id.tag_view);
        findViewById(R.id.btn).setOnClickListener(view -> {
            tagGroupView.selectTextHighLight("賦值并高亮狀態(tài)");
        });

        String[] tag = new String[]{"區(qū)域", "價格", "戶型", "更多"};
        // 設(shè)置數(shù)據(jù)
        tagGroupView.setData(tag);
        // 監(jiān)聽點(diǎn)擊
        tagGroupView.setOnTabChangeListener((v, index, isOpen) -> {

        });
        // 修改標(biāo)簽文本并高亮--索引為最后點(diǎn)擊的
        // tagGroupView.selectTextHighLight();
        // 恢復(fù)初始值 包含圖標(biāo)方向+圖標(biāo)顏色
        // tagGroupView.defaultStatus();
        // 圖標(biāo)恢復(fù)關(guān)閉狀態(tài)--顏色保持
        // tagGroupView.closeIocn();
    }
}

最后 gitee傳送門 https://gitee.com/Pino_W/tag_group