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