那年的RecyclerView我们从头撸一下

简介:
本文讲的是 那年的RecyclerView我们从头撸一下, 根据Google官方给出的说明:A flexible view for providing a limited window into a large data set。能够在有限的窗口中展示大数据集合的灵活视图。

所以我们能够理解为,RecyclerView的一个恰当的使用场景是:由于尺寸限制,用户的设备不能一次性展现所有条目,用户需要上下滚动以查看更多条目。滚出可见区域的条目将被回收,并在下一个条目可见的时候被复用。

对于减少内存开销和CPU的计算,缓存条目是一个非常有用的方法,因为这意味着我们不必每次都创建新的条目,从而减小内存开销和CPU的计算,而且还能够有效降低屏幕的卡顿,保证滑动的顺滑。

RecyclerView不关心视觉效果(visuals)

但是和ListView有什么区别呀?我们已经使用ListView很长一段时间了呀,它一样可以做到呀。从它的类名上看,RecyclerView代表的意义是,我只管Recycler View,也就是说RecyclerView只管回收与复用View,其他的开发者可以自己去设置。你想要另一个布局?插入另一个LayoutManager。你想要不同的动画吗?插入一个ItemAnimator,等等。可以看出其高度的解耦,给予你充分的定制自由(所以你才可以轻松的通过这个控件实现ListView,GirdView,瀑布流等效果)。

2. 引入RecyclerView

RecyclerView 是Support Library的一部分。所以只需要在app/build.gradle中添加以下依赖,便能立即使用:

 
  1. dependencies { compile 'com.android.support:recyclerview-v7:25.3.1'

在布局文件中加入:

 
  1. <android.support.v7.widget.RecyclerView 
  2.  
  3. android:id="@+id/recycler_view" 
  4.  
  5. android:layout_width="match_parent" 
  6.  
  7. android:layout_height="match_parent" />  

然后在页面中引入RecyclerView即可:

 
  1. RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); 

OK,从现在开始,让我们一步一步,开始了解它。

3. 使用RecyclerView

下面的表格中就是使用RecyclerView来显示数据中用到的几个最重要的类,这些类都是RecyclerView的内部类,如果你想使用RecyclerView,需要做以下操作:

Class 功能
Adapter 处理数据集合并负责绑定视图
ViewHolder 持有所有的用于绑定数据或者需要操作的View
LayoutManager 负责摆放视图等相关操作
ItemDecoration 负责绘制Item附近的分割线
ItemAnimator 为Item的一般操作添加动画效果,如,增删条目等

我们可以从下图更直观的了解到RecyclerView的基本结构:

接下来,我将要描述每个类或接口的内容以及如何使用它。

3.1 RecyclerView.ViewHolder

ViewHolder的基本用法是用来存放View对象。Android团队很早之前就推荐使用“ViewHolder设计模式”,但是没有要求开发者在Adapter中必须使用ViewHolder模式。那么现在对于这种新型的RecyclerView.Adapter,我们必须实现并使用这种模式。

Google官方等了这么长时间才强制使用ViewHolder模式,这有点奇怪,但迟做总比不做好。如果您不了解ViewHolder模式,请查看一下Android training Hold View Objects in a View Holder。另外网上有大量关于ListView优化的文章。面试重点。

有一件事是专门针对RecyclerView的。ViewHolder子类可以通过访问公共成员itemView来访问ViewHolder的根视图。所以不需要在ViewHolder子类中存储。

下面是示例的ViewHolder的代码,ViewHolder是示例Adapter的内部类:

 
  1. public static class MyViewHolder extends RecyclerView.ViewHolder{         
  2.        TextView tv; 
  3.        public MyViewHolder(View itemView) {             
  4.            super(itemView); 
  5.            tv = (TextView) itemView.findViewById(R.id.tv); 
  6.        } 
  7.    }  

3.2 Adapter

Adapter扮演着两个角色。一是,根据不同ViewType创建与之相应的的Item-Layout,二是,访问数据集合并将数据绑定到正确的View上。这就需要我们重写以下3个方法:

  • public VH onCreateViewHolder(ViewGroup parent, int viewType) 创建Item视图,并返回相应的ViewHolder
  • public void onBindViewHolder(VH holder, int position) 绑定数据到正确的Item视图上。
  • public int getItemCount() 返回该Adapter所持有的item数量

示例代码如下所示:

 
  1. @Override 
  2.     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
  3.         MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context) 
  4.                 .inflate(R.layout.item_recycler_view,parent,false));         
  5.                 return holder; 
  6.     }     
  7.     @Override 
  8.     public void onBindViewHolder(MyViewHolder holder, int position) { 
  9.         holder.tv.setText(mDatas.get(position)); 
  10.     }     
  11.     @Override 
  12.     public int getItemCount() {         
  13.         return mDatas.size(); 
  14.     }  

因此,一个基本的RecyclerView.Adapter如下:

 
  1. public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {     
  2.     private Context context;     
  3.     private List<String> mDatas; 
  4.  
  5.     public RecyclerAdapter(Context context, List<String> mDatas) {         
  6.         this.context = context;         
  7.         this.mDatas = mDatas; 
  8.     }     
  9.     @Override 
  10.     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {         
  11.         MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context) 
  12.                 .inflate(R.layout.item_recycler_view, parent, false));         
  13.         return holder; 
  14.     }     
  15.     @Override 
  16.     public void onBindViewHolder(MyViewHolder holder, int position) { 
  17.         holder.tv.setText(mDatas.get(position)); 
  18.     }     
  19.     @Override 
  20.     public int getItemCount() {         
  21.         return mDatas == null ? 0 : mDatas.size(); 
  22.     } 
  23.  
  24.     public static class MyViewHolder extends RecyclerView.ViewHolder {         
  25.         TextView tv; 
  26.  
  27.         public MyViewHolder(View itemView) {             
  28.             super(itemView); 
  29.             tv = (TextView) itemView.findViewById(R.id.tv); 
  30.         } 
  31.     } 
  32.  

3.3 RecyclerView.LayoutManager

LayoutManager的职责是摆放Item的位置,并且负责决定何时回收和重用Item。它有一个默认的实现:LinearLayoutManager,它可以用于垂直和水平列表。

RecyclerView.LayoutManager是一个抽象类,RecyclerView为我们提供3个实现类:

  1. LinearLayoutManager 现行管理器,支持横向、纵向。
  2. GridLayoutManager 网格布局管理器
  3. StaggeredGridLayoutManager 瀑布流式布局管理器

3.3.1 LinearlayoutManager

LinearlayoutManager是LayoutManager的默认实现。你可以使用这个类来创建垂直或水平列表。

 
  1. // 设置RecyclerView布局方式为纵向布局 
  2. LinearLayoutManager layoutManager = new LinearLayoutManager(context); 
  3. layoutManager.setOrientation(LinearLayoutManager.VERTICAL); 
  4. recyclerView.setLayoutManager(layoutManager);  
 
  1. // 设置RecyclerView布局方式为横向布局
  2. LinearLayoutManager layoutManager= new LinearLayoutManager(this);
  3. layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
  4. recyclerView.setLayoutManager(layoutManager); 

运行程序,我们看到如下效果: 

我们发现和ListView有一些不同,没有分割线让这个列表看起来很不美观,给RecyclerView设置分割线这个我们在下一小节说明。

当然LinearlayoutManager中还有一些很实用的API:

  • findFirstVisibleItemPosition() 返回当前第一个可见Item的position
  • findFirstCompletelyVisibleItemPosition() 返回当前第一个完全可见Item的position
  • findLastVisibleItemPosition() 返回当前最后一个可见Item的position
  • findLastCompletelyVisibleItemPosition() 返回当前最后一个完全可见Item的position

3.3.2 GridLayoutManager

有两个构造方法:

 
  1. /** 
  2. * Creates a vertical GridLayoutManager 
  3. * @param context Current context, will be used to access resources. 
  4. * @param spanCount 设置行数,因为默认是纵向的 
  5. */public GridLayoutManager(Context context, int spanCount) {     
  6.     super(context); 
  7.     setSpanCount(spanCount); 
  8. }/** 
  9. * @param context Current context, will be used to access resources. 
  10. * @param spanCount 设置行数或者列数,根据方向 
  11. * @param orientation 布局方向 HORIZONTAL or VERTICAL. 
  12. * @param reverseLayout 是否反向显示 When set to true, layouts from end to start. 
  13. */public GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout) {     
  14.     super(context, orientation, reverseLayout); 
  15.     setSpanCount(spanCount); 
  16.  

我们按如下代码设置:

 
  1. // 设置纵向的4列的表格布局GridLayoutManager layoutManager = new GridLayoutManager(this,4,GridLayoutManager.VERTICAL,false); 
  2. recyclerView.setLayoutManager(layoutManager); 
  3. // 设置横向的3行的表格布局GridLayoutManager layoutManager = new GridLayoutManager(this,3,GridLayoutManager.HORIZONTAL,false); 
  4. recyclerView.setLayoutManager(layoutManager);   

3.3.3 StaggeredGridLayoutManager

我们来看StaggeredGridLayoutManager的构造方法,只有一个方法

 
  1. /** 
  2. * Creates a StaggeredGridLayoutManager with given parameters. 
  3. * @param spanCount   设置行数或者列数,根据方向,纵向就是列数,横向就是行数 
  4. * @param orientation 方向 
  5. */  
  6. public StaggeredGridLayoutManager(int spanCount, int orientation) {}  

因此我们这样设置:

 
  1. // 设置纵向的瀑布流布局 
  2. StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL); 
  3. recyclerView.setLayoutManager(layoutManager);  

我们看效果和GridLayoutManager没有什么区别呢,那我们来小小的修改一下,你就可以看到它的强大。

我们给每个item的布局加入margin:

 
  1. <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:orientation="vertical" android:layout_width="match_parent" 
  3.     android:layout_height="wrap_content" 
  4.     android:layout_margin="5dp" 
  5.     android:background="@color/colorAccent"
  6.  
  7.     <TextView 
  8.         android:id="@+id/tv" 
  9.         android:layout_width="100dp" 
  10.         android:layout_height="100dp" 
  11.         android:layout_gravity="center" 
  12.         android:gravity="center" 
  13.         android:textColor="#fff" 
  14.         /></LinearLayout>  

然后我们在适配器的onBindViewHolder方法中为我们的item设置个随机的高度:

 
  1. //贴上部分代码,其余的请看附件  
  2.     private List<Integer> mHeights;     
  3.     public RecyclerAdapter(Context context, List<String> mDatas) {         
  4.     this.context = context;         
  5.     this.mDatas = mDatas; 
  6.         mHeights = new ArrayList<Integer>();         
  7.             for (int i = 0; i < mDatas.size(); i++) { 
  8.             mHeights.add((int) (100 + Math.random() * 300)); 
  9.         } 
  10.     } 
  11.  
  12.     @Override     
  13.     public void onBindViewHolder(MyViewHolder holder,  
  14.         final int position) { 
  15.         ViewGroup.LayoutParams lp = holder.tv.getLayoutParams(); 
  16.         lp.height = mHeights.get(position); 
  17.         holder.tv.setLayoutParams(lp); 
  18.     }  

运行,我们可以看到效果,是不是很炫!

3.4 RecyclerView.ItemDecoration

通过设置

 
  1. recyclerView.addItemDecoration(new DividerDecoration(Context context, int orientation)); 

来改变Item之间的偏移量或者对Item进行装饰。

例如,在上面的设置LinearlayoutManager之后加入以下代码,那么列表的效果就会发生改变:

 
  1. // 给纵向显示RecyclerView设置分割线 
  2. recyclerView.addItemDecoration(new DividerItemDecoration(activity,DividerItemDecoration.VERTICAL)); 
  3. // 给横向显示RecyclerView设置分割线 
  4. recyclerView.addItemDecoration(new DividerItemDecoration(activity,DividerItemDecoration.HORIZONTAL));  

当然,你也可以对RecyclerView设置多个ItemDecoration,列表展示的时候会遍历所有的ItemDecoration并调用里面的绘制方法,对Item进行装饰。

RecyclerView.ItemDecoration是一个抽象类,可以通过重写以下三个方法,来实现Item之间的偏移量或者装饰效果:

  • public void onDraw(Canvas c, RecyclerView parent) 装饰的绘制在Item条目绘制之前调用,所以这有可能被Item的内容所遮挡
  • public void onDrawOver(Canvas c, RecyclerView parent) 装饰的绘制在Item条目绘制之后调用,因此装饰将浮于Item之上
  • public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) 与padding或margin类似,LayoutManager在测量阶段会调用该方法,计算出每一个Item的正确尺寸并设置偏移量。

当然了,如果我们使用GridLayoutManager后,对于分割线,前面的DividerItemDecoration就不适用了,主要是因为它在绘制的时候,比如水平线,针对每个child的取值为:

 
  1. final int left = parent.getPaddingLeft(); 
  2. final int right = parent.getWidth() - parent.getPaddingRight(); 

因为每个Item一行,这样是没问题的。而GridLayoutManager时,一行有多个childItem,这样就多次绘制了,并且GridLayoutManager时,Item如果为最后一列(则右边无间隔线)或者为最后一行(底部无分割线)。

按照上述的方法,我们可以自定义一个DividerGridItemDecoration。由于代码篇幅过长,我们在附件中给出。我们给GridLayoutManager设置DividerGridItemDecoration,运行效果如下:

3.5 RecyclerView.ItemAnimator

ItemAnimator能够帮助Item实现独立的动画。

ItemAnimator作触发于以下三种事件:

  • 某条数据被插入到数据集合中
  • 从数据集合中移除某条数据
  • 更改数据集合中的某条数据

幸运的是,在Android中默认实现了一个DefaultItemAnimator,我们可以通过以下代码为Item增加动画效果:

 
  1. recyclerView.setItemAnimator(new DefaultItemAnimator()); 

在之前的版本中,当时据集合发生改变时,我们通过调用.notifyDataSetChanged(),来刷新列表,因为这样做会触发列表的重绘,所以并不会出现任何动画效果,因此需要调用一些以notifyItem*()作为前缀的特殊方法,比如:

  • public final void notifyItemInserted(int position) 向指定位置插入Item
  • public final void notifyItemRemoved(int position) 移除指定位置Item
  • public final void notifyItemChanged(int position) 更新指定位置Item

下面我们使用DefaultItemAnimator来展示一下动画效果,修改代码如下:

在Activity中添加两个按钮add和remove负责动态插入和移除item

 
  1. btnAdd.setOnClickListener(new View.OnClickListener() {             
  2.             @Override 
  3.             public void onClick(View v) { 
  4.                 adapter.addData(1); 
  5.             } 
  6.         }); 
  7.  
  8. btnRemove.setOnClickListener(new View.OnClickListener() {             
  9.             @Override 
  10.             public void onClick(View v) { 
  11.                 adapter.removeData(2); 
  12.             } 
  13.         });  

在Adapter中添加两个方法:

 
  1. public void addData(int position) { 
  2.         mDatas.add(position, "Insert"); 
  3.         mHeights.add( (int) (100 + Math.random() * 300)); 
  4.         notifyItemInserted(position); 
  5. }public void removeData(int position) { 
  6.         mDatas.remove(position); 
  7.         notifyItemRemoved(position); 
  8.  

运行结果如下: 

3.6 Listeners

很遗憾,RecyclerView并没有像ListView那样提供以下两个Item的点击监听事件

  • public void setOnItemClickListener(@Nullable OnItemClickListener listener) Item点击事件监听
  • public void setOnItemLongClickListener(OnItemLongClickListener listener) Item长按事件监听

但是这并不能阻拦我们的脚步,我可以定义这样的两个方法。

 
  1. public interface OnItemClickLitener {     
  2.     void onItemClick(View viewint position);     
  3.     void onItemLongClick(View viewint position); 
  4.     private OnItemClickLitener litener; 
  5.     public void setLitener(OnItemClickLitener litener) {     
  6.         this.litener = litener; 
  7.  

在onBindViewHolder方法中给需要响应点击事件的控件设置监听器:

 
  1. // 如果设置了回调,则响应点击事件holder.itemView.setOnClickListener(new View.OnClickListener() {     
  2.     @Override 
  3.     public void onClick(View v) {         
  4.         if (litener != null) { 
  5.             litener.onItemClick(v, position); 
  6.         } 
  7.     } 
  8. }); 
  9.  
  10. holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {     
  11.     @Override 
  12.     public boolean onLongClick(View v) {         
  13.         if (litener != null) { 
  14.             litener.onItemLongClick(v, position); 
  15.         }        return false
  16.     } 
  17. });  

在Activity中设置这个方法:

 
  1. adapter.setLitener(new RecyclerAdapter.OnItemClickLitener() { 
  2.     @Override     
  3.     public void onItemClick(View viewint position) { 
  4.         Toast.makeText(activity,"第"+position+"项被点击了",Toast.LENGTH_SHORT).show(); 
  5.     } 
  6.  
  7.     @Override     
  8.     public void onItemLongClick(View viewint position) { 
  9.         Toast.makeText(activity,"第"+position+"项被长按了",Toast.LENGTH_SHORT).show(); 
  10.     } 
  11. });  

效果如图:


本文作者: shijiacheng

来源:51CTO

原文标题:那年的RecyclerView我们从头撸一下
相关文章
|
前端开发 JavaScript 容器
【一个让你停不下来的动效】——难道不来瞅瞅?(含源码+思路)
【一个让你停不下来的动效】——难道不来瞅瞅?(含源码+思路)
129 0
【一个让你停不下来的动效】——难道不来瞅瞅?(含源码+思路)
|
API 定位技术 C++
【致敬童年】Funcode实现坦克大战
【致敬童年】Funcode实现坦克大战
|
JavaScript 前端开发 测试技术
用Threejs做一只会动的3D玉兔祝大家中秋快乐
中秋佳节即将来临,以此文提前祝朋友们中秋佳节快乐,幸福安康。
202 0
用Threejs做一只会动的3D玉兔祝大家中秋快乐
超火 3D 照片墙,你学废了吗?
超火 3D 照片墙,你学废了吗?
107 0
|
Android开发 计算机视觉 容器
【Android】手撸抖音小游戏潜艇大挑战
Android端高仿抖音热门小游戏,潜艇大挑战
101 0
|
缓存 API Android开发
RecycleView三问—腾讯真题
Recycleview相比也是每个Android开发者熟得不能再熟的控件了,但是你对他又真的了解多少呢?看看今天的三问你都能答得上来吗?
116 0
|
编译器 Python
圣诞节来了,怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~
圣诞节来了,怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~
134 0
圣诞节来了,怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~
|
前端开发 API 调度
TextureView 的血与泪
越来越多的应用需要使用自己的绘制引擎进行复杂内容的绘制,比如需要使用 GL 绘制 3D 的内容,或者绘制复杂的文档,图表时不希望阻塞 UI 线程,或者部分内容是通过类似 Flutter 这样的第三方 UI Toolkit 进行绘制。通常这部分内容会通过 SurfaceView 或者 TextureView 呈现在 UI 界面上。 一般来说 SurfaceView 能够提供更好的性能,但是因为
1882 0

热门文章

最新文章