Android项目实战之仿网易新闻的页面(RecyclerView )

这篇文章主要介绍了Android项目实战之仿网易新闻的页面,ViewPager作为RecyclerView的Header,感兴趣的小伙伴们可以参考一下

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

错误方法

   

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

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

方法有两种

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

总xml布局

   

很简单,一个RecyclerView就行了

头部 ViewPager 的viewholder_article_header.xml布局

    

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

新闻项 viewholder_article_item.xml 布局

    

这篇文章 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 { 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 articleList; //设置当前 第几个图片 被选中 private int currentIndex = 0; //context private Context context; private LayoutInflater mLayoutInflater; private ImageView[] mCircleImages;//底部只是当前页面的小圆点 public ArticleAdapter(Context context, List 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 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 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 

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,大家可以进行研究。

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

以上就是Android项目实战之仿网易新闻的页面(RecyclerView )的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动