用RecyclerView实现新闻列表页，包括头部的图片轮播，两种Item显示方式，下拉刷新和上拉加载以及限制列表的加载条目数
效果图：
1、实现列表头部的图片轮播，方式：给RecyclerView添加HeaderView。
RecyclerView默认是没有添加HeaderView方法的，所以我从网上找到了一种从外部添加View的方式加以实现。
要给RecyclerView添加HeaderView，首先要准备一个View：
xml version="1.0" encoding="utf-8"?><com.jude.rollviewpager.RollPagerView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/rpv_news_detail" android:layout_width="match_parent" android:layout_height="180dp" app:rollviewpager_play_delay="3000" />
这是一个开源的图片轮播控件，可以实现图片的循环轮播。在github上可以找到。用法可以到 这里看说明。本节只是说明怎样给RecyclerView添加HeaderView。
HeaderView已经有了，接着要在RecyclerView的Adapter定义一个方法：
// headerView的setter public void setHeaderView(View headerView) { this.headerView = headerView; notifyItemInserted(0); }
上面的方法接收一个View参数，赋值给Adapter的成员变量headerView，然后调用notify方法通知RecyclerView在0号位置添加了一个Item。这样就可以达到添加HeaderView的效果。
此方法的调用时机实在给RecyclerView设置Adapter之前，也就是在调用setAdapter方法之前。
到这里并没有结束，我们还要继续在Adapter类里操作。首先，现在在RecyclerView里已经不止一种类型的View，所以我们要复写getItemViewType(int position)方法，在里面进行View的区分。
@Override public int getItemViewType(int position) { if (headerView == null) return NORMAL; if (position == 0) return HEADER;
return NORMAL; }
上面的方法很好理解，如果headerView为空则返回普通View，
如果在位置0处，则返回Header，
其他情况都返回普通View，其中的NORMAL和HEADER是两个自定义的整型常量，用于区分View，可以是任意不同的整型值。
接着，在onCreateViewHolder方法中通过viewTyper的判断，做不同的操作。
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (headerView != null && viewType == HEADER) return new ViewHolder(headerView); View view = LayoutInflater.from(mContext).inflate(R.layout.item_news_detail_rv, parent, false); return new ViewHolder(view); } }
如果是HEADER，则将headerView传进去，否则，正常的View传进去。ViewHolder：
public class ViewHolder extends RecyclerView.ViewHolder { private ImageView iv_item_news_detail_rv; private TextView tv_title; private TextView tv_author; private TextView tv_zan; public ViewHolder(View itemView) { super(itemView); if (itemView == headerView) return; iv_item_news_detail_rv = (ImageView) itemView.findViewById(R.id.iv_item_news_detail_rv); tv_title = (TextView) itemView.findViewById(R.id.tv_title_news_detail); tv_author = (TextView) itemView.findViewById(R.id.tv_author_news_detail); tv_zan = (TextView) itemView.findViewById(R.id.tv_zan_news_detail); } }
可以看到在ViewHolder的构造函数里，判断itemView的种类，如果是headerView，则直接返回，如果不是，则获取普通布局里控件的引用。
最后，在onBindViewHolder中：
@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { if (getItemViewType(position) == HEADER) return;- final int pos = getRealPosition(holder);
NewsModel currNM = mList.get(pos); ViewHolderNormal normalHolder = (ViewHolderNormal) holder; normalHolder.tv_title.setText(currNM.title); normalHolder.tv_author.setText(currNM.source); normalHolder.tv_zan.setText(currNM.replyCount + "跟帖"); Glide.with(mContext).load(currNM.imgsrc ).into(normalHolder.iv_item_news_detail_rv);}
如果是HEADER，则直接返回，如果不是，则填充数据。其中有一句
final int pos = getRealPosition(holder);
因为添加了一个headerView，其他的Item的position都往后移了以为，所以要进行动态计算：
private int getRealPosition(RecyclerView.ViewHolder holder) { int position = holder.getLayoutPosition(); return headerView == null ? position : position - 1; }
至此，就完成了对RecyclerView的HeaderView的添加。
2、在添加HeaderView的基础上，实现RecyclerView加载两种不同布局的Item。
先准备好两种布局：
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="110dp" android:orientation="horizontal"> <ImageView android:id="@+id/iv_item_news_detail_rv" android:layout_width="120dp" android:layout_height="110dp" android:layout_marginLeft="10dp" android:src="@mipmap/i1" /> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <TextView android:id="@+id/tv_title_news_detail" android:layout_width="match_parent" android:layout_height="80dp" android:layout_marginLeft="3dp" android:lineSpacingExtra="10dp" android:lines="2" android:paddingLeft="5dp" android:paddingTop="10dp" android:text="Snapshots of the development version are available in Sonatype's snapshots repository." android:textColor="@android:color/black" android:textSize="18sp" /> <TextView android:id="@+id/tv_author_news_detail" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_below="@+id/tv_title_news_detail" android:layout_marginLeft="3dp" android:paddingLeft="5dp" android:text="New Text" android:textColor="@android:color/darker_gray" android:textSize="15sp" /> <TextView android:id="@+id/tv_zan_news_detail" android:layout_width="match_parent" android:layout_height="30dp" android:layout_below="@+id/tv_title_news_detail" android:layout_marginLeft="3dp" android:layout_toRightOf="@+id/tv_author_news_detail" android:gravity="right" android:paddingLeft="5dp" android:text="New Text" android:textColor="@android:color/darker_gray" android:textSize="15sp" /> RelativeLayout>LinearLayout>
效果图：
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="180dp" android:orientation="vertical"> <TextView android:id="@+id/tv_title_item_image" android:layout_width="match_parent" android:layout_height="40dp" android:padding="10dp" android:text="标题" android:textColor="@android:color/black" android:textSize="17sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="110dp"> <ImageView android:id="@+id/iv_left_item_image" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:src="@mipmap/i1" /> <ImageView android:id="@+id/iv_center_item_image" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_weight="1" android:src="@mipmap/i1" /> <ImageView android:id="@+id/iv_right_item_image" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginRight="10dp" android:layout_weight="1" android:src="@mipmap/i1" /> LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="30dp"> <TextView android:id="@+id/tv_source_item_image" android:layout_width="wrap_content" android:layout_height="30dp" android:paddingLeft="10dp" android:text="要闻" android:textColor="@android:color/darker_gray" android:textSize="16sp" /> <TextView android:id="@+id/tv_reply_item_image" android:layout_width="match_parent" android:layout_height="30dp" android:gravity="right" android:paddingRight="10dp" android:text="跟帖" android:textColor="@android:color/darker_gray" android:textSize="16sp" /> LinearLayout>LinearLayout>
效果图：
在Adapter创建两个对应的ViewHolder类：
public class ViewHolderNormal extends RecyclerView.ViewHolder { private ImageView iv_item_news_detail_rv; private TextView tv_title; private TextView tv_author; private TextView tv_zan; public ViewHolderNormal(View itemView) { super(itemView); if (itemView == headerView) return; iv_item_news_detail_rv = (ImageView) itemView.findViewById(R.id.iv_item_news_detail_rv); tv_title = (TextView) itemView.findViewById(R.id.tv_title_news_detail); tv_author = (TextView) itemView.findViewById(R.id.tv_author_news_detail); tv_zan = (TextView) itemView.findViewById(R.id.tv_zan_news_detail); } } public class ViewHolderMultiImage extends RecyclerView.ViewHolder { private ImageView iv_center; private ImageView iv_right; private ImageView iv_item_news_detail_rv; private TextView tv_title; private TextView tv_author; private TextView tv_zan; public ViewHolderMultiImage(View itemView) { super(itemView); iv_item_news_detail_rv = (ImageView) itemView.findViewById(R.id.iv_left_item_image); iv_center = (ImageView) itemView.findViewById(R.id.iv_center_item_image); iv_right = (ImageView) itemView.findViewById(R.id.iv_right_item_image); tv_title = (TextView) itemView.findViewById(R.id.tv_title_item_image); tv_author = (TextView) itemView.findViewById(R.id.tv_source_item_image); tv_zan = (TextView) itemView.findViewById(R.id.tv_reply_item_image); } }
现在由于是三种ViewType，所以修改getItemViewType：
@Override public int getItemViewType(int position) { if (headerView == null) { NewsModel currNM = mList.get(position - 1); if (currNM.imgextra == null || currNM.imgextra.size() == 0) return NORMAL; return MULTIIMAGE; } if (position == 0) return HEADER; NewsModel currNM = mList.get(position - 1); if (currNM.imgextra == null || currNM.imgextra.size() == 0) return NORMAL; return MULTIIMAGE; }
在不是headerView的情况下，根据所获取的新闻是图片新闻还是普通新闻，返回对应的ViewType。
在onCreateViewHolder也要增加一些判断：
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (headerView != null && viewType == HEADER) return new ViewHolderNormal(headerView); if (viewType == NORMAL) { View view = LayoutInflater.from(mContext).inflate(R.layout.item_news_detail_rv, parent, false); return new ViewHolderNormal(view); }- View view = LayoutInflater.from(mContext).inflate(R.layout.item_image_news_detail_rv, parent, false);
return new ViewHolderMultiImage(view); }
最后在onBindViewHolder中：
@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { if (getItemViewType(position) == HEADER) return;- final int pos = getRealPosition(holder);
NewsModel currNM = mList.get(pos); switch (getItemViewType(position)) { case NORMAL: ViewHolderNormal normalHolder = (ViewHolderNormal) holder; normalHolder.tv_title.setText(currNM.title); normalHolder.tv_author.setText(currNM.source); normalHolder.tv_zan.setText(currNM.replyCount + "跟帖"); Glide.with(mContext).load(currNM.imgsrc).into(normalHolder.iv_item_news_detail_rv); break; case MULTIIMAGE: ViewHolderMultiImage imageHolder = (ViewHolderMultiImage) holder; imageHolder.tv_title.setText(currNM.title); imageHolder.tv_author.setText(currNM.source); imageHolder.tv_zan.setText(currNM.replyCount + "跟帖"); Glide.with(mContext).load(currNM.imgsrc).into(imageHolder.iv_item_news_detail_rv); if (currNM.imgextra != null && currNM.imgextra.size() > 1) { Glide.with(mContext).load(currNM.imgextra.get(0).imgsrc).into(imageHolder.iv_center); Glide.with(mContext).load(currNM.imgextra.get(1).imgsrc).into(imageHolder.iv_right); } break; }}
代码都很简单。这样就实现了RecyclerView加载两种不同ViewType的Item。
3、实现下拉刷新。
这里我用的是android的v4包里的SwipeRefreshLayout。首先布局文件中，让SwipeRefreshLayout包裹RecyclerView：
<android.support.v4.widget.SwipeRefreshLayout android:id="@+id/srl_news_detail" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" android:visibility="gone"> <android.support.v7.widget.RecyclerView android:id="@+id/rv_news_detail" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" /> android.support.v4.widget.SwipeRefreshLayout>
接着在页面中获取SwipeRefreshLayout的引用，并给其设置一些参数，如刷新进度条的颜色、背景颜色、位置：
- // 背景颜色
srl_news_detail.setProgressBackgroundColorSchemeResource(android.R.color.white);- // 进度条变换颜色
srl_news_detail.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);// 进度条显示位置srl_news_detail.setProgressViewOffset(false, 0, (int) TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24, getResources() .getDisplayMetrics()));
最后给SwipeRefreshLayout设置onRefreshListener：
srl_news_detail.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { page = 0; mPresenter.loadRefreshData(getUrl()); } });
其中的
mPresenter.loadRefreshData(getUrl());
就是做的加载数据并更新页面的操作。
4、实现上拉加载数据以及限制列表的加载条目数。
实现上拉加载是通过监听RecyclerView的滑动状态实现的。首先，我们可以通过LayoutManager的findLastVisibleItemPosition获取到RecyclerView的最后一个可见Item的Position，而通过Adapter的getItemCount方法又可以获取RecyclerView的总条目数，通过Position + 1 == Count的结果，即可判断RecyclerView是否已经滑动到了最底部，是的话，就可以做加载更多的操作了。
// 监听RecyclerView滑动状态，如果滑动到最后，实现上拉刷新 rv_news_detail.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); if (newState == RecyclerView.SCROLL_STATE_IDLE && lastVisibleItem + 1 == adapter.getItemCount()) { if (adapter.getItemCount() < 360) { adapter.changeLoadStatus(NewsDetailAdapter.LOADING); page += 10; LogUtils.e("NewsDetailPresenter", getUrl()); mPresenter.loadMoreData(getUrl()); } else { adapter.changeLoadStatus(NewsDetailAdapter.NO_MORE_DATA); } } } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); lastVisibleItem = linearLayoutManager.findLastVisibleItemPosition(); } });
在RecyclerView滑动的时候获取lastVisibleItemPosition，在RecyclerView的滑动状态处于空闲且已经滑动到最底部的时候，做加载数据的操作，同时在此时可以限制RecyclerView的加载条目数，在上面的onScrollStateChanged方法中，我调用Adapte的getItemCount方法获取现在RecyclerView里的条目数，如果其大于等于360条的话，则不做加载更多数据，只提示没有更多数据了。
上面已经实现了上拉加载功能，为了让界面更友好一点，我们可以给RecyclerView添加一个FooterView，用于提示用户做一些操作。
首先准备一个FootView布局：
xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tv_footer" android:layout_width="match_parent" android:layout_height="90dp" android:gravity="center" android:padding="10dp" android:text="上拉刷新..." android:textColor="@android:color/darker_gray" android:textSize="18sp" />
一个TextView，用于显示一些文字，提示用户可以做的操作或应用正在做的操作。
修改Adapter的getItemViewType方法：
@Override public int getItemViewType(int position) { if (headerView == null) { NewsModel currNM = mList.get(position - 1); if (currNM.imgextra == null || currNM.imgextra.size() == 0) return NORMAL; return MULTIIMAGE; } if (position == 0) return HEADER; if (position + 1 == getItemCount()) return FOOTER; NewsModel currNM = mList.get(position - 1); if (currNM.imgextra == null || currNM.imgextra.size() == 0) return NORMAL; return MULTIIMAGE; }
在Adapter中增加一个ViewHolder：
public class ViewHolderFooter extends RecyclerView.ViewHolder { private TextView text; public ViewHolderFooter(View itemView) { super(itemView); text = (TextView) itemView; } }
修改Adapter的onCreateViewHolder方法：
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (headerView != null && viewType == HEADER) return new ViewHolderNormal(headerView); if (viewType == NORMAL) { View view = LayoutInflater.from(mContext).inflate(R.layout.item_news_detail_rv, parent, false); return new ViewHolderNormal(view); } if (viewType == FOOTER) { TextView view = (TextView) LayoutInflater.from(mContext).inflate(R.layout.layout_footer, parent, false); return new ViewHolderFooter(view); } View view = LayoutInflater.from(mContext).inflate(R.layout.item_image_news_detail_rv, parent, false); return new ViewHolderMultiImage(view); }
修改Adapter的onBindViewHolder方法：
@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { if (getItemViewType(position) == HEADER) return; if (getItemViewType(position) == FOOTER) { ViewHolderFooter footerHolder = (ViewHolderFooter) holder; switch (load_status) { case LOAD_MORE: footerHolder.text.setText("上拉加载更多..."); break; case LOADING: footerHolder.text.setText("正在加载更多数据..."); break; case NO_MORE_DATA: footerHolder.text.setText("没有更多数据"); break; } return; } final int pos = getRealPosition(holder); NewsModel currNM = mList.get(pos); switch (getItemViewType(position)) { case NORMAL: ViewHolderNormal normalHolder = (ViewHolderNormal) holder; normalHolder.tv_title.setText(currNM.title); normalHolder.tv_author.setText(currNM.source); normalHolder.tv_zan.setText(currNM.replyCount + "跟帖"); Glide.with(mContext).load(currNM.imgsrc).into(normalHolder.iv_item_news_detail_rv); break; case MULTIIMAGE: ViewHolderMultiImage imageHolder = (ViewHolderMultiImage) holder; imageHolder.tv_title.setText(currNM.title); imageHolder.tv_author.setText(currNM.source); imageHolder.tv_zan.setText(currNM.replyCount + "跟帖"); Glide.with(mContext).load(currNM.imgsrc).into(imageHolder.iv_item_news_detail_rv); if (currNM.imgextra != null && currNM.imgextra.size() > 1) { Glide.with(mContext).load(currNM.imgextra.get(0).imgsrc).into(imageHolder.iv_center); Glide.with(mContext).load(currNM.imgextra.get(1).imgsrc).into(imageHolder.iv_right); } break; } }
看到上面的方法中可以根据不同的状态更改FooterView的文字内容，可以在Adapter中定义一个public方法，用于改变status：
// 改变Footer布局的文字 public void changeLoadStatus(int status) { load_status = status; notifyDataSetChanged(); }
这样，在上拉加载的时候，用户就可以看到对应的提示。正如开头的图片中展示的那样。
完整源码参看： https://github.com/miyuexingchen/Swen/blob/master/app/src/main/java/com/wcc/swen/adapter/NewsDetailAdapter.java