RecyclerView的基本用法

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

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

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

1.实现垂直方向的滚动

在   dependencies 中添加库的引用

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'
}

添加布局文件:

<?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 中定义的一个内部类:代码如下:

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;
    }

	//加载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;
    }

	//对RecyclerView子项数据进行赋值
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Book book = mBookList.get(position);
        holder.bookname.setText(book.getName());
        holder.bookImage.setImageResource(book.getImageId());
    }
	//返回子项个数
    @Override
    public int getItemCount() {
        return mBookList.size();
    }
}


MainActivity调用:

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 对象 这里使用 LinearLayoutManager 是线性布局的意思
        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布局:

<?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布局:

<?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()方法来设置布局的排列方向

 	layoutmanager.setOrientation(LinearLayoutManager.HORIZONTAL);


    @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的布局:

<?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>

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


3.瀑布流布局

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

GridlayoutManager可以用于实现网格布局

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

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

修改item.xml的布局

<?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方法

    @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);
    }

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


点击监听事件这里引用  http://blog.csdn.net/dmk877/article/details/50816933 的方法

给RecyclerView的Item添加点击事件

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

public interface OnItemClickListener{
        void onClick( int position);
        void onLongClick( int position);
     }
public void setOnItemClickListener(OnItemClickListener onItemClickListener ){
        this. mOnItemClickListener=onItemClickListener;
     }

然后onBindViewHolder方法要做如下更改

[java] view plain copy
 
 在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.      }<span style="color:#333333;">  
  24. </span>  

在MainAcitivity中增加

[java] view plain copy
 
 在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.          });

参考文档:http://blog.csdn.net/dmk877/article/details/50816933

发布了20 篇原创文章 · 获赞 18 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览