您现在的位置: 365建站网 > 365文章 > android中RecyclerView增强版的ListView的多种用法

android中RecyclerView增强版的ListView的多种用法

文章来源:365jz.com     点击数:336    更新时间:2018-06-03 00:48   参与评论

       自Android 5.0之后,谷歌公司推出了RecylerView控件,RecylerView,我想看到一个新名词后大部分人会首先发出一个疑问,recylerview是什么?为什么会有recylerview也就是说recylerview的优点是什么?recylerview怎么用?接下来就对这几个问题来一起讨论一下recylerview.

通过本篇博客,你将学到以下知识点

①RecyclerView与ListView相比它的优点

②RecyclerView的初步用法

③RecyclerView增加分隔线

RecyclerView更改分隔线的样式

RecyclerView的Adapter的用法

RecyclerView.Adapter中刷新的几个方法的对比

⑦给RecyclerView增加条目点击事件

1.RecyclerView是什么?

      RecylerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,这一点从它的名字recylerview即回收view也可以看出。看到这也许有人会问,不是已经有ListView了吗,为什么还要RecylerView呢?这就牵扯到第二个问题了。

2.RecyclerView的优点是什么?

     根据官方的介绍RecylerView是ListView的升级版,既然如此那RecylerView必然有它的优点,现就RecylerView相对于ListView的优点罗列如下:

①RecylerView封装了viewholder的回收复用,也就是说RecylerView标准化了ViewHolder,编写Adapter面向的是ViewHolder而不再是View了,复用的   逻辑被封装了,写起来更加简单。

②提供了一种插拔式的体验,高度的解耦,异常的灵活,针对一个Item的显示RecylerView专门抽取出了相应的类,来控制Item的显示,使其的扩展性非常强。例如:你想控制横向或者纵向滑动列表效果可以通过LinearLayoutManager这个类来进行控制(与GridView效果对应的是GridLayoutManager,与瀑布流对应的还有StaggeredGridLayoutManager等),也就是说RecylerView不再拘泥于ListView的线性展示方式,它也可以实现GridView的效果等多种效果。你想控制Item的分隔线,可以通过继承RecylerView的ItemDecoration这个类,然后针对自己的业务需求去抒写代码。

③可以控制Item增删的动画,可以通过ItemAnimator这个类进行控制,当然针对增删的动画,RecylerView有其自己默认的实现。


RecyclerView 是一个增强版的ListView,不仅可以实现和ListView同样的效果,还优化了ListView中存在的各种不足之处

ResyslerView 能够实现横向滚动,这是ListView所不能实现的

目前官方更加推荐使用RecyclerView.


1.实现垂直方向的滚动

在   dependencies 中添加库的引用


</>code

  1. dependencies {  
  2.     compile fileTree(dir: 'libs', include: ['*.jar'])  
  3.     testCompile 'junit:junit:4.12'  
  4.     compile 'com.android.support:appcompat-v7:24.2.0'  
  5.     compile 'com.android.support:recyclerview-v7:24.2.1'  
  6. }

 


添加布局文件:



</>code

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.   
  7.     <android.support.v7.widget.RecyclerView  
  8.         android:id="@+id/recycler_view"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent">  
  11.     </android.support.v7.widget.RecyclerView>  
  12. </LinearLayout>

 


创建RecyclerView 适配器 BookBaseAdapter ,这个类继承 RecyclerView.Adapter 并将泛型指定为 BookBaseAdapter.ViewHolder


其中ViewHolder是我们在 BookBaseAdapter 中定义的一个内部类:代码如下:


</>code

  1. public class BookBaseAdapter extends RecyclerView.Adapter<BookBaseAdapter.ViewHolder>{  
  2.   
  3.     private List<Book> mBookList;  
  4.   
  5.     static class ViewHolder extends RecyclerView.ViewHolder{  
  6.         ImageView bookImage;  
  7.         TextView bookname;  
  8.   
  9.         public ViewHolder(View view) {  
  10.             super(view);  
  11.             bookImage = (ImageView) view.findViewById(R.id.book_iamge);  
  12.             bookname = (TextView) view.findViewById(R.id.book_name);  
  13.         }  
  14.     }  
  15.   
  16.     public BookBaseAdapter(List<Book> mBookList) {  
  17.         this.mBookList = mBookList;  
  18.     }

 


</>code

  1. <span style="white-space:pre;"> </span>//加载item 的布局  创建ViewHolder实例  
  2.     @Override  
  3.     public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
  4.         View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.book,parent,false);  
  5.         ViewHolder holder = new ViewHolder(view);  
  6.         return holder;  
  7.     }

 


</>code

  1. <span style="white-space:pre;"> </span>//对RecyclerView子项数据进行赋值  
  2.     @Override  
  3.     public void onBindViewHolder(ViewHolder holder, int position) {  
  4.         Book book = mBookList.get(position);  
  5.         holder.bookname.setText(book.getName());  
  6.         holder.bookImage.setImageResource(book.getImageId());  
  7.     }

 


</>code

  1. <span style="white-space:pre;"> </span>//返回子项个数  
  2.     @Override  
  3.     public int getItemCount() {  
  4.         return mBookList.size();  
  5.     }  
  6. }



MainActivity调用:


</>code

  1. public class MainActivity extends AppCompatActivity {  
  2.   
  3.     private List<Book> mlsit = new ArrayList<Book>();  
  4.   
  5.     @Override  
  6.     protected void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.activity_main);  
  9.         //初始化List数据  
  10.         initBook();  
  11.         //初始化RecyclerView  
  12.         RecyclerView recyslerview = (RecyclerView) findViewById(R.id.recycler_view);  
  13.         //创建LinearLayoutManager 对象 这里使用 <span style="font-family:'Source Code Pro';">LinearLayoutManager 是线性布局的意思</span>  
  14.         LinearLayoutManager layoutmanager = new LinearLayoutManager(this);  
  15.         //设置RecyclerView 布局  
  16.         recyslerview.setLayoutManager(layoutmanager);  
  17.         //设置Adapter  
  18.         BookBaseAdapter adapter = new BookBaseAdapter(mlsit);  
  19.         recyslerview.setAdapter(adapter);  
  20.     }  
  21.   
  22.     private void initBook(){  
  23.         for (int i = 0; i < 10; i++) {  
  24.             Book book01 = new Book("Book"+i,R.drawable.icon01);  
  25.             mlsit.add(book01);  
  26.             Book book02 = new Book("Book"+i,R.drawable.icon02);  
  27.             mlsit.add(book02);  
  28.             Book book03 = new Book("Book"+i,R.drawable.icon03);  
  29.             mlsit.add(book03);  
  30.         }  
  31.     }  
  32. }

 

main_layout布局:


</>code

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.   
  7.     <android.support.v7.widget.RecyclerView  
  8.         android:id="@+id/recycler_view"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent">  
  11.     </android.support.v7.widget.RecyclerView>  
  12. </LinearLayout>

 

item布局:


</>code

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="wrap_content"  
  5.               android:orientation="horizontal">  
  6.   
  7.     <ImageView  
  8.         android:id="@+id/book_iamge"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"/>  
  11.   
  12.     <TextView  
  13.         android:id="@+id/book_name"  
  14.         android:layout_width="match_parent"  
  15.         android:layout_height="wrap_content"/>  
  16.   
  17. </LinearLayout>

 


此处省略Book对象的相关源码。如上就可以实现和ListView一样的效果。


2.实现横向滚动

对垂直布局中的代码做小修改:


onCreat方法中添加setOrientation()方法来设置布局的排列方向

</>code

  1. layoutmanager.setOrientation(LinearLayoutManager.HORIZONTAL);



</>code

  1. @Override  
  2. protected void onCreate(Bundle savedInstanceState) {  
  3.     super.onCreate(savedInstanceState);  
  4.     setContentView(R.layout.activity_main);  
  5.     //初始化List数据  
  6.     initBook();  
  7.     //初始化RecyclerView  
  8.     RecyclerView recyslerview = (RecyclerView) findViewById(R.id.recycler_view);  
  9.     //创建LinearLayoutManager 对象  
  10.     LinearLayoutManager layoutmanager = new LinearLayoutManager(this);  
  11.     layoutmanager.setOrientation(LinearLayoutManager.HORIZONTAL);  
  12.     //设置RecyclerView 布局  
  13.     recyslerview.setLayoutManager(layoutmanager);  
  14.     //设置Adapter  
  15.     BookBaseAdapter adapter = new BookBaseAdapter(mlsit);  
  16.     recyslerview.setAdapter(adapter);  
  17. }


修改一下item的布局:


</>code

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="150dp"  
  4.               android:layout_height="wrap_content"  
  5.               android:orientation="vertical">  
  6.   
  7.     <ImageView  
  8.         android:id="@+id/book_iamge"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_gravity="center_horizontal"/>  
  12.   
  13.     <TextView  
  14.         android:id="@+id/book_name"  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_marginTop="10dp"  
  18.         android:layout_gravity="center_horizontal"/>  
  19.   
  20. </LinearLayout>


运行程序就可以发现我们实现了横向的滚动效果


</>code

  1. 3.瀑布流布局

RecyclerView除了LinearLayoutManager 之外,还提供了GridlayoutManager和StaggeredGridlayoutManager这两种内置的布局排列方式

GridlayoutManager可以用于实现网格布局

StaggeredGridlayoutManager可以用于实现瀑布流布局,

这里我们来实现一下炫酷的瀑布流布局:

修改item.xml的布局


</>code

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="wrap_content"  
  5.               android:layout_margin="5dp"  
  6.               android:orientation="vertical">  
  7.   
  8.     <ImageView  
  9.         android:id="@+id/book_iamge"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_gravity="center_horizontal"/>  
  13.   
  14.     <TextView  
  15.         android:id="@+id/book_name"  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:layout_marginTop="5dp"  
  19.         android:layout_gravity="left"/>  
  20.   
  21. </LinearLayout>

 


onCreat方法:



</>code

  1. @Override  
  2. protected void onCreate(Bundle savedInstanceState) {  
  3.     super.onCreate(savedInstanceState);  
  4.     setContentView(R.layout.activity_main);  
  5.     //初始化List数据  
  6.     initBook();  
  7.     //初始化RecyclerView  
  8.     RecyclerView recyslerview = (RecyclerView) findViewById(R.id.recycler_view);  
  9.     //创建LinearLayoutManager 对象  
  10.     /*  
  11.      * 第一个参数表示布局的列数  
  12.      * 第二个参数表示布局的方向,这里我们传入StaggeredGridLayoutManager.VERTICAL,表示布局纵向排列  
  13.      */  
  14.     StaggeredGridLayoutManager layoutmanager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);  
  15.     //设置RecyclerView 布局  
  16.     recyslerview.setLayoutManager(layoutmanager);  
  17.     //设置Adapter  
  18.     BookBaseAdapter adapter = new BookBaseAdapter(mlsit);  
  19.     recyslerview.setAdapter(adapter);  
  20. }

  


仅仅修改一行代码,就可以成功的实现瀑布流的布局效果


给RecyclerView的Item添加点击事件

   Item的点击事件RecyclerView监听事件处理在ListView使用的时候,该控件给我们提供一个onItemClickListener监听器,这样当我们点击Item的时候,会回调相关的方法,以便我们方便处理Item点击事件。对于RecyclerView来讲,非常可惜的是,该控件没有给我们提供这样的内置监听器方法,不过我们可以进行改造实现,可以这样实现Item的点击事件的监听,在我们的adapter中增加这两个方法

</>code

  1. public interface OnItemClickListener{
  2.         void onClick( int position);
  3.         void onLongClick( int position);     
  4. }
  5. public void setOnItemClickListener(OnItemClickListener onItemClickListener {
  6.         this. mOnItemClickListener=onItemClickListener;     
  7. }

然后onBindViewHolder方法要做如下更改

</>code

  1. @Override  
  2.      public void onBindViewHolder(MyViewHolder holder, final int position) {  
  3.              
  4.            holder. tv.setText( mDatas.get(position));  
  5.              
  6.             if( mOnItemClickListener!= null){  
  7.                 holder. itemView.setOnClickListener( new OnClickListener() {  
  8.                        
  9.                       @Override  
  10.                       public void onClick(View v) {  
  11.                            mOnItemClickListener.onClick(position);  
  12.                      }  
  13.                 });  
  14.                   
  15.                 holder. itemView.setOnLongClickListener( new OnLongClickListener() {  
  16.                       @Override  
  17.                       public boolean onLongClick(View v) {  
  18.                            mOnItemClickListener.onLongClick(position);  
  19.                             return false;  
  20.                      }  
  21.                 });  
  22.            }  
  23.      }

 


在MainAcitivity中增加

</>code

  1. recycleAdapter.setOnItemClickListener(new OnItemClickListener() {  
  2.                
  3.               @Override  
  4.               public void onLongClick(int position) {  
  5.                    Toast.makeText(MainActivity.this,"onLongClick事件       您点击了第:"+position+"个Item",0).show();  
  6.               }  
  7.                
  8.               @Override  
  9.               public void onClick(int position) {  
  10.                    Toast.makeText(MainActivity.this,"onClick事件       您点击了第:"+position+"个Item",0).show();  
  11.               }  
  12.          });



如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (336人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号