安卓RecyclerView使用教程

RecylerView使用步骤

RecyclerView本身提供了三个LayoutManager的实现

• LinearLayoutManager
• GridLayoutManager
• StaggeredGridLayoutManager

 

（一）RecyclerView -----》listView时

1、  先导入

compile 'com.android.support:design:24.1.1'

2、  activity_main中

<?xmlversion="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns: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/mrecyclerview"

       android:layout_width="match_parent"

       android:layout_height="match_parent"

         />

</RelativeLayout>

3、  list_item.xml中(用显示recyclerView的每一项的布局)

<?xml version="1.0"encoding="utf-8"?>

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"

   android:layout_width="match_parent"

    android:background="#44ff0000"

   android:layout_height="wrap_content"

    >

 

    <TextView

        android:id="@+id/id_num"

       android:layout_width="match_parent"

        android:layout_height="50dp"

        android:gravity="center"

        android:text="1"

        />

</FrameLayout>

 

4、  Main_Activity中

publicclass MainActivity extends AppCompatActivity {
   privateRecyclerView mrecyclerView;
    private List<String> list;
    private MyAdapter adapter
    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mrecyclerView= (RecyclerView)findViewById(R.id.mrecyclerview);
        initData();
        /**
         * RecyclerView.LayoutManager 抽象类
         * LinearLayoutManager 线性布局管理器  纵向横向
         */
        mrecyclerView.setLayoutManager(new LinearLayoutManager(this));
        /**
         * 调用addItemDecoration()方法添加item之间的间距
         * ItemDecoration抽象类 需要定义单独的子类定义item之间的间距
         *
         *  onDraw()或者onDrawOver()  getItemOffsets()
         *
         *  自定义分割线实现类通过读取系统主题中的android.R.attr.listDivider
         *  作为item的分割线
         */
        mrecyclerView.addItemDecoration(new DividerItemDecoration(this,
             DividerItemDecoration.VERTICAL_LIST));
        /**
         * 为recyclerView中item添加动画效果   ItemAnimator抽象类
         * DefaultItemAnimator系统提供的默认效果
         */
        mrecyclerView.setItemAnimator(new DefaultItemAnimator());
        adapter=new MyAdapter();
        mrecyclerView.setAdapter(adapter);
    }
    /**
     * 自定义适配器
     */
    publicclass MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{
        /**
         * 创建自定义viewholder对象
         * @param parent
         * @param viewType
         * @return
         */
        @Override
        public MyViewHolder onCreateViewHolder(ViewGroupparent, int viewType) {
            View view= LayoutInflater.from(MainActivity.this)
                   .inflate(R.layout.list_item,parent,false);
            MyViewHolder holder=new MyViewHolder(view);
            return holder;
        }

        /**
         * 将数据加载到控件中
         * @param holder  onCreateViewHolder返回的自定义viewholder对象
         * @param position 表示当前绑定数据的下标
         */
        @Override
        public void onBindViewHolder(MyViewHolderholder, int position) {
            holder.tv.setText(list.get(position).toString());
       }

        /**
         * 返回当前适配器中加载的数据的条目BaseAdapter getCount()
         * @return
         */
        @Override
        public int getItemCount() {
            return list.size();
        }

        /**
         * 在适配器的内部创建自定义的MyViewHolder类 必须继承RecyclerView.ViewHolder
         * 该类构造时必须传入view对象 该view对象相当于ListView中getView()中的convertView
         *
         *  ListView中convertView是复用的 在RecyclerView中把convertView作为ViewHolder
         *  的成员变量存储
         */
        class MyViewHolder extends RecyclerView.ViewHolder{
            TextView tv;
            //必须实现的构造函数 convertView
            public MyViewHolder(ViewitemView) {
                super(itemView);
                tv= (TextView)itemView.findViewById(R.id.id_num);
            }
        }
              初始化数据
             */
    public void initData(){
        list=new ArrayList<>();
        for(int i='A';i<'Z';i++){
            list.add(""+(char)i);

5、//自定义分割线的类DividerItemDecoration.java

 

 

 

/**

         * 调用addItemDecoration()方法添加item之间的间距

         *ItemDecoration抽象类需要定义单独的子类定义item之间的间距

         *

         *  onDraw()或者onDrawOver() getItemOffsets()

         *

         *  自定义分割线实现类通过读取系统主题中的android.R.attr.listDivider

         *  作为item的分割线

         */

 

 

 

packagecom.yztc.recyclerviewdemo;

 

/*

 * Copyright (C) 2014 The Android Open SourceProject

 *

 * Licensed under the Apache License, Version2.0 (the "License");

 * limitations under the License.

 */

 

importandroid.content.Context;

importandroid.content.res.TypedArray;

importandroid.graphics.Canvas;

importandroid.graphics.Rect;

importandroid.graphics.drawable.Drawable;

importandroid.support.v7.widget.LinearLayoutManager;

importandroid.support.v7.widget.RecyclerView;

importandroid.view.View;

/**

 * 设置线性排列时item之间的分割线

 * This class is from the v7 samples of theAndroid SDK.

 * See the license above for details.

 */

publicclass DividerItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = newint[]{

            android.R.attr.listDivider

    };

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL_LIST =LinearLayoutManager.VERTICAL;

    private Drawable mDivider;

    private int mOrientation;

    public DividerItemDecoration(Contextcontext, int orientation) {

        final TypedArray a =context.obtainStyledAttributes(ATTRS);

        mDivider = a.getDrawable(0);

        a.recycle();

        setOrientation(orientation);

    }

 

    public void setOrientation(int orientation){

        if (orientation != HORIZONTAL_LIST&& orientation != VERTICAL_LIST) {

            throw newIllegalArgumentException("invalid orientation");

        }

        mOrientation = orientation;

    }

    @Override

    public void onDraw(Canvas c, RecyclerViewparent) {

        if (mOrientation == VERTICAL_LIST) {

            drawVertical(c, parent);

        } else {

            drawHorizontal(c, parent);

        }

    }

 

 

    public void drawVertical(Canvas c,RecyclerView parent) {

        final int left =parent.getPaddingLeft();

        final int right = parent.getWidth() -parent.getPaddingRight();

 

        final int childCount = parent.getChildCount();

        for (int i = 0; i < childCount; i++){

            final View child =parent.getChildAt(i);

            RecyclerView v = newRecyclerView(parent.getContext());

            final RecyclerView.LayoutParamsparams = (RecyclerView.LayoutParams) child

                    .getLayoutParams();

            final int top = child.getBottom() +params.bottomMargin;

            final int bottom = top +mDivider.getIntrinsicHeight();

            mDivider.setBounds(left, top,right, bottom);

            mDivider.draw(c);

        }

    }

 

    public void drawHorizontal(Canvas c,RecyclerView parent) {

        final int top = parent.getPaddingTop();

        final int bottom = parent.getHeight() -parent.getPaddingBottom();

        final int childCount =parent.getChildCount();

        for (int i = 0; i < childCount; i++){

            final View child =parent.getChildAt(i);

            final RecyclerView.LayoutParamsparams = (RecyclerView.LayoutParams) child

                    .getLayoutParams();

            final int left = child.getRight() +params.rightMargin;

            final int right = left +mDivider.getIntrinsicHeight();

            mDivider.setBounds(left, top,right, bottom);

            mDivider.draw(c);

        }

    }

    @Override

    public void getItemOffsets(Rect outRect,int itemPosition, RecyclerView parent) {

        if (mOrientation == VERTICAL_LIST) {

            outRect.set(0, 0, 0,mDivider.getIntrinsicHeight());

        } else {

            outRect.set(0, 0,mDivider.getIntrinsicWidth(), 0);

        }

    }

}

 

6、  在res-values-styles中添加如下代码

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <!--设置RecyclerView分割线的样式-->

       <itemname="android:listDivider">@drawable/divider_bg</item>
</style>

7、  在drawable/文件夹下新建divider_bg,用于设置，分割线的颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#aa0000"
        android:centerColor="#00aa00"
        android:endColor="#0000aa"
        android:type="linear"
        ></gradient>
    <size android:height="4dp"></size>
</shape>

 

 

（二）、recycler-gridview使用跟listview像似,bu同点

  mRecyclerView.setLayoutManager(newGridLayoutManager(this,2));//2代表gridview的列数。

 

（三）recyclerView实现瀑布流

1、首先是Item的布局masonry_item.xml很简单，就是一张图片加文字,item背景设置为白色

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:background="@color/white">

    <ImageView

        android:id="@+id/masonry_item_img"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:adjustViewBounds="true"

        android:scaleType="centerCrop"/>

    <TextView

        android:id="@+id/masonry_item_title"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center"/>

</LinearLayout>

2、

为了简单起见，我们假设每个item的数据是一个产品信息

public class Product {

    private int img;

    private String title;

    public Product(int img, String title) {

        this.img = img;

        this.title = title;

    }

    public int getImg() {

        return img;

    }

    public void setImg(int img) {

        this.img = img;

    }

    public String getTitle() {

        return title;

    }

    public void setTitle(String title) {

        this.title = title;

    }

}

3、构造适配器

recyclerView的adapter也很简单，构造方法接受产品列表数据源

public class MasonryAdapter extends RecyclerView.Adapter<MasonryAdapter.MasonryView>{

    private List<Product> products;

    public MasonryAdapter(List<Product> list) {

        products=list;

    }

    @Override

    public MasonryView onCreateViewHolder(ViewGroup viewGroup, int i) {

        View view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.masonry_item, viewGroup, false);

        return new MasonryView(view);

    }

    @Override

    public void onBindViewHolder(MasonryView masonryView, int position) {

        masonryView.imageView.setImageResource(products.get(position).getImg());

        masonryView.textView.setText(products.get(position).getTitle());

    }

    @Override

    public int getItemCount() {

        return products.size();

    }

    public static class MasonryView extends  RecyclerView.ViewHolder{

        ImageView imageView;

        TextView textView;

       public MasonryView(View itemView){

           super(itemView);

           imageView= (ImageView) itemView.findViewById(R.id.masonry_item_img );

           textView= (TextView) itemView.findViewById(R.id.masonry_item_title);

       }

    }

}

主界面Activity代码就可以把数据源和view连起来了

 @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

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

        //设置layoutManager

        recyclerView.setLayoutManager(newStaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));

        //设置adapter

        initData();

        MasonryAdapter adapter=new MasonryAdapter(productList);

        recyclerView.setAdapter(adapter);

        //设置item之间的间隔

        SpacesItemDecoration decoration=newSpacesItemDecoration(16);

        recyclerView.addItemDecoration(decoration);

    }

第一
大家看到我们把recyclerview的layoutManager设置成了

newStaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)

参数含义显而易见，2就是2列，第二个参数是垂直方向

第二

SpacesItemDecoration decoration=newSpacesItemDecoration(16);

recyclerView.addItemDecoration(decoration);

设置间隔，我们自定义了一个SpacesItemDecoration,代码非常简单

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

    private int space;

    public SpacesItemDecoration(int space) {

        this.space=space;

    }

    @Override

    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

        outRect.left=space;

        outRect.right=space;

        outRect.bottom=space;

        if(parent.getChildAdapterPosition(view)==0){

            outRect.top=space;

        }

    }

}

重点就这2个地方 ，几行代码就实现了一个漂亮的瀑布流布局，有兴趣自己去玩下哦。

RecyclerView实现瀑布流布局