自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
- dependencies {
- compile fileTree(dir: 'libs', include: ['*.jar'])
- testCompile 'junit:junit:4.12'
- compile 'com.android.support:appcompat-v7:24.2.0'
- compile 'com.android.support:recyclerview-v7:24.2.1'
- }
添加布局文件:
</>code
- <?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.support.v7.widget.RecyclerView
- android:id="@+id/recycler_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- </android.support.v7.widget.RecyclerView>
- </LinearLayout>
创建RecyclerView 适配器 BookBaseAdapter ,这个类继承 RecyclerView.Adapter 并将泛型指定为 BookBaseAdapter.ViewHolder
其中ViewHolder是我们在 BookBaseAdapter 中定义的一个内部类:代码如下:
</>code
- public class BookBaseAdapter extends RecyclerView.Adapter<BookBaseAdapter.ViewHolder>{
- private List<Book> mBookList;
- static class ViewHolder extends RecyclerView.ViewHolder{
- ImageView bookImage;
- TextView bookname;
- public ViewHolder(View view) {
- super(view);
- bookImage = (ImageView) view.findViewById(R.id.book_iamge);
- bookname = (TextView) view.findViewById(R.id.book_name);
- }
- }
- public BookBaseAdapter(List<Book> mBookList) {
- this.mBookList = mBookList;
- }
</>code
- <span style="white-space:pre;"> </span>//加载item 的布局 创建ViewHolder实例
- @Override
- public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
- View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.book,parent,false);
- ViewHolder holder = new ViewHolder(view);
- return holder;
- }
</>code
- <span style="white-space:pre;"> </span>//对RecyclerView子项数据进行赋值
- @Override
- public void onBindViewHolder(ViewHolder holder, int position) {
- Book book = mBookList.get(position);
- holder.bookname.setText(book.getName());
- holder.bookImage.setImageResource(book.getImageId());
- }
</>code
- <span style="white-space:pre;"> </span>//返回子项个数
- @Override
- public int getItemCount() {
- return mBookList.size();
- }
- }
MainActivity调用:
</>code
- public class MainActivity extends AppCompatActivity {
- private List<Book> mlsit = new ArrayList<Book>();
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //初始化List数据
- initBook();
- //初始化RecyclerView
- RecyclerView recyslerview = (RecyclerView) findViewById(R.id.recycler_view);
- //创建LinearLayoutManager 对象 这里使用 <span style="font-family:'Source Code Pro';">LinearLayoutManager 是线性布局的意思</span>
- LinearLayoutManager layoutmanager = new LinearLayoutManager(this);
- //设置RecyclerView 布局
- recyslerview.setLayoutManager(layoutmanager);
- //设置Adapter
- BookBaseAdapter adapter = new BookBaseAdapter(mlsit);
- recyslerview.setAdapter(adapter);
- }
- private void initBook(){
- for (int i = 0; i < 10; i++) {
- Book book01 = new Book("Book"+i,R.drawable.icon01);
- mlsit.add(book01);
- Book book02 = new Book("Book"+i,R.drawable.icon02);
- mlsit.add(book02);
- Book book03 = new Book("Book"+i,R.drawable.icon03);
- mlsit.add(book03);
- }
- }
- }
main_layout布局:
</>code
- <?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.support.v7.widget.RecyclerView
- android:id="@+id/recycler_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- </android.support.v7.widget.RecyclerView>
- </LinearLayout>
item布局:
</>code
- <?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="wrap_content"
- android:orientation="horizontal">
- <ImageView
- android:id="@+id/book_iamge"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"/>
- <TextView
- android:id="@+id/book_name"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"/>
- </LinearLayout>
此处省略Book对象的相关源码。如上就可以实现和ListView一样的效果。
2.实现横向滚动
对垂直布局中的代码做小修改:
onCreat方法中添加setOrientation()方法来设置布局的排列方向
</>code
- layoutmanager.setOrientation(LinearLayoutManager.HORIZONTAL);
</>code
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //初始化List数据
- initBook();
- //初始化RecyclerView
- RecyclerView recyslerview = (RecyclerView) findViewById(R.id.recycler_view);
- //创建LinearLayoutManager 对象
- LinearLayoutManager layoutmanager = new LinearLayoutManager(this);
- layoutmanager.setOrientation(LinearLayoutManager.HORIZONTAL);
- //设置RecyclerView 布局
- recyslerview.setLayoutManager(layoutmanager);
- //设置Adapter
- BookBaseAdapter adapter = new BookBaseAdapter(mlsit);
- recyslerview.setAdapter(adapter);
- }
修改一下item的布局:
</>code
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="150dp"
- android:layout_height="wrap_content"
- android:orientation="vertical">
- <ImageView
- android:id="@+id/book_iamge"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_horizontal"/>
- <TextView
- android:id="@+id/book_name"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="10dp"
- android:layout_gravity="center_horizontal"/>
- </LinearLayout>
运行程序就可以发现我们实现了横向的滚动效果
</>code
- 3.瀑布流布局
RecyclerView除了LinearLayoutManager 之外,还提供了GridlayoutManager和StaggeredGridlayoutManager这两种内置的布局排列方式
GridlayoutManager可以用于实现网格布局
StaggeredGridlayoutManager可以用于实现瀑布流布局,
这里我们来实现一下炫酷的瀑布流布局:
修改item.xml的布局
</>code
- <?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="wrap_content"
- android:layout_margin="5dp"
- android:orientation="vertical">
- <ImageView
- android:id="@+id/book_iamge"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_horizontal"/>
- <TextView
- android:id="@+id/book_name"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="5dp"
- android:layout_gravity="left"/>
- </LinearLayout>
onCreat方法:
</>code
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //初始化List数据
- initBook();
- //初始化RecyclerView
- RecyclerView recyslerview = (RecyclerView) findViewById(R.id.recycler_view);
- //创建LinearLayoutManager 对象
- /*
- * 第一个参数表示布局的列数
- * 第二个参数表示布局的方向,这里我们传入StaggeredGridLayoutManager.VERTICAL,表示布局纵向排列
- */
- StaggeredGridLayoutManager layoutmanager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
- //设置RecyclerView 布局
- recyslerview.setLayoutManager(layoutmanager);
- //设置Adapter
- BookBaseAdapter adapter = new BookBaseAdapter(mlsit);
- recyslerview.setAdapter(adapter);
- }
仅仅修改一行代码,就可以成功的实现瀑布流的布局效果
给RecyclerView的Item添加点击事件
Item的点击事件RecyclerView监听事件处理在ListView使用的时候,该控件给我们提供一个onItemClickListener监听器,这样当我们点击Item的时候,会回调相关的方法,以便我们方便处理Item点击事件。对于RecyclerView来讲,非常可惜的是,该控件没有给我们提供这样的内置监听器方法,不过我们可以进行改造实现,可以这样实现Item的点击事件的监听,在我们的adapter中增加这两个方法
</>code
- public interface OnItemClickListener{
- void onClick( int position);
- void onLongClick( int position);
- }
- public void setOnItemClickListener(OnItemClickListener onItemClickListener {
- this. mOnItemClickListener=onItemClickListener;
- }
然后onBindViewHolder方法要做如下更改
</>code
- @Override
- public void onBindViewHolder(MyViewHolder holder, final int position) {
- holder. tv.setText( mDatas.get(position));
- if( mOnItemClickListener!= null){
- holder. itemView.setOnClickListener( new OnClickListener() {
- @Override
- public void onClick(View v) {
- mOnItemClickListener.onClick(position);
- }
- });
- holder. itemView.setOnLongClickListener( new OnLongClickListener() {
- @Override
- public boolean onLongClick(View v) {
- mOnItemClickListener.onLongClick(position);
- return false;
- }
- });
- }
- }
在MainAcitivity中增加
</>code
- recycleAdapter.setOnItemClickListener(new OnItemClickListener() {
- @Override
- public void onLongClick(int position) {
- Toast.makeText(MainActivity.this,"onLongClick事件 您点击了第:"+position+"个Item",0).show();
- }
- @Override
- public void onClick(int position) {
- Toast.makeText(MainActivity.this,"onClick事件 您点击了第:"+position+"个Item",0).show();
- }
- });
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛