先看乐有家app过滤搜索标签栏

image.png

具体功能如下
1.点击某一个标签后，打开一个PopupWindow弹窗，如果选中PopupWindow中的某一个选项，那么选中文本显示在对应的标签栏中
2.选中后，标签要红色高亮（图标同理），此时再次点击该标签，保持高亮，如果在PopupWindow取消选中，恢复原本标签和默认状态

分析完直接开搞

一开始感觉就是单选标签 直接上适配器，点击的时候清空其他选中就行了，没啥难的,下面是我适配器的布局
开始觉得没必要用单个textview来做，即drawableRight在右侧添加箭头图标，用ImageView很灵活，可以控制图片大小间距，还有一张白色图（附着颜色+旋转角度）就可以完成

 <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="区域"
            />
        <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>

事实证明这种布局不行，当你选中的文本超出之后，文字会显示缺失，是前面的文本缺失，一个字只显示一半，这明显是不行的
下面的图 是乐有家app正常的状态

image.png

研究了很久 还是无法解决这个问题，有时图标直接被挤出，完全看不见

最后 不得不服， 使用TextView的 drawableRight来实现。

这种方式，TextView的宽度是减掉drawableRight图标的，即使文本超出，图标能正常显示，文本只有超出部分被省略号代替，前面可以完整显示,修改之后的布局

<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>

这种也有去缺点，更改图标比较麻烦，需要准备四张图片
1.未选中PopupWindow选项 未打开
2.未选中PopupWindow选项 打开
3.选中PopupWindow选项 未打开
4.选中PopupWindow选项 打开
弹出PopupWindow，如果点击空白处，标签需要同步关闭，效果如下

标签.gif

1.增加三级列表选择

这里直接采用三个RecyclerView来做，点击item的时候做一下数据同步即可

标签-三级列表.gif

高仿版--其他布局也不难 就不一一改了，实际根据自己需求来

标签-高仿版.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"
         />

三、代码设置数据

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("赋值并高亮状态");
        });

        String[] tag = new String[]{"区域", "价格", "户型", "更多"};
        // 设置数据
        tagGroupView.setData(tag);
        // 监听点击
        tagGroupView.setOnTabChangeListener((v, index, isOpen) -> {

        });
        // 修改标签文本并高亮--索引为最后点击的
        // tagGroupView.selectTextHighLight();
        // 恢复初始值 包含图标方向+图标颜色
        // tagGroupView.defaultStatus();
        // 图标恢复关闭状态--颜色保持
        // tagGroupView.closeIocn();
    }
}

最后 gitee传送门 https://gitee.com/Pino_W/tag_group