RecycleView 实现多标签展开收起效果

最近的项目需要实现一个多标签展开收起的效果，具体效果如下

收起效果

展开效果

拿到效果图，很自然会想到用 RecyclerView 来实现，但是至于具体怎么去收起和展开，我这里用了个取巧的办法，可能不是最好的办法，但也能达到要求，在此，主要作为记录用，大神轻喷。 废话不多说，直接上代码才是最实在的。 外层布局代码：

       <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_play"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/base10dp"
            android:layout_marginRight="@dimen/base10dp"/>
        <TextView
            android:id="@+id/tv_open_tips"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="@dimen/base20dp"
            android:text="展开全部"
            android:drawableRight="@drawable/detail_open"
            android:drawablePadding="@dimen/base4dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_marginTop="@dimen/base6dp"
            android:layout_marginBottom="@dimen/base10dp"
            android:textSize="@dimen/base10dp"
            />
复制代码

布局预览效果

这里点击展开和收起的按钮，我单独用了个 TextView 来实现，因为这样操作起来最简单，少了很多逻辑处理。（没办法，有点懒……） 接下来是 RecyclerView 中 item 的布局实现，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlRoot"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="@dimen/base80dp"
        android:minHeight="@dimen/base30dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:maxLength="4"
        android:background="@drawable/btn_common_oval_normal"
        android:maxLines="1"
        android:textColor="@color/common_black"
        android:textSize="@dimen/base16dp" />
</RelativeLayout>
复制代码

布局都写完了之后，我们直接看 adapter 适配器的实现代码：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyHolder> {
    private Context context;
    private List<Test> list;

    public MyAdapter(Context context) {
        this.context = context;
    }

    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
        return new MyHolder(v);
    }

    @Override
    public void onBindViewHolder(MyHolder holder, final int position) {
        String name = list.get(position).getName() ;
        holder.tv.setText(name);
    }

    @Override
    public int getItemCount() {
        return list == null ? 0 : list.size();
    }

    //隐藏
    public void setHideList(List<Test> newList) {
        this.list = newList;
        notifyDataSetChanged();
    }

    //展开
    public void setOpenList(List<Test> openList) {
        this.list = openList;
        notifyDataSetChanged();
    }

    //不需要隐藏/展开
    public void setRealList(List<Test> realList) {
        this.list = realList;
        notifyDataSetChanged();
    }

    //清除数据
    public void clearData() {
        if (list != null) {
            this.list.clear();
            notifyDataSetChanged();
        }
    }

    class MyHolder extends RecyclerView.ViewHolder {
        TextView tv;

        public MyHolder(View itemView) {
            super(itemView);
            tv = itemView.findViewById(R.id.tvName);
        }
    }
}
复制代码

TextView 绑定展开收起事件

        /**
         * 处理展开收缩的逻辑
         */
        tvOpenTips.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isOpen) {
                    adapter.setHideList(hideList);
                    tvOpenTips.setText("展开全部");
                    tvOpenTips.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.detail_open, 0);
                    isOpen = false;
                } else {
                    adapter.setOpenList(openList);
                    tvOpenTips.setText("收起全部");
                    tvOpenTips.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.detail_close, 0);
                    isOpen = true;
                }
            }
        });
复制代码

设置展开收起的数据源

    private void setData() {
        if (list.size() > 4) { //设置大于多少条数据开始隐藏
            for (int i = 0, j = list.size(); i < j; i++) {
                openList.add(list.get(i));
            }
            for (int i = 0; i < 4; i++) {
                hideList.add(list.get(i));
            }
            adapter.setHideList(hideList);
        } else {
            adapter.setRealList(list);
        }
        tvOpenTips.setVisibility(list.size() > 4 ? View.VISIBLE : View.GONE);
        rv.setAdapter(adapter);
    }
复制代码