[掌盟+]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