先看一下實現的效果圖（CSDN上傳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" />

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


}