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

前端技术 2023/09/06 Android

本文实例实现一个仿网易新闻的页面，上面是轮播的图片，下面是 RecyclerView 显示新闻列表，具体内容如下

错误方法

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<LinearLayout ...>
 <ViewPager ... />

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

</LinearLayout>

这样布局 ViewPager 在 RecyclerView 的上面，如果不做特殊处理，当下滑 RecyclerView 加载更多内容的时候，ViewPager会固定不动。

正确的效果是下滑加载更多的时候，ViewPager 会滑出页面，释放空间供其他内容展示。
一、解决思路

方法有两种

  • ViewPager作为 RecyclerView 的第0项，也就是 Header（本文采用该方法）
  • 利用ScrollView，重写一些方法解决滑动冲突

总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: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>

很简单，一个RecyclerView就行了

头部 ViewPager 的viewholder_article_header.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: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>

FrameLayout里面的ViewPager和LinearLayout是覆盖显示的，实现在图片的下方有个小圆点标记滑动到了第一张图片。

新闻项 viewholder_article_item.xml 布局

<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>

这篇文章 Android Material Design学习之RecyclerView代替 ListView sscc实现了不加 ViewPager，利用 RecyclerView 展示新闻列表的功能。

RecyclerView 的适配器

/**
 * 新闻列表的适配器
 * 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);
  }
 }


}

ItemArticleViewHolder是列表展示的新闻项的 ViewHolder，对应了上面的 viewholder_article_item.xml。

HeaderArticleViewHolder 是头部 ViewPager 的 ViewHolder, 对应viewholder_article_header.xml

Note

  • 本文上面的 ViewPager 轮播4幅图片，所以getItemCount()需要复写
  • List headers = articleList.subList(0, NUM_IMAGE );得到头部图片的数据
  • ItemArticle article = articleList.get(position + NUM_IMAGE - 1);得到下面新闻项的数据
  • getItemViewType(int position)根据position判断是不是头部ViewPager
  • onCreateViewHolder(ViewGroup parent, int viewType)根据viewType生成头部图片或者下面新闻项的ViewHolder

二、疑惑及后续计划

除了将 ViewPager 作为 RecyclerView 第一项，还有一张方法就是利用ScrollView，大家可以进行研究。

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/17214

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案