RecyclerView简单使用

上面的截图分别是仿List显示、网格显示、瀑布流显示。

LinearLayoutManager:线性布局,横向或者纵向滑动列表

GridLayoutManager:表格布局

StaggeredGridLayoutManager:流式布局,例如瀑布流效果

当然除了上面的三种内部布局之外，我们还可以继承RecyclerView.LayoutManager来实现一个自定义的LayoutManager。

           Animations(动画)效果:

           RecyclerView对于Item的添加和删除是默认开启动画的。我们当然也可以通过RecyclerView.ItemAnimator类定制动画，然后通过RecyclerView.setItemAnimator()方法来进行使用。

           RecyclerView相关类:

studio导入：

compile 'com.android.support:cardview-v7:23.1.1'

这会使item更加具有卡片的效果，后面布局中会使用上。

先来看List的布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:padding="10dp"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        cardview:cardElevation="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/list_img_id"
                android:padding="5dp"
                android:layout_gravity="center_horizontal"
                android:layout_width="250dp"
                android:layout_height="200dp"
                android:src="@drawable/img3" />

            <TextView
                android:id="@+id/list_tv_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_toRightOf="@id/list_img_id"
                android:layout_centerVertical="true"
                android:text="图片数据"
                android:textSize="20sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

cardview:cardElevation="10dp" 产生10dp的阴影效果

ListAdapter:

package com.zhangli.myapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class ListAdapter extends RecyclerView.Adapter<ListAdapter.ListViewHolder> {

    private Context mContext;
    private List<DataBean> mDatas;
    BitmapUtil bit=new BitmapUtil();

    public ListAdapter(Context context, List<DataBean> datas) {
        mContext = context;
        mDatas = datas;
    }

    @Override
    public ListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //当ViewHolder创建时的回调
        View view = View.inflate(mContext, R.layout.list_layout, null);

        return new ListViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ListViewHolder holder, int position) {
        //当viewHolder与数据绑定时的回调
        DataBean bean = mDatas.get(position);

        holder.setData(bean);
    }

    @Override
    public int getItemCount() {
        //返回的是list数据的个数
        if (mDatas != null) {
            return mDatas.size();
        }
        return 0;
    }

    public class ListViewHolder extends RecyclerView.ViewHolder {
        private ImageView imgIcn;
        private TextView tvName;

        public ListViewHolder(View itemView) {
            super(itemView);
            imgIcn = (ImageView) itemView.findViewById(R.id.list_img_id);
            tvName = (TextView) itemView.findViewById(R.id.list_tv_id);
        }

        public void setData(DataBean bean) {
            Log.e("tag", "data.icn:" + bean.icn);
//            imgIcn.setImageResource(bean.icn);

            Bitmap bitmap=getBitmap(bean.icn);

            //图片先加载出来再缩放  效率低
//            imgIcn.setImageDrawable(bit.resizeImage(bitmap,1000,640));

            //将bitmap缩小
//            imgIcn.setImageBitmap(ThumbnailUtils.extractThumbnail(bitmap, 200, 100));//2.2才加进来的新类，简单易用

            imgIcn.setImageBitmap(bitmap);

            tvName.setText(bean.name);
        }
    }

    public Bitmap getBitmap(int id){
        return bit.drawableToBitmap(mContext,id);
    }
}

在Activity里面设置上listAdapter， DATAS是一个放图片资源的类。

 /**
     * 加载List的数据
     * @param isReverse 是否反向
     * @param isVertical 是否垂直
     */
    private void loadListData(boolean isReverse,boolean isVertical) {
        List<DataBean> datas=new ArrayList<>();

        for(int i=0;i<DATAS.ICNS.length;i++){
            DataBean bean=new DataBean();
            bean.icn=DATAS.ICNS[i];
            bean.name="图片"+i;
            datas.add(bean);
        }

        //给RecyclerView加载数据
        //1、设置布局管理器
        LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);

        //设置是否反向
        linearLayoutManager.setReverseLayout(isReverse);

        //设置是否垂直显示
        linearLayoutManager.setOrientation(isVertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);


        recyclerView.setLayoutManager(linearLayoutManager);
        //2、设置适配器
        recyclerView.setAdapter(new ListAdapter(this,datas));
    }

点击菜单选择recyclerView的显示效果，下面的 GridAdapter和StaggeredAdapter也是一样的：

  @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.list_normal) {
            loadListData(false,true);
            return true;
        }else if(id == R.id.list_vertical_reverse){
            loadListData(true,true);
            return true;
        }else if(id == R.id.list_horizontal){
            loadListData(false,false);
            return true;
        }else if(id == R.id.list_horizontal_reverse){
            loadListData(true,false);
            return true;
        }
   return super.onOptionsItemSelected(item);
    }

再来看看GridAdapter和StaggeredAdapter的加载：

    /**
     * 表格布局
     * @param isReverse 是否反向
     * @param isVertical 是否垂直
     */
    public void loadGridData(boolean isReverse,boolean isVertical){

        List<DataBean> datas=new ArrayList<>();
        for(int i=0;i<DATAS.ICNS.length;i++){
            DataBean bean=new DataBean();
            bean.icn=DATAS.ICNS[i];
            bean.name="图片"+i;
            datas.add(bean);
        }

        GridLayoutManager gridLayoutManager=new GridLayoutManager(this,2);

        //是否反向
        gridLayoutManager.setReverseLayout(isReverse);

        //是否垂直
        gridLayoutManager.setOrientation(isVertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);

        recyclerView.setLayoutManager(gridLayoutManager);
        //2、设置适配器
        recyclerView.setAdapter(new GridAdapter(this, datas));

    }

    /**
     * 瀑布流显示
     * @param isReverse 是否反向
     * @param isVertical 是否垂直
     */
    public void loadStaggerData(boolean isReverse,boolean isVertical){

        List<DataBean> datas=new ArrayList<>();
        for(int i=0;i<DATAS.MEINVS.length;i++){
            DataBean bean=new DataBean();
            bean.icn=DATAS.MEINVS[i];
            bean.name="图片"+i;
            datas.add(bean);
        }

        StaggeredGridLayoutManager staggeredGridLayoutManager=
                new StaggeredGridLayoutManager(2,
                        isVertical?StaggeredGridLayoutManager.VERTICAL
                                :StaggeredGridLayoutManager.HORIZONTAL);

        //是否反向
        staggeredGridLayoutManager.setReverseLayout(isReverse);

        recyclerView.setLayoutManager(staggeredGridLayoutManager);
        //2、设置适配器
        recyclerView.setAdapter(new StaggerAdapter(this, datas));

    }

GridLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        cardview:cardElevation="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:padding="5dp"
            android:orientation="vertical"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/list_img_id"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:layout_width="140dp"
                android:layout_height="140dp"
                android:src="@drawable/img3" />

            <TextView
                android:id="@+id/list_tv_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="图片数据"
                android:layout_gravity="center"
                android:textSize="20sp"
                android:textStyle="bold" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

StaggeredLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:padding="10dp"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        cardview:cardElevation="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="wrap_content"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/list_img_id"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/meinv1" />

            <TextView
                android:id="@+id/list_tv_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="图片数据"
                android:textSize="20sp"
                android:layout_gravity="center"
                android:textStyle="bold" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

好了，简单的使用三种布局方式就是上面的 了。

完整的代码：

package com.zhangli.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        recyclerView = (RecyclerView) findViewById(R.id.recyclerView_id);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.list_normal) {
            loadListData(false, true);
            return true;
        } else if (id == R.id.list_vertical_reverse) {
            loadListData(true, true);
            return true;
        } else if (id == R.id.list_horizontal) {
            loadListData(false, false);
            return true;
        } else if (id == R.id.list_horizontal_reverse) {
            loadListData(true, false);
            return true;
        } else if (id == R.id.grid_normal) {
            loadGridData(false, true);
            return true;
        } else if (id == R.id.grid_vertical_reverse) {
            loadGridData(true, true);
            return true;
        } else if (id == R.id.grid_horizontal) {
            loadGridData(false, false);
            return true;
        } else if (id == R.id.grid_horizontal_reverse) {
            loadGridData(true, false);
            return true;
        } else if (id == R.id.stagger_normal) {
            loadStaggerData(false, true);
            return true;
        } else if (id == R.id.stagger_vertical_reverse) {
            loadStaggerData(true, true);
            return true;
        } else if (id == R.id.stagger_horizontal) {
            loadStaggerData(false, false);
            return true;
        } else if (id == R.id.stagger_horizontal_reverse) {
            loadStaggerData(true, false);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * 加载List的数据
     *
     * @param isReverse  是否反向
     * @param isVertical 是否垂直
     */
    private void loadListData(boolean isReverse, boolean isVertical) {
        List<DataBean> datas = new ArrayList<>();

        for (int i = 0; i < DATAS.ICNS.length; i++) {
            DataBean bean = new DataBean();
            bean.icn = DATAS.ICNS[i];
            bean.name = "图片" + i;
            datas.add(bean);
        }

        //给RecyclerView加载数据
        //1、设置布局管理器
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);

        //设置是否反向
        linearLayoutManager.setReverseLayout(isReverse);

        //设置是否垂直显示
        linearLayoutManager.setOrientation(isVertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);


        recyclerView.setLayoutManager(linearLayoutManager);
        //2、设置适配器
        recyclerView.setAdapter(new ListAdapter(this, datas));
    }

    /**
     * 表格布局
     *
     * @param isReverse  是否反向
     * @param isVertical 是否垂直
     */
    public void loadGridData(boolean isReverse, boolean isVertical) {

        List<DataBean> datas = new ArrayList<>();
        for (int i = 0; i < DATAS.ICNS.length; i++) {
            DataBean bean = new DataBean();
            bean.icn = DATAS.ICNS[i];
            bean.name = "图片" + i;
            datas.add(bean);
        }

        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);

        //是否反向
        gridLayoutManager.setReverseLayout(isReverse);

        //是否垂直
        gridLayoutManager.setOrientation(isVertical ? LinearLayoutManager.VERTICAL : LinearLayoutManager.HORIZONTAL);

        recyclerView.setLayoutManager(gridLayoutManager);
        //2、设置适配器
        recyclerView.setAdapter(new GridAdapter(this, datas));

    }

    /**
     * 瀑布流显示
     *
     * @param isReverse  是否反向
     * @param isVertical 是否垂直
     */
    public void loadStaggerData(boolean isReverse, boolean isVertical) {

        List<DataBean> datas = new ArrayList<>();
        for (int i = 0; i < DATAS.MEINVS.length; i++) {
            DataBean bean = new DataBean();
            bean.icn = DATAS.MEINVS[i];
            bean.name = "图片" + i;
            datas.add(bean);
        }

        StaggeredGridLayoutManager staggeredGridLayoutManager =
                new StaggeredGridLayoutManager(2,
                        isVertical ? StaggeredGridLayoutManager.VERTICAL
                                : StaggeredGridLayoutManager.HORIZONTAL);

        //是否反向
        staggeredGridLayoutManager.setReverseLayout(isReverse);

        recyclerView.setLayoutManager(staggeredGridLayoutManager);
        //2、设置适配器
        recyclerView.setAdapter(new StaggerAdapter(this, datas));

    }

}

content_main layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.zhangli.myapplication.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

完整demo在： https://github.com/zhangli915952504/RecyclerView