[掌盟+]RecycleView实现"英雄资料"页和"发现"页

临近离职日子，在最后不用加班的情况下出去面试了第一家，被问了RecycleView，好吧，我现在的厂没有使用，还是使用ListView和GridView。那现在就用下这个来实现下掌盟的英雄资料页面

WE 3:0 成功每一盘都翻盘RNG，恭喜WE

一、效果图：
1.官方：

2.高(shan)仿(zhai)




二、RecycleView的使用
1.build.gradle添加依赖：

compile 'com.android.support:recyclerview-v7:25.3.1'

2.布局添加RecycleView：
以”发现”页的俱乐部横向列表为例：layout_club.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_marginTop="30dp"    android:orientation="vertical">    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_clubs"        android:layout_width="match_parent"        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView></LinearLayout>

3.初始化RecycleView相关：

private void initViewClub() {        //布局管理器        mLinearLayoutManager = new LinearLayoutManager(getActivity());        //设置为横向列表        mLinearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);        //添加布局管理器        mRvClubs.setLayoutManager(mLinearLayoutManager);        mClubs = new ArrayList<>();        //随便来几个数据，Ctrl + D        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        mClubs.add(new Club());        //适配器        mClubAdapter = new ClubAdapter(mClubs, getActivity());        //添加适配器        mRvClubs.setAdapter(mClubAdapter);        //添加item点击事件        mClubAdapter.setOnItemClickListener(new ClubAdapter.OnItemClickListener() {            @Override            public void onItemClick(View view, int position) {                Toast.makeText(getActivity(), "position:" + position, Toast.LENGTH_SHORT).show();            }        });    }

    3.1看下源码：

/**     * Creates a vertical LinearLayoutManager     *     * @param context Current context, will be used to access resources.     */    public LinearLayoutManager(Context context) {        this(context, VERTICAL, false);    }    /**     * @param context       Current context, will be used to access resources.     * @param orientation   Layout orientation. Should be {@link #HORIZONTAL} or {@link     *                      #VERTICAL}.     * @param reverseLayout When set to true, layouts from end to start.     */    public LinearLayoutManager(Context context, int orientation, boolean reverseLayout) {        setOrientation(orientation);        setReverseLayout(reverseLayout);        setAutoMeasureEnabled(true);    }

默认建立是一个垂直列表，并且数据从头到尾，可以通过
setOrientation()改变横向/竖向；setReverseLayout()改变数据从头到尾/从尾到头

4.实现Adapter：
    4.0 新建的Adapter必须继承RecycleView.Adatper<VH extends ViewHolder>
    4.1 需要实现这个抽象类的三个方法：
public abstract int getItemCount();
public abstract void onBindViewHolder(VH holder, int position);
public abstract VH onCreateViewHolder(ViewGroup parent, int viewType);
    4.2 当然Adapter免不了要有上下文和数据源，那就先简单写一个commAdapter封装一下，具体如下：

 /** * Created by ZP on 2017/4/29. */public abstract class CommAdapter<T, VH extends RecyclerView.ViewHolder> extends RecyclerView.Adapter<VH> {    protected List<T> mList;    protected Context mContext;    public CommAdapter(List<T> list, Context context) {        mList = list;        mContext = context;    }    @Override    public int getItemCount() {        return mList == null ? 0 : mList.size();    }}

ClubAdapter.java

public class ClubAdapter extends CommAdapter<Club, ClubAdapter.ClubViewHolder> implements View.OnClickListener{    public ClubAdapter(List<Club> list, Context context) {        super(list, context);    }    @Override    public ClubViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(mContext).inflate(R.layout.item_club, parent, false);        ClubViewHolder viewHolder = new ClubViewHolder(view);        view.setOnClickListener(this);        return viewHolder;    }    @Override    public void onBindViewHolder(ClubViewHolder holder, int position) {        holder.mImageView.setImageDrawable(mContext.getResources().getDrawable(R.drawable.team_club_6));        holder.mTextView.setText("EDG");        holder.itemView.setTag(position);    }    @Override    public void onClick(View v) {        if (mOnItemClickListener != null) {            mOnItemClickListener.onItemClick(v, (int) v.getTag());        }    }    public OnItemClickListener mOnItemClickListener;    public interface OnItemClickListener {        void onItemClick(View view, int position);    }    public void setOnItemClickListener(OnItemClickListener listener) {        this.mOnItemClickListener = listener;    }    class ClubViewHolder extends RecyclerView.ViewHolder {        private ImageView mImageView;        private TextView mTextView;        public ClubViewHolder(View view) {            super(view);            mImageView = (ImageView) itemView.findViewById(R.id.iv_club_icon);            mTextView = (TextView) itemView.findViewById(R.id.tv_club_name);        }    }}

5.实现item点击事件
    5.0 在onCreateViewHolder方法绑定点击监听
    5.1 在onBindViewHolder方法set个Tag，为了返回position
    5.2 使用就和之前用ListView的item点击事件一样

6.实现item不同布局：
    6.0 Recylce提供三种布局管理器：线性-LinearLayoutManager， 网格-GridLayoutManager，流式-StaggeredGridLayoutManager，都可以横向竖向
    6.1 不同的布局在onCreateViewHolder(ViewGroup parent, int viewType);方法根据viewType判断
    6.2 那就重写一下getItemViewType(int position)方法
    6.3 源码中默认返回 0 ：

/**         * Return the view type of the item at <code>position</code> for the purposes         * of view recycling.         *         * <p>The default implementation of this method returns 0, making the assumption of         * a single view type for the adapter. Unlike ListView adapters, types need not         * be contiguous. Consider using id resources to uniquely identify item view types.         *         * @param position position to query         * @return integer value identifying the type of the view needed to represent the item at         *                 <code>position</code>. Type codes need not be contiguous.         */        public int getItemViewType(int position) {            return 0;        }

    6.4 以“我的英雄”页为例：

/** * Created by ZP on 2017/4/29. */public class MyHeroAdapter extends CommAdapter<Hero, MyHeroAdapter.MyHeroViewHolder> {    private int TYPE_HERO = 1;    private int TYPE_FOOT_TIP = 2;    public MyHeroAdapter(List<Hero> list, Context context) {        super(list, context);    }    @Override    public MyHeroViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        if (viewType == TYPE_FOOT_TIP) {            View view = LayoutInflater.from(mContext).inflate(R.layout.item_tip_hero_data, parent, false);            MyHeroViewHolder viewHolder = new MyHeroViewHolder(view);            return viewHolder;        } else {            View view = LayoutInflater.from(mContext).inflate(R.layout.item_my_hero, parent, false);            MyHeroViewHolder viewHolder = new MyHeroViewHolder(view);            return viewHolder;        }    }    @Override    public int getItemCount() {        return super.getItemCount() + 1;    }    @Override    public int getItemViewType(int position) {        if (position == getItemCount() - 1) {            return TYPE_FOOT_TIP;        } else {            return TYPE_HERO;        }    }    @Override    public void onBindViewHolder(MyHeroViewHolder holder, int position) {    }    class MyHeroViewHolder extends RecyclerView.ViewHolder {        public MyHeroViewHolder(View itemView) {            super(itemView);        }    }}

7.数据绑定：
    7.0好像都是只是测试数据没有请求网络，之后再加入…

三、源码已经上传GitHub，链接：
https://github.com/scauzhangpeng/LPL