SingleLine 模式的标签云效果，仿知乎问题话题列表

最近因为项目需要，实现了仿知乎话题列表的singleline标签云效果，而因为项目紧张，并没有参考第三方的实现，并且发现效果也还不错。

我们先来看知乎的效果：

首先，我们需要创建一个viewgroup类作为容器，（我这里用Linerlayout来实现）来包含这些需要显示的标签。

在布局文件中定义这个viewgroup类：

<LinearLayout
        android:id="@+id/ll_more_tag"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="center_vertical"
        android:orientation="horizontal" />

标签的布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="24dp"
    android:background="@drawable/shape_tuijian_bg_default">


    <TextView
        android:id="@+id/tv_tag_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:singleLine="true"
        android:text=""
        android:gravity="center"
        android:textSize="12sp" />
</RelativeLayout>

标签中shape资源代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 圆角 -->
    <corners
        android:bottomLeftRadius="13dp"
        android:bottomRightRadius="13dp"
        android:radius="8dp"
        android:topLeftRadius="13dp"
        android:topRightRadius="13dp" />


    <!-- 填充 -->
    <solid android:color="#ffffff" />
    <!-- 填充的颜色 -->
    <stroke
        android:width="0.5dp"
        android:color="#c5c5c5" />
</shape>

在java代码中：

1.实例化这个viewgroup对象，该对象的引用为llMoreTag

2.需要准备，要显示的标签数据，用集合topList表示

3.先根据toplist集合中的数据，将标签view动态添加到容器中（llMoreTag）

 LinearLayout llMoreTag = (LinearLayout) findViewById(R.id.ll_more_tag);
        List<String> topList = new ArrayList<>();
        //...此处添加toplist集合数据
        int margin = 10;//for example
        int height = 24;//for example
        for (int i = 0; i < topList.size(); i++) {
            View viewTag = View.inflate(this, R.layout.team_title_tagtext, null);
            TextView tagName = (TextView) viewTag.findViewById(R.id.tv_tag_name);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2, height);
            params.setMargins(0, 0, margin, 0);
            viewTag.setLayoutParams(params);
            tagName.setText(topList.get(i));
            llMoreTag.addView(viewTag);
        }

4.最关键的一步，当容器中已经将标签实现完成之后，有可能显示下了，也有可能没有显示下，这个时候需要去判读是否标签在一行线性布局中是否显示的了，用到一个比较

关键的类：viewTreeObserver

贴代码：

boolean firstCheck = true;
        llMoreTag.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            int totalWidth = 0;

            public boolean onPreDraw() {
                try {
                    totalWidth = 0;
                    for (int i = 0; i < llMoreTag.getChildCount(); i++) {
                        View child = llMoreTag.getChildAt(i);
                        totalWidth = totalWidth + child.getMeasuredWidth() + margin;
                    }
                    if (totalWidth > limitWidth) {
                        if (!firstCheck && llMoreTag.getChildCount() > 0) {
                            llMoreTag.removeViewAt(llMoreTag.getChildCount() - 1);
                        }
                        firstCheck = false;
                        if (llMoreTag.getChildCount() > 0) {
                            View lastChild = llMoreTag.getChildAt(llMoreTag.getChildCount() - 1);
                            TextView lastTag = (TextView) lastChild.findViewById(R.id.tv_tag_name);
                            lastTag.setText("···");
                        }
                    }
                } catch (Exception e) {

                }
                return true;
            }
        });

这一步的关键的思路是，当发现标签全部显示之后，如果超过一行，需要拿到最后一个标签，把最后一个标签移除掉后，再把最后一个标签变成···

实现效果：

只有三个标签的情况：

多余三个标签又显示不下的情况：