Android项目实战之仿网易新闻的页面（RecyclerView ）

<?xml version="1.0" encoding="utf-8"?>
<linearlayout ...>
 <viewpager ... />

 <android.support.v7.widget.recyclerview .../>

</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="match_parent"
 android:orientation="vertical">

 <android.support.v7.widget.recyclerview
  android:id="@+id/rcv_article_latest"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1" />

</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="match_parent"
 android:orientation="vertical">

 <!--viewpager 热门文章图片展示-->
 <framelayout
  android:layout_width="match_parent"
  android:layout_height="200dp"
  android:background="@color/gray_light">

  <android.support.v4.view.viewpager
   android:id="@+id/vp_hottest"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/colorprimary" />

  <linearlayout
   android:id="@+id/ll_hottest_indicator"
   android:layout_width="wrap_content"
   android:layout_height="20dp"
   android:layout_gravity="bottom|right"
   android:layout_marginbottom="5dp"
   android:layout_marginright="10dp"
   android:layout_margintop="5dp"
   android:gravity="center"
   android:orientation="horizontal" />
 </framelayout>
</linearlayout>

<android.support.v7.widget.cardview
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:fresco="http://schemas.android.com/apk/res-auto"
 android:id="@+id/cv_item"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:cardcornerradius="5dp"
 app:cardelevation="5dp"
 app:contentpadding="2dp">


 <linearlayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">

  <com.facebook.drawee.view.simpledraweeview
   android:id="@+id/rcv_article_photo"
   android:layout_width="100dp"
   android:layout_height="100dp"
   fresco:actualimagescaletype="centerinside"
   fresco:roundascircle="true"
   fresco:roundingbordercolor="@color/lightslategray"
   fresco:roundingborderwidth="1dp" />


  <linearlayout
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:orientation="vertical">

   <textview
    android:id="@+id/rcv_article_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginleft="10dp"
    android:layout_margintop="2dp"
    android:gravity="center"
    android:text="关于举办《经典音乐作品欣赏与人文审美》讲座的通知"
    android:textcolor="@color/primary_text" />
   <!-- 新闻 发布时间 来源 阅读次数-->
   <linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margintop="5dp"
    android:gravity="center"
    android:orientation="horizontal">

    <textview
     android:id="@+id/rcv_article_date"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginleft="10dp"
     android:layout_marginright="2dp"
     android:text="2015-01-09" />

    <textview
     android:id="@+id/rcv_article_source"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginleft="2dp"
     android:layout_marginright="2dp"
     android:text="科学研究院" />

    <textview
     android:id="@+id/rcv_article_readtimes"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginleft="2dp"
     android:layout_marginright="2dp"
     android:text="1129次" />

   </linearlayout>


   <textview
    android:id="@+id/rcv_article_preview"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginleft="10dp"
    android:layout_margintop="5dp"
    android:ellipsize="end"
    android:maxlines="2"
    android:text="讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识..." />

  </linearlayout>
 </linearlayout>

</android.support.v7.widget.cardview>

/**
 * 新闻列表的适配器
 * 01-14 头部是 viewpager，下面是列表新闻
 * created by tomchen on 1/11/16.
 */
public class articleadapter extends recyclerview.adapter<recyclerview.viewholder> {

 private static final int type_header = 0;
 private static final int type_item = 1;

 //头部固定为 张图片
 private static final int num_image = 4;

 //handler 用到的参数值
 private static final int uptate_viewpager = 0;

 //新闻列表
 private list<itemarticle> articlelist;

 //设置当前 第几个图片 被选中
 private int currentindex = 0;

 //context
 private context context;

 private layoutinflater mlayoutinflater;

 private imageview[] mcircleimages;//底部只是当前页面的小圆点


 public articleadapter(context context, list<itemarticle> articlelist) {
  this.context = context;

  //头部viewpager图片固定是7张，剩下的是列表的数据
  this.articlelist = articlelist;
  mlayoutinflater = layoutinflater.from(context);
 }

 @override
 public recyclerview.viewholder oncreateviewholder(viewgroup parent, int viewtype) {
  //理论上应该把最可能返回的 type 放在前面
  view view = null;

  if (viewtype == type_item) {
   view = mlayoutinflater.inflate(
     r.layout.viewholder_article_item, parent, false);
   return new itemarticleviewholder(view);
  }
  //头部返回 viewpager 实现的轮播图片
  if (viewtype == type_header) {
   view = mlayoutinflater.inflate(
     r.layout.viewholder_article_header, parent, false);
   return new headerarticleviewholder(view);
  }

  return null;
//  //可以抛出异常，没有对应的view类型
//  throw new runtimeexception("there is no type that matches the type " + viewtype + " + make sure your using types correctly");

 }

 @override
 public void onbindviewholder(recyclerview.viewholder holder, int position) {
  if (holder instanceof itemarticleviewholder) {
   //转型
   itemarticleviewholder newholder = (itemarticleviewholder) holder;
   //注意recyclerview第0项是 viewpager 占据了0 1 2 3图片
   //那么下面的列表展示是 recyclerview 的第1项，从第4项开始
   itemarticle article = articlelist.get(position + num_image - 1);
   newholder.rcvarticlephoto.setimageuri(uri.parse(article.getimageurl()));
   newholder.rcvarticletitle.settext(article.gettitle());
   newholder.rcvarticledate.settext(article.getpublishdate());
   newholder.rcvarticlesource.settext(article.getsource());
   //注意这个阅读次数是 int 类型，需要转化为 string 类型
   newholder.rcvarticlereadtimes.settext(article.getreadtimes() + "次");
   newholder.rcvarticlepreview.settext(article.getpreview());
  } else if (holder instanceof headerarticleviewholder) {
   headerarticleviewholder newholder = (headerarticleviewholder) holder;

   list<itemarticle> headers = articlelist.sublist(0, num_image );
   headerimageadapter imageadapter = new headerimageadapter(context, headers);

   setupviewpager(newholder.vphottest, newholder.llhottestindicator, headers);

  }
 }


 private void setupviewpager(final viewpager vp, linearlayout llbottom, final list<itemarticle> headerarticles) {
  headerimageadapter imageadapter = new headerimageadapter(context, headerarticles);
  //??这儿有些疑惑，adapter 里面嵌套设置 adapter 是否优雅？
  vp.setadapter(imageadapter);

  final handler mhandler = new handler() {
   public void handlemessage(message msg) {
    switch (msg.what) {
     case uptate_viewpager:
      if (msg.arg1 != 0) {
       vp.setcurrentitem(msg.arg1);
      } else {
       //false 当从末页调到首页是，不显示翻页动画效果，
       vp.setcurrentitem(msg.arg1, false);
      }
      break;
    }
   }
  };

  //下面是设置动画切换的样式
  vp.setpagetransformer(true, new rotateuptransformer());

  //创建底部指示位置的导航栏
  final imageview[] mcircleimages = new imageview[headerarticles.size()];

  for (int i = 0; i < mcircleimages.length; i++) {
   imageview imageview = new imageview(context);
   linearlayout.layoutparams params = new linearlayout.layoutparams(10, 10);
   params.setmargins(5, 0, 5, 0);
   imageview.setlayoutparams(params);
   if (i == 0) {
    imageview.setbackgroundresource(r.drawable.indicator_select);
   } else {
    imageview.setbackgroundresource(r.drawable.indicator_not_select);
   }

   mcircleimages[i] = imageview;
   //把指示作用的原点图片加入底部的视图中
   llbottom.addview(mcircleimages[i]);

  }

  vp.addonpagechangelistener(new viewpager.onpagechangelistener() {
   //图片左右滑动时候，将当前页的圆点图片设为选中状态
   @override
   public void onpageselected(int position) {
    // 一定几个图片，几个圆点，但注意是从0开始的
    int total = mcircleimages.length;
    for (int j = 0; j < total; j++) {
     if (j == position) {
      mcircleimages[j].setbackgroundresource(r.drawable.indicator_select);
     } else {
      mcircleimages[j].setbackgroundresource(r.drawable.indicator_not_select);
     }
    }

    //设置全局变量，currentindex为选中图标的 index
    currentindex = position;
   }

   @override
   public void onpagescrolled(int i, float v, int i1) {

   }

   @override
   public void onpagescrollstatechanged(int state) {

    //实现切换到末尾后返回到第一张
    switch (state) {
     // 手势滑动
     case viewpager.scroll_state_dragging:
      break;

     // 界面切换中
     case viewpager.scroll_state_settling:
      break;

     case viewpager.scroll_state_idle:// 滑动结束，即切换完毕或者加载完毕
      // 当前为最后一张，此时从右向左滑，则切换到第一张
      if (vp.getcurrentitem() == vp.getadapter()
        .getcount() - 1) {
       vp.setcurrentitem(0, false);
      }
      // 当前为第一张，此时从左向右滑，则切换到最后一张
      else if (vp.getcurrentitem() == 0) {
       vp.setcurrentitem(vp.getadapter()
         .getcount() - 1, false);
      }
      break;

     default:
      break;
    }
   }
  });


  //设置自动轮播图片，5s后执行，周期是5s

  timer timer = new timer();
  timer.schedule(new timertask() {
   @override
   public void run() {
    message message = new message();
    message.what = uptate_viewpager;
    if (currentindex == headerarticles.size() - 1) {
     currentindex = -1;
    }
    message.arg1 = currentindex + 1;
    mhandler.sendmessage(message);
   }
  }, 6000, 6000);
 }

 @override
 public int getitemcount() {
  //因为多了一个头部，所以是+1,但是头部 viewpager 占了7个
  //所以实际是少了6个
  return articlelist.size() + 1 - num_image;
 }

 @override
 public int getitemviewtype(int position) {
  if (position == 0)
   return type_header;
  else
   return type_item;
 }


 class headerarticleviewholder extends recyclerview.viewholder {

  //轮播的最热新闻图片
  @injectview(r.id.vp_hottest)
  viewpager vphottest;
  //轮播图片下面的小圆点
  @injectview(r.id.ll_hottest_indicator)
  linearlayout llhottestindicator;

  //学院广播信息
  @injectview(r.id.tv_college_broadcast)
  textview tvcollegebroadcast;

  public headerarticleviewholder(view itemview) {
   super(itemview);
   butterknife.inject(this, itemview);
  }
 }

 class itemarticleviewholder extends recyclerview.viewholder {

  @injectview(r.id.rcv_article_photo)
  simpledraweeview rcvarticlephoto;
  @injectview(r.id.rcv_article_title)
  textview rcvarticletitle;
  @injectview(r.id.rcv_article_date)
  textview rcvarticledate;
  @injectview(r.id.rcv_article_source)
  textview rcvarticlesource;
  @injectview(r.id.rcv_article_readtimes)
  textview rcvarticlereadtimes;
  @injectview(r.id.rcv_article_preview)
  textview rcvarticlepreview;

  public itemarticleviewholder(view itemview) {
   super(itemview);
   butterknife.inject(this, itemview);
  }
 }


}