【Android实战】RecyclerView实现水平可滚动gridview

先看一下实现的效果图（优快云上传gif图限制在2M，所以只能通过压缩图片宽高和帧数来降低图片大小，结果导致图片分辨率变低），不过还好可以看清

如果有朋友想知道如何录制手机屏幕，然后将录制的video再转换成gif动图，请参考下面这篇博客（Android手机屏幕录制并转换成GIF）

言归正转，这里主要完成的功能如下：

1、实现可以水平滑动的列表

2、列表项的点击效果与交互限制（只可以选择三个标签）

写这篇博客的原因，是因为之前的实现碰到了一个问题。

之前的实现可以查看这篇博客   HorizontalScrollView实现可滑动GridView，并通过与该篇博客进行对比，来了解RecyclerView的强大，以及RecyclerView在使用上与传统ListView和GridView的区别

这里的效果是直接使用RecyclerView来实现的

首先说明一下，这里我并没有通过

<android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview_horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:scrollbars="horizontal" />

这种方式来声明，而是声明了一个FramLayout进行占位，然后在代码中动态添加

<FrameLayout
        android:id="@+id/tag_recyclerView_container"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_above="@id/start_live_btn"
        />

动态添加RecyclerVIew

/**
     * 初始化水平滑动标签列表
     * add By Author
     */
    private void initHorizontalTagRecycler() {
        // 创建一个线性布局管理器
        FrameLayout tagFrameLayout = (FrameLayout) findViewById(R.id.tag_recyclerView_container);
        horizontalTagRecyclerView = new RecyclerView(this);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        // 设置布局管理器
        horizontalTagRecyclerView.setLayoutManager(layoutManager);
        //设置间距
        int spacingInPixels = getResources().getDimensionPixelSize(R.dimen.dp_5);
        horizontalTagRecyclerView.addItemDecoration(new SpaceItemDecoration(spacingInPixels));
        //去掉RecyclerView滑到边界产生的蓝色阴影
        horizontalTagRecyclerView.setOverScrollMode(View.OVER_SCROLL_NEVER);
        tagFrameLayout.addView(horizontalTagRecyclerView);
        TLAdapter = new HorizontalTagAdapter(this);
        horizontalTagRecyclerView.setAdapter(TLAdapter);
        TLAdapter.setOnItemClickLitener(new HorizontalTagAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                ArrayList<TalentLableItem> showItems = new ArrayList<TalentLableItem>();
                showItems = TLAdapter.getItems();
                int count = 0;
                for (TalentLableItem item : showItems) {
                    if (item.isSelected()) {
                        count++;
                    }
                }
                if (count < 3) {
                    TLAdapter.setSeclection(position);
                    TLAdapter.notifyDataSetChanged();
                } else {
                    if (items.get(position).isSelected()) {
                        TLAdapter.setSeclection(position);
                        TLAdapter.notifyDataSetChanged();
                    } else {
                        ToastUtils.toast(CreateLiveRoomActivity.this, "最多只能选择三个标签");
                    }

                }
            }
        });
    }

设置item之间的间距使用到了ItemDecoration这个类

RecyclerView没有可以直接设置间距的属性，但可以用ItemDecoration来装饰一个item，所以继承重写ItemDecoration就可以实现（上下左右的）间距了

/**
     * RecyclerViews support the concept of ItemDecoration: special offsets and drawing around each element.
     */
    public class SpaceItemDecoration extends RecyclerView.ItemDecoration{

        private int space;

        public SpaceItemDecoration(int space) {
            this.space = space;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

            if(parent.getChildPosition(view) != 0)
                outRect.left = space;
        }
    }

我这里设置的是左边距，你也可以设置top、bottom、right

再来看一下适配器

/**
 * Created by Author on 2015/12/2.
 */
public class HorizontalTagAdapter extends RecyclerView.Adapter<HorizontalTagAdapter.ViewHolder> {

    private static final String TAG = "HorizontalTagAdapter";

    private Context context;
    private ArrayList<TalentLableItem> items;
    private LayoutInflater mInflater;
    private int clickTemp = -1;

    public HorizontalTagAdapter(Context context) {
        super();
        this.context = context;
        items = new ArrayList<TalentLableItem>();
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        // 创建一个View，简单起见直接使用系统提供的布局，就是一个TextView
        View view = View.inflate(viewGroup.getContext(), R.layout.talent_label_item, null);
        // 创建一个ViewHolder
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(final HorizontalTagAdapter.ViewHolder viewHolder, int i) {
        // 绑定数据到ViewHolder上
        viewHolder.mTextView.setText("#" + items.get(i).getLabel() + "#");
        TalentLableItem TLItem = items.get(i);
        if (TLItem.isSelected()) {
            viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_selected);
            viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color._3e363d));
        } else {
            viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_normal);
            viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color.ffffff));
        }

        if (clickTemp == i) {
            if (TLItem.isSelected()) {
                viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_normal);
                viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color.ffffff));
                TLItem.setSelected(false);
            } else {
                viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_selected);
                viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color._3e363d));
                TLItem.setSelected(true);
            }

        }
        if (mOnItemClickLitener != null) {
            viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos = viewHolder.getLayoutPosition();
                    mOnItemClickLitener.onItemClick(viewHolder.itemView, pos);
                }
            });
        }

    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public TextView mTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.label);
        }
    }

    public void setShowItems(ArrayList<TalentLableItem> items) {
        this.items = items;
        notifyDataSetChanged();

    }

    public ArrayList<TalentLableItem> getItems() {
        return items;

    }

    public void setSeclection(int position) {
        clickTemp = position;

    }

    public interface OnItemClickLitener {
        void onItemClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }


}

RecyclerView在进行视图展示，数据绑定，事件响应方面与普通的ListView和GridVIew略有区别，但是基本方式差不多