用RecyclerView实现新闻列表页,包括头部的图片轮播,两种Item显示方式,下拉刷新和上拉加载以及限制列表的加载条目数

来源:互联网 发布:中序遍历非递归算法 编辑:程序博客网 时间:2024/06/03 17:31
效果图:
 

1、实现列表头部的图片轮播,方式:给RecyclerView添加HeaderView。

    RecyclerView默认是没有添加HeaderView方法的,所以我从网上找到了一种从外部添加View的方式加以实现。
    要给RecyclerView添加HeaderView,首先要准备一个View:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <com.jude.rollviewpager.RollPagerView xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/rpv_news_detail"
  5. android:layout_width="match_parent"
  6. android:layout_height="180dp"
  7. app:rollviewpager_play_delay="3000" />
这是一个开源的图片轮播控件,可以实现图片的循环轮播。在github上可以找到。用法可以到这里看说明。本节只是说明怎样给RecyclerView添加HeaderView。
HeaderView已经有了,接着要在RecyclerView的Adapter定义一个方法:
  1. // headerView的setter
  2. public void setHeaderView(View headerView) {
  3. this.headerView = headerView;
  4. notifyItemInserted(0);
  5. }
上面的方法接收一个View参数,赋值给Adapter的成员变量headerView,然后调用notify方法通知RecyclerView在0号位置添加了一个Item。这样就可以达到添加HeaderView的效果。
此方法的调用时机实在给RecyclerView设置Adapter之前,也就是在调用setAdapter方法之前。
到这里并没有结束,我们还要继续在Adapter类里操作。首先,现在在RecyclerView里已经不止一种类型的View,所以我们要复写getItemViewType(int position)方法,在里面进行View的区分。
  1. @Override
  2. public int getItemViewType(int position) {
  3. if (headerView == null) return NORMAL;
  4.        if (position == 0) return HEADER;
  5. return NORMAL;
  6. }
上面的方法很好理解,如果headerView为空则返回普通View,如果在位置0处,则返回Header,其他情况都返回普通View,其中的NORMAL和HEADER是两个自定义的整型常量,用于区分View,可以是任意不同的整型值。
接着,在onCreateViewHolder方法中通过viewTyper的判断,做不同的操作。
  1. @Override
  2. public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  3. if (headerView != null && viewType == HEADER)
  4. return new ViewHolder(headerView);
  5. View view = LayoutInflater.from(mContext).inflate(R.layout.item_news_detail_rv, parent, false);
  6. return new ViewHolder(view);
  7. }
  8. }
如果是HEADER,则将headerView传进去,否则,正常的View传进去。ViewHolder:    
  1. public class ViewHolder extends RecyclerView.ViewHolder {
  2. private ImageView iv_item_news_detail_rv;
  3. private TextView tv_title;
  4. private TextView tv_author;
  5. private TextView tv_zan;
  6. public ViewHolder(View itemView) {
  7. super(itemView);
  8. if (itemView == headerView) return;
  9. iv_item_news_detail_rv = (ImageView) itemView.findViewById(R.id.iv_item_news_detail_rv);
  10. tv_title = (TextView) itemView.findViewById(R.id.tv_title_news_detail);
  11. tv_author = (TextView) itemView.findViewById(R.id.tv_author_news_detail);
  12. tv_zan = (TextView) itemView.findViewById(R.id.tv_zan_news_detail);
  13. }
  14. }
可以看到在ViewHolder的构造函数里,判断itemView的种类,如果是headerView,则直接返回,如果不是,则获取普通布局里控件的引用。
最后,在onBindViewHolder中:
  1. @Override
  2. public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
  3. if (getItemViewType(position) == HEADER)
  4. return;
  5. final int pos = getRealPosition(holder);
  6. NewsModel currNM = mList.get(pos);
  7. ViewHolderNormal normalHolder = (ViewHolderNormal) holder;
  8. normalHolder.tv_title.setText(currNM.title);
  9. normalHolder.tv_author.setText(currNM.source);
  10. normalHolder.tv_zan.setText(currNM.replyCount + "跟帖");
  11.         Glide.with(mContext).load(currNM.imgsrc ).into(normalHolder.iv_item_news_detail_rv);
  12. }
如果是HEADER,则直接返回,如果不是,则填充数据。其中有一句
  1. final int pos = getRealPosition(holder);
因为添加了一个headerView,其他的Item的position都往后移了以为,所以要进行动态计算:
  1. private int getRealPosition(RecyclerView.ViewHolder holder) {
  2. int position = holder.getLayoutPosition();
  3. return headerView == null ? position : position - 1;
  4. }
至此,就完成了对RecyclerView的HeaderView的添加。

2、在添加HeaderView的基础上,实现RecyclerView加载两种不同布局的Item。

先准备好两种布局:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="110dp"
  5. android:orientation="horizontal">
  6. <ImageView
  7. android:id="@+id/iv_item_news_detail_rv"
  8. android:layout_width="120dp"
  9. android:layout_height="110dp"
  10. android:layout_marginLeft="10dp"
  11. android:src="@mipmap/i1" />
  12. <RelativeLayout
  13. android:layout_width="0dp"
  14. android:layout_height="match_parent"
  15. android:layout_weight="1">
  16. <TextView
  17. android:id="@+id/tv_title_news_detail"
  18. android:layout_width="match_parent"
  19. android:layout_height="80dp"
  20. android:layout_marginLeft="3dp"
  21. android:lineSpacingExtra="10dp"
  22. android:lines="2"
  23. android:paddingLeft="5dp"
  24. android:paddingTop="10dp"
  25. android:text="Snapshots of the development version are available in Sonatype's snapshots repository."
  26. android:textColor="@android:color/black"
  27. android:textSize="18sp" />
  28. <TextView
  29. android:id="@+id/tv_author_news_detail"
  30. android:layout_width="wrap_content"
  31. android:layout_height="30dp"
  32. android:layout_below="@+id/tv_title_news_detail"
  33. android:layout_marginLeft="3dp"
  34. android:paddingLeft="5dp"
  35. android:text="New Text"
  36. android:textColor="@android:color/darker_gray"
  37. android:textSize="15sp" />
  38. <TextView
  39. android:id="@+id/tv_zan_news_detail"
  40. android:layout_width="match_parent"
  41. android:layout_height="30dp"
  42. android:layout_below="@+id/tv_title_news_detail"
  43. android:layout_marginLeft="3dp"
  44. android:layout_toRightOf="@+id/tv_author_news_detail"
  45. android:gravity="right"
  46. android:paddingLeft="5dp"
  47. android:text="New Text"
  48. android:textColor="@android:color/darker_gray"
  49. android:textSize="15sp" />
  50. </RelativeLayout>
  51. </LinearLayout>
效果图:
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="180dp"
  5. android:orientation="vertical">
  6. <TextView
  7. android:id="@+id/tv_title_item_image"
  8. android:layout_width="match_parent"
  9. android:layout_height="40dp"
  10. android:padding="10dp"
  11. android:text="标题"
  12. android:textColor="@android:color/black"
  13. android:textSize="17sp" />
  14. <LinearLayout
  15. android:layout_width="match_parent"
  16. android:layout_height="110dp">
  17. <ImageView
  18. android:id="@+id/iv_left_item_image"
  19. android:layout_width="0dp"
  20. android:layout_height="match_parent"
  21. android:layout_marginLeft="10dp"
  22. android:layout_weight="1"
  23. android:src="@mipmap/i1" />
  24. <ImageView
  25. android:id="@+id/iv_center_item_image"
  26. android:layout_width="0dp"
  27. android:layout_height="match_parent"
  28. android:layout_marginLeft="10dp"
  29. android:layout_marginRight="10dp"
  30. android:layout_weight="1"
  31. android:src="@mipmap/i1" />
  32. <ImageView
  33. android:id="@+id/iv_right_item_image"
  34. android:layout_width="0dp"
  35. android:layout_height="match_parent"
  36. android:layout_marginRight="10dp"
  37. android:layout_weight="1"
  38. android:src="@mipmap/i1" />
  39. </LinearLayout>
  40. <LinearLayout
  41. android:layout_width="match_parent"
  42. android:layout_height="30dp">
  43. <TextView
  44. android:id="@+id/tv_source_item_image"
  45. android:layout_width="wrap_content"
  46. android:layout_height="30dp"
  47. android:paddingLeft="10dp"
  48. android:text="要闻"
  49. android:textColor="@android:color/darker_gray"
  50. android:textSize="16sp" />
  51. <TextView
  52. android:id="@+id/tv_reply_item_image"
  53. android:layout_width="match_parent"
  54. android:layout_height="30dp"
  55. android:gravity="right"
  56. android:paddingRight="10dp"
  57. android:text="跟帖"
  58. android:textColor="@android:color/darker_gray"
  59. android:textSize="16sp" />
  60. </LinearLayout>
  61. </LinearLayout>
效果图:

 在Adapter创建两个对应的ViewHolder类:
  1. public class ViewHolderNormal extends RecyclerView.ViewHolder {
  2. private ImageView iv_item_news_detail_rv;
  3. private TextView tv_title;
  4. private TextView tv_author;
  5. private TextView tv_zan;
  6. public ViewHolderNormal(View itemView) {
  7. super(itemView);
  8. if (itemView == headerView) return;
  9. iv_item_news_detail_rv = (ImageView) itemView.findViewById(R.id.iv_item_news_detail_rv);
  10. tv_title = (TextView) itemView.findViewById(R.id.tv_title_news_detail);
  11. tv_author = (TextView) itemView.findViewById(R.id.tv_author_news_detail);
  12. tv_zan = (TextView) itemView.findViewById(R.id.tv_zan_news_detail);
  13. }
  14. }
  15. public class ViewHolderMultiImage extends RecyclerView.ViewHolder {
  16. private ImageView iv_center;
  17. private ImageView iv_right;
  18. private ImageView iv_item_news_detail_rv;
  19. private TextView tv_title;
  20. private TextView tv_author;
  21. private TextView tv_zan;
  22. public ViewHolderMultiImage(View itemView) {
  23. super(itemView);
  24. iv_item_news_detail_rv = (ImageView) itemView.findViewById(R.id.iv_left_item_image);
  25. iv_center = (ImageView) itemView.findViewById(R.id.iv_center_item_image);
  26. iv_right = (ImageView) itemView.findViewById(R.id.iv_right_item_image);
  27. tv_title = (TextView) itemView.findViewById(R.id.tv_title_item_image);
  28. tv_author = (TextView) itemView.findViewById(R.id.tv_source_item_image);
  29. tv_zan = (TextView) itemView.findViewById(R.id.tv_reply_item_image);
  30. }
  31. }
现在由于是三种ViewType,所以修改getItemViewType:
  1. @Override
  2. public int getItemViewType(int position) {
  3. if (headerView == null) {
  4. NewsModel currNM = mList.get(position - 1);
  5. if (currNM.imgextra == null || currNM.imgextra.size() == 0)
  6. return NORMAL;
  7. return MULTIIMAGE;
  8. }
  9. if (position == 0) return HEADER;
  10. NewsModel currNM = mList.get(position - 1);
  11. if (currNM.imgextra == null || currNM.imgextra.size() == 0)
  12. return NORMAL;
  13. return MULTIIMAGE;
  14. }
在不是headerView的情况下,根据所获取的新闻是图片新闻还是普通新闻,返回对应的ViewType。
在onCreateViewHolder也要增加一些判断:
  1. @Override
  2. public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  3. if (headerView != null && viewType == HEADER)
  4. return new ViewHolderNormal(headerView);
  5. if (viewType == NORMAL) {
  6. View view = LayoutInflater.from(mContext).inflate(R.layout.item_news_detail_rv, parent, false);
  7. return new ViewHolderNormal(view);
  8. }
  9. View view = LayoutInflater.from(mContext).inflate(R.layout.item_image_news_detail_rv, parent, false);
  10. return new ViewHolderMultiImage(view);
  11. }
最后在onBindViewHolder中:
  1. @Override
  2. public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
  3. if (getItemViewType(position) == HEADER)
  4. return;
  5. final int pos = getRealPosition(holder);
  6. NewsModel currNM = mList.get(pos);
  7. switch (getItemViewType(position)) {
  8. case NORMAL:
  9. ViewHolderNormal normalHolder = (ViewHolderNormal) holder;
  10. normalHolder.tv_title.setText(currNM.title);
  11. normalHolder.tv_author.setText(currNM.source);
  12. normalHolder.tv_zan.setText(currNM.replyCount + "跟帖");
  13. Glide.with(mContext).load(currNM.imgsrc).into(normalHolder.iv_item_news_detail_rv);
  14. break;
  15. case MULTIIMAGE:
  16. ViewHolderMultiImage imageHolder = (ViewHolderMultiImage) holder;
  17. imageHolder.tv_title.setText(currNM.title);
  18. imageHolder.tv_author.setText(currNM.source);
  19. imageHolder.tv_zan.setText(currNM.replyCount + "跟帖");
  20. Glide.with(mContext).load(currNM.imgsrc).into(imageHolder.iv_item_news_detail_rv);
  21. if (currNM.imgextra != null && currNM.imgextra.size() > 1) {
  22. Glide.with(mContext).load(currNM.imgextra.get(0).imgsrc).into(imageHolder.iv_center);
  23. Glide.with(mContext).load(currNM.imgextra.get(1).imgsrc).into(imageHolder.iv_right);
  24. }
  25. break;
  26. }
  27. }
代码都很简单。这样就实现了RecyclerView加载两种不同ViewType的Item。

3、实现下拉刷新。

这里我用的是android的v4包里的SwipeRefreshLayout。首先布局文件中,让SwipeRefreshLayout包裹RecyclerView:
  1. <android.support.v4.widget.SwipeRefreshLayout
  2. android:id="@+id/srl_news_detail"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:scrollbars="vertical"
  6. android:visibility="gone">
  7. <android.support.v7.widget.RecyclerView
  8. android:id="@+id/rv_news_detail"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:visibility="gone" />
  12. </android.support.v4.widget.SwipeRefreshLayout>
接着在页面中获取SwipeRefreshLayout的引用,并给其设置一些参数,如刷新进度条的颜色、背景颜色、位置:
  1. // 背景颜色
  2. srl_news_detail.setProgressBackgroundColorSchemeResource(android.R.color.white);
  3. // 进度条变换颜色
  4. srl_news_detail.setColorSchemeResources(android.R.color.holo_blue_light,
  5. android.R.color.holo_red_light, android.R.color.holo_orange_light,
  6. android.R.color.holo_green_light);
  7. // 进度条显示位置
  8. srl_news_detail.setProgressViewOffset(false, 0, (int) TypedValue
  9. .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24, getResources()
  10. .getDisplayMetrics()));
最后给SwipeRefreshLayout设置onRefreshListener:
  1. srl_news_detail.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
  2. @Override
  3. public void onRefresh() {
  4. page = 0;
  5. mPresenter.loadRefreshData(getUrl());
  6. }
  7. });
其中的
  1. mPresenter.loadRefreshData(getUrl());
就是做的加载数据并更新页面的操作。

4、实现上拉加载数据以及限制列表的加载条目数。

实现上拉加载是通过监听RecyclerView的滑动状态实现的。首先,我们可以通过LayoutManager的findLastVisibleItemPosition获取到RecyclerView的最后一个可见Item的Position,而通过Adapter的getItemCount方法又可以获取RecyclerView的总条目数,通过Position + 1 == Count的结果,即可判断RecyclerView是否已经滑动到了最底部,是的话,就可以做加载更多的操作了。
  1. // 监听RecyclerView滑动状态,如果滑动到最后,实现上拉刷新
  2. rv_news_detail.addOnScrollListener(new RecyclerView.OnScrollListener() {
  3. @Override
  4. public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
  5. super.onScrollStateChanged(recyclerView, newState);
  6. if (newState == RecyclerView.SCROLL_STATE_IDLE && lastVisibleItem + 1 == adapter.getItemCount()) {
  7. if (adapter.getItemCount() < 360) {
  8. adapter.changeLoadStatus(NewsDetailAdapter.LOADING);
  9. page += 10;
  10. LogUtils.e("NewsDetailPresenter", getUrl());
  11. mPresenter.loadMoreData(getUrl());
  12. } else {
  13. adapter.changeLoadStatus(NewsDetailAdapter.NO_MORE_DATA);
  14. }
  15. }
  16. }
  17. @Override
  18. public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
  19. super.onScrolled(recyclerView, dx, dy);
  20. lastVisibleItem = linearLayoutManager.findLastVisibleItemPosition();
  21. }
  22. });
在RecyclerView滑动的时候获取lastVisibleItemPosition,在RecyclerView的滑动状态处于空闲且已经滑动到最底部的时候,做加载数据的操作,同时在此时可以限制RecyclerView的加载条目数,在上面的onScrollStateChanged方法中,我调用Adapte的getItemCount方法获取现在RecyclerView里的条目数,如果其大于等于360条的话,则不做加载更多数据,只提示没有更多数据了。
上面已经实现了上拉加载功能,为了让界面更友好一点,我们可以给RecyclerView添加一个FooterView,用于提示用户做一些操作。
首先准备一个FootView布局:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/tv_footer"
  4. android:layout_width="match_parent"
  5. android:layout_height="90dp"
  6. android:gravity="center"
  7. android:padding="10dp"
  8. android:text="上拉刷新..."
  9. android:textColor="@android:color/darker_gray"
  10. android:textSize="18sp" />
一个TextView,用于显示一些文字,提示用户可以做的操作或应用正在做的操作。
修改Adapter的getItemViewType方法:
  1. @Override
  2. public int getItemViewType(int position) {
  3. if (headerView == null) {
  4. NewsModel currNM = mList.get(position - 1);
  5. if (currNM.imgextra == null || currNM.imgextra.size() == 0)
  6. return NORMAL;
  7. return MULTIIMAGE;
  8. }
  9. if (position == 0) return HEADER;
  10. if (position + 1 == getItemCount()) return FOOTER;
  11. NewsModel currNM = mList.get(position - 1);
  12. if (currNM.imgextra == null || currNM.imgextra.size() == 0)
  13. return NORMAL;
  14. return MULTIIMAGE;
  15. }
在Adapter中增加一个ViewHolder:
  1. public class ViewHolderFooter extends RecyclerView.ViewHolder {
  2. private TextView text;
  3. public ViewHolderFooter(View itemView) {
  4. super(itemView);
  5. text = (TextView) itemView;
  6. }
  7. }
修改Adapter的onCreateViewHolder方法:
  1. @Override
  2. public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  3. if (headerView != null && viewType == HEADER)
  4. return new ViewHolderNormal(headerView);
  5. if (viewType == NORMAL) {
  6. View view = LayoutInflater.from(mContext).inflate(R.layout.item_news_detail_rv, parent, false);
  7. return new ViewHolderNormal(view);
  8. }
  9. if (viewType == FOOTER) {
  10. TextView view = (TextView) LayoutInflater.from(mContext).inflate(R.layout.layout_footer, parent, false);
  11. return new ViewHolderFooter(view);
  12. }
  13. View view = LayoutInflater.from(mContext).inflate(R.layout.item_image_news_detail_rv, parent, false);
  14. return new ViewHolderMultiImage(view);
  15. }
修改Adapter的onBindViewHolder方法:
  1. @Override
  2. public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
  3. if (getItemViewType(position) == HEADER)
  4. return;
  5. if (getItemViewType(position) == FOOTER) {
  6. ViewHolderFooter footerHolder = (ViewHolderFooter) holder;
  7. switch (load_status) {
  8. case LOAD_MORE:
  9. footerHolder.text.setText("上拉加载更多...");
  10. break;
  11. case LOADING:
  12. footerHolder.text.setText("正在加载更多数据...");
  13. break;
  14. case NO_MORE_DATA:
  15. footerHolder.text.setText("没有更多数据");
  16. break;
  17. }
  18. return;
  19. }
  20. final int pos = getRealPosition(holder);
  21. NewsModel currNM = mList.get(pos);
  22. switch (getItemViewType(position)) {
  23. case NORMAL:
  24. ViewHolderNormal normalHolder = (ViewHolderNormal) holder;
  25. normalHolder.tv_title.setText(currNM.title);
  26. normalHolder.tv_author.setText(currNM.source);
  27. normalHolder.tv_zan.setText(currNM.replyCount + "跟帖");
  28. Glide.with(mContext).load(currNM.imgsrc).into(normalHolder.iv_item_news_detail_rv);
  29. break;
  30. case MULTIIMAGE:
  31. ViewHolderMultiImage imageHolder = (ViewHolderMultiImage) holder;
  32. imageHolder.tv_title.setText(currNM.title);
  33. imageHolder.tv_author.setText(currNM.source);
  34. imageHolder.tv_zan.setText(currNM.replyCount + "跟帖");
  35. Glide.with(mContext).load(currNM.imgsrc).into(imageHolder.iv_item_news_detail_rv);
  36. if (currNM.imgextra != null && currNM.imgextra.size() > 1) {
  37. Glide.with(mContext).load(currNM.imgextra.get(0).imgsrc).into(imageHolder.iv_center);
  38. Glide.with(mContext).load(currNM.imgextra.get(1).imgsrc).into(imageHolder.iv_right);
  39. }
  40. break;
  41. }
  42. }
看到上面的方法中可以根据不同的状态更改FooterView的文字内容,可以在Adapter中定义一个public方法,用于改变status:
  1. // 改变Footer布局的文字
  2. public void changeLoadStatus(int status) {
  3. load_status = status;
  4. notifyDataSetChanged();
  5. }
这样,在上拉加载的时候,用户就可以看到对应的提示。正如开头的图片中展示的那样。

完整源码参看:https://github.com/miyuexingchen/Swen/blob/master/app/src/main/java/com/wcc/swen/adapter/NewsDetailAdapter.java
0 0
原创粉丝点击