先看乐有家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
