Android RecyclerView实现多种item布局的方法

 更新时间:2017年12月06日 09:38:45   转载 作者:xiyouZmt  
本篇文章主要介绍了Android RecyclerView实现多种item布局的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在项目中列表是基本都会用到的,然而在显示列表时,我们需要的数据可能需要不止一种item显示,对于复杂的数据就需要多种item,以不同的样式显示出来,这样效果是很棒的,我们先看一下效果

我们可以看到,这个RecyclerView中有多种item显示出来,那么具体怎么实现呢,其实在RecyclerView中,我们可以重写方法getItemViewType(),这个方法会传进一个参数position表示当前是第几个Item,然后我们可以通过position拿到当前的Item对象,然后判断这个item对象需要那种视图,返回一个int类型的视图标志,然后在onCreatViewHolder方法中给引入布局,这样就能够实现多种item显示了,讲了这么多我们看一下具体的例子

@Override 
public int getItemViewType(int position) { 
  if(list.size() == 0){ 
    return EMPTY_VIEW; 
  } else if(list.get(position) == null){ 
    return PROGRESS_VIEW; 
  } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){ 
    return IMAGE_VIEW; 
  } else { 
    return super.getItemViewType(position); 
  } 
} 

首先我们重写了getItemViewType这个方法,在这个方法中根据position对item对象做了一些判断,如果存储item对象的集合大小为空,返回空view标识(这里为1),如果item对象为null,返回进度条标识,这个主要是用于实现下拉加载更多,如果item对象类型属于图片类型,就返回图片类型对应的Item,这个就是效果图中的第一个Item类型,否则就是其它类型,也就是效果图中的另一种item布局,然后我们在onCreatViewHolder中具体的为每一种类型引入其布局

@Override 
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
  View view; 
  if(viewType == PROGRESS_VIEW){ 
    view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false); 
    return new ProgressViewHolder(view); 
  } else if(viewType == EMPTY_VIEW){ 
    return null; 
  } else if(viewType == IMAGE_VIEW){ 
    view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false); 
    return new ImageViewHolder(view); 
  } else { 
    view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false); 
    return new NewsViewHolder(view); 
  } 
} 

上面的代码就是具体为每种viewType引入其对应的布局,这样就基本实现了多种item布局,但是仅仅是这些还不够,因为我们还要对每种item设置数据,所以还要对每种item写一个VIewHolder来为item显示数据

class NewsViewHolder extends RecyclerView.ViewHolder{  
  @BindView(R.id.news_title)TextView title; 
  @BindView(R.id.news_digest)TextView digest; 
  @BindView(R.id.news_time)TextView time; 
  @BindView(R.id.news_src)ImageView image;  
  public NewsViewHolder(View itemView) { 
    super(itemView); 
    ButterKnife.bind(this, itemView); 
  } 
} 
 
class ImageViewHolder extends RecyclerView.ViewHolder{  
  @BindView(R.id.news_title) TextView title; 
  @BindView(R.id.image_left) ImageView imageLeft; 
  @BindView(R.id.image_right) ImageView imageRight; 
  @BindView(R.id.image_middle) ImageView imageMiddle; 
  @BindView(R.id.news_time) TextView time;  
  public ImageViewHolder(View itemView) { 
    super(itemView); 
    ButterKnife.bind(this, itemView); 
  } 
} 
 
class ProgressViewHolder extends RecyclerView.ViewHolder {  
  @BindView(R.id.progressBar) ProgressBar progressBar; 
  @BindView(R.id.textView) TextView textView;  
  public ProgressViewHolder(View itemView) { 
    super(itemView); 
    ButterKnife.bind(this, itemView); 
  } 
} 

上面就是item对应的几个ViewHolder,判断viewHolder属于那种对象,然后在onBindViewHolder中根据对应的ViewHolder对其控件设置数据并显示

@Override 
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { 
  holder.itemView.setOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View v) { 
      clickListener.onItemClick(v, position); 
    } 
  }); 
  if(holder instanceof NewsViewHolder){ 
    NewsViewHolder viewHolder = (NewsViewHolder)holder; 
    viewHolder.title.setText(list.get(position).getTitle()); 
    viewHolder.time.setText(list.get(position).getTime()); 
    /** 
     * Glide加载图片 
     */ 
    Glide.with(context).load(list.get(position).getImageUrl().get(0)) 
        .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image); 
    if(list.get(position).getType().equals(News.TEXT_NEWS)){ 
      viewHolder.digest.setText(list.get(position).getDigest()); 
    } else { 
      viewHolder.digest.setText(""); 
    } 
  } else if(holder instanceof ImageViewHolder){ 
    ImageViewHolder viewHolder = (ImageViewHolder)holder; 
    viewHolder.title.setText(list.get(position).getTitle()); 
    viewHolder.time.setText(list.get(position).getTime()); 
    setItemImage(viewHolder, list, position); 
  } else if(holder instanceof ProgressViewHolder){ 
    ProgressViewHolder viewHolder = (ProgressViewHolder)holder; 
    viewHolder.progressBar.setIndeterminate(true); 
 
  } 
} 

整个过程基本就是这样,这种方式在项目中经常会用到,我们就可以这样去处理,下拉加载更多就可以这样实现,在加载完数据后再往对象集合中传入null,然后判断如果出现null就加载progressBar布局,再加上Google官方的SwipeRefreshLayout,下拉刷新,上拉加载就搞定了,其实很容易,而且也有点Material Design 的感觉~~~~~~

看下Adapter的全部代码

package com.zmt.e_read.Adapter;  
import android.content.Context; 
import android.support.v7.widget.RecyclerView; 
import android.util.DisplayMetrics; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 
import android.widget.TextView;  
import com.bumptech.glide.Glide; 
import com.zmt.e_read.Module.News; 
import com.zmt.e_read.Module.OnItemClickListener; 
import com.zmt.e_read.R; 
import com.zmt.e_read.Utils.ProgressViewHolder; 
import java.util.Collection; 
import java.util.Collections; 
import java.util.List; 
import butterknife.BindView; 
import butterknife.ButterKnife;  
/** 
 * Created by Dangelo on 2016/9/27. 
 */ 
public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { 
  private final int EMPTY_VIEW = 1; 
  private final int PROGRESS_VIEW = 2; 
  private final int IMAGE_VIEW = 3; 
  private Context context; 
  private List<News> list; 
  private OnItemClickListener clickListener; 
 
  public NewsAdapter(Context context, List<News> list, OnItemClickListener clickListener) { 
    this.context = context; 
    this.list = list; 
    this.clickListener = clickListener; 
  } 
 
  public void addOnItemClickListener(OnItemClickListener clickListener){ 
    this.clickListener = clickListener; 
  } 
 
  @Override 
  public int getItemViewType(int position) { 
    if(list.size() == 0){ 
      return EMPTY_VIEW; 
    } else if(list.get(position) == null){ 
      return PROGRESS_VIEW; 
    } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){ 
      return IMAGE_VIEW; 
    } else { 
      return super.getItemViewType(position); 
    } 
  } 
 
  @Override 
  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
    View view; 
    if(viewType == PROGRESS_VIEW){ 
      view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false); 
      return new ProgressViewHolder(view); 
    } else if(viewType == EMPTY_VIEW){ 
      return null; 
    } else if(viewType == IMAGE_VIEW){ 
      view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false); 
      return new ImageViewHolder(view); 
    } else { 
      view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false); 
      return new NewsViewHolder(view); 
    } 
  } 
 
  @Override 
  public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { 
    holder.itemView.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
        clickListener.onItemClick(v, position); 
      } 
    }); 
    if(holder instanceof NewsViewHolder){ 
      NewsViewHolder viewHolder = (NewsViewHolder)holder; 
      viewHolder.title.setText(list.get(position).getTitle()); 
      viewHolder.time.setText(list.get(position).getTime()); 
      /** 
       * Glide加载图片 
       */ 
      Glide.with(context).load(list.get(position).getImageUrl().get(0)) 
          .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image); 
      if(list.get(position).getType().equals(News.TEXT_NEWS)){ 
        viewHolder.digest.setText(list.get(position).getDigest()); 
      } else { 
        viewHolder.digest.setText(""); 
      } 
    } else if(holder instanceof ImageViewHolder){ 
      ImageViewHolder viewHolder = (ImageViewHolder)holder; 
      viewHolder.title.setText(list.get(position).getTitle()); 
      viewHolder.time.setText(list.get(position).getTime()); 
      setItemImage(viewHolder, list, position); 
    } else if(holder instanceof ProgressViewHolder){ 
      ProgressViewHolder viewHolder = (ProgressViewHolder)holder; 
      viewHolder.progressBar.setIndeterminate(true); 
 
    } 
  } 
 
  public void setItemImage(ImageViewHolder viewHolder, List<News> list, int position){ 
    viewHolder.imageMiddle.setVisibility(View.VISIBLE); 
    viewHolder.imageRight.setVisibility(View.VISIBLE); 
    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); 
    if(list.get(position).getImageUrl().size() == 1){ 
      Glide.with(context).load(list.get(position).getImageUrl().get(0)) 
          .override(displayMetrics.widthPixels - dpToPx(10), dpToPx(90)) 
          .centerCrop().into(viewHolder.imageLeft); 
      viewHolder.imageMiddle.setVisibility(View.GONE); 
      viewHolder.imageRight.setVisibility(View.GONE); 
    } else if(list.get(position).getImageUrl().size() == 2){ 
      int imageWidth = (displayMetrics.widthPixels - dpToPx(20)) / 2; 
      Glide.with(context).load(list.get(position).getImageUrl().get(0)) 
          .override(imageWidth, dpToPx(90)) 
          .centerCrop().into(viewHolder.imageLeft); 
      Glide.with(context).load(list.get(position).getImageUrl().get(1)) 
          .override(imageWidth, dpToPx(90)) 
          .centerCrop().into(viewHolder.imageMiddle); 
      viewHolder.imageRight.setVisibility(View.GONE); 
    } else if(list.get(position).getImageUrl().size() >= 3){ 
      int imageWidth = (displayMetrics.widthPixels - dpToPx(30)) / 3; 
      Glide.with(context).load(list.get(position).getImageUrl().get(0)) 
          .override(imageWidth, dpToPx(90)) 
          .centerCrop().into(viewHolder.imageLeft); 
      Glide.with(context).load(list.get(position).getImageUrl().get(1)) 
          .override(imageWidth, dpToPx(90)) 
          .centerCrop().into(viewHolder.imageMiddle); 
      Glide.with(context).load(list.get(position).getImageUrl().get(2)) 
          .override(imageWidth, dpToPx(90)) 
          .centerCrop().into(viewHolder.imageRight); 
    } 
  } 
 
  @Override 
  public int getItemCount() { 
    return list.size(); 
  } 
 
  public int dpToPx(float dp){ 
    float px = context.getResources().getDisplayMetrics().density; 
    return (int)(dp * px + 0.5f); 
  } 
 
  class NewsViewHolder extends RecyclerView.ViewHolder{ 
    @BindView(R.id.news_title)TextView title; 
    @BindView(R.id.news_digest)TextView digest; 
    @BindView(R.id.news_time)TextView time; 
    @BindView(R.id.news_src)ImageView image;  
    public NewsViewHolder(View itemView) { 
      super(itemView); 
      ButterKnife.bind(this, itemView); 
    } 
  } 
 
  class ImageViewHolder extends RecyclerView.ViewHolder{ 
     @BindView(R.id.news_title) TextView title; 
    @BindView(R.id.image_left) ImageView imageLeft; 
    @BindView(R.id.image_right) ImageView imageRight; 
    @BindView(R.id.image_middle) ImageView imageMiddle; 
    @BindView(R.id.news_time) TextView time;  
    public ImageViewHolder(View itemView) { 
      super(itemView); 
      ButterKnife.bind(this, itemView); 
    } 
  } 
     
  class ProgressViewHolder extends RecyclerView.ViewHolder { 
    @BindView(R.id.progressBar) ProgressBar progressBar; 
    @BindView(R.id.textView) TextView textView;  
    public ProgressViewHolder(View itemView) { 
      super(itemView); 
      ButterKnife.bind(this, itemView); 
    } 
  } 
}

项目地址:https://github.com/xiyouZmt/E-Read

最后说一下为什么为什么用RecyclerView取代ListView。

用过ListView的都知道,在ListView中若要复用视图缓存,就要在getView()方法中手动判断convertView是否为空,若不为空则复用视图缓存,若为空则重新加载视图,而RecyclerView相当于对ListView的Adapter进行了再次封装,把ListView手动判断是否有缓存的代码封装到RecyclerView内部,使这部分逻辑不可见,我们只需要通过getItemCount()方法告诉RecyclerView有多少项数据,然后在onCreateViewHolder()中加载item布局实例化ViewHolder,然后在onBindViewHolder()中完成数据的绑定即可。

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

相关文章

  • Android自定义带加载动画效果的环状进度条

    Android自定义带加载动画效果的环状进度条

    这篇文章主要介绍了Android自定义带加载动画效果的环状进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android listview与adapter详解及实例代码

    Android listview与adapter详解及实例代码

    本文主要介绍Android listview与adapter的知识详解,这里整理了相关资料及实现代码和实现效果图,有兴趣的小伙伴可以参考下
    2016-09-09
  • Cocos2d-x 3.0多线程异步加载资源实例

    Cocos2d-x 3.0多线程异步加载资源实例

    手机游戏,即便是休闲类的小游戏,往往也涉及大量纹理资源、音视频资源、文件读写以及网络通信,处理的稍有不甚就会出现画面卡顿,交互不畅的情况
    2014-04-04
  • Android实现手电筒电源键关闭功能

    Android实现手电筒电源键关闭功能

    这篇文章主要介绍了Android实现手电筒电源键关闭功能,在打开手电筒之后,机器休眠,客户要求点击电源键,手电筒需要关闭,下面小编给大家分享实现代码,需要的朋友可以参考下
    2017-11-11
  • Android实现滑动到顶部悬停的效果

    Android实现滑动到顶部悬停的效果

    这篇文章给大家介绍一种不常见的实现Android滑动到顶部悬停效果的方式,对大家开发Android具有一定的参考借鉴价值,有需要的朋友们可以来一起看看。
    2016-09-09
  • 浅析SVN在Android Studio中的安装和配置方法

    浅析SVN在Android Studio中的安装和配置方法

    这篇文章主要介绍了SVN在Android Studio中的安装和配置方法,本文通过图文并茂给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Android四大组件之Service详解

    Android四大组件之Service详解

    今天小编就为大家分享一篇关于Android四大组件之Service详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Android编程实现带有图标的ListView并带有长按菜单效果示例

    Android编程实现带有图标的ListView并带有长按菜单效果示例

    这篇文章主要介绍了Android编程实现带有图标的ListView并带有长按菜单效果,结合实例形式分析了Android带图标的ListView及菜单功能相关实现技巧,需要的朋友可以参考下
    2017-06-06
  • Android传感器SensorEventListener之加速度传感器

    Android传感器SensorEventListener之加速度传感器

    今天小编就为大家分享一篇关于Android传感器SensorEventListener之加速度传感器,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • Android编程内存溢出与防范方法浅析

    Android编程内存溢出与防范方法浅析

    这篇文章主要介绍了Android编程内存溢出与防范方法,较为详细的分析了Android内存溢出的常见原因与相应的防范措施,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-10-10

最新评论