Android 高级控件（七）——RecyclerView的方方面面

Android 高级控件（七）——RecyclerView的方方面面

---

RecyclerView出来很长时间了，相信大家都已经比较了解了，这里我把知识梳理一下，其实你把他看成一个升级版的ListView也是可以的，为什么这样说呢？我们一起来学习一下！

一.RecyclerView的基本使用

使用RecyclerView的话，大家都知道，他是V7里面的控件，所以我们需要添加源，但是大家的Gradle版本都是不一样的，这里介绍一下一种比较方便的添加方法，我们右键我们的项目

选择open module settings,然后依次选择我们的app-Dependencies,点击+号，选择Library Dependency,然后搜索RecyclerView就好了

好的，添加完成之后我们就可以在Build.gradle里面看到我们添加的源了

compile 'com.android.support:recyclerview-v7:24.2.0'

现在我们就可以开始使用RecyclerView了，在布局里添加

<?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/mRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>

我们先来模拟一下一些基础数据，最基本的写法：

public class MainActivity extends AppCompatActivity {

private RecyclerView mRecyclerView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

/**
 * 初始化View
 */
private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.mRecyclerView);
//设置布局，这里我们使用线性布局
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
//设置适配器
        mRecyclerView.setAdapter(new RecyclerView.Adapter() {
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(new TextView(parent.getContext()));
            }

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                ViewHolder vh = (ViewHolder) holder;
                vh.tv.setText("我是item:" + position);
            }

@Override
public int getItemCount() {
return 10;
            }

            class ViewHolder extends RecyclerView.ViewHolder {
private TextView tv;

public ViewHolder(TextView itemView) {
super(itemView);
                    tv = itemView;
                }

public TextView getTv() {
return tv;
                }
            }
        });
    }
}

OK，运行一下

成功的运行，但是你看到，他也太丑了吧，还有，你这都是什么烂代码，怎么一点扩展性都没有，没错，因为我这还只是演示的，看官仔细看，我们接下来要做的事情！

二.RecyclerView的item

我们上面那个写死了，现在我们来个扩展性强的，我们都知道listview一般是写个item，有个实体类，还有个adapter对吧，那我们也是一样的：

首先我们的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="match_parent"
android:orientation="vertical">

<TextView
 android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"/>

<TextView
 android:id="@+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</LinearLayout>

然后就是我们的实体类了

package com.liuguilin.recyclerviewsample;

/*
 * 项目名： RecyclerViewSample 
 * 包名： com.liuguilin.recyclerviewsample
 * 文件名: ItemData
 * 创建者: LGL
 * 创建时间: 2016/10/7 13:48
 * 描述： 实体类
 */

public class ItemData {

private String title;
private String content;

public String getTitle() {
return title;
    }

public void setTitle(String title) {
this.title = title;
    }

public String getContent() {
return content;
    }

public void setContent(String content) {
this.content = content;
    }
}

再接着实现我们的adapter

package com.liuguilin.recyclerviewsample;

/*
 * 项目名： RecyclerViewSample 
 * 包名： com.liuguilin.recyclerviewsample
 * 文件名: RecyclerViewAdapter
 * 创建者: LGL
 * 创建时间: 2016/10/7 13:10
 * 描述： TODO
 */

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter {

private List<ItemData> mList;

public RecyclerViewAdapter(List<ItemData> mList) {
this.mList = mList;
    }

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

return new ViewHolder(LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item, null));
    }

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ViewHolder vh = (ViewHolder) holder;

        ItemData item = mList.get(position);
        vh.getTvTitle().setText(item.getTitle());
        vh.getTvContent().setText(item.getContent());
    }

@Override
public int getItemCount() {
return mList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

private View mView;

private TextView tvTitle;
private TextView tvContent;

public ViewHolder(View mView) {
super(mView);

            tvTitle = (TextView) mView.findViewById(R.id.tvTitle);
            tvContent = (TextView) mView.findViewById(R.id.tvContent);
        }

public TextView getTvTitle() {
return tvTitle;
        }

public TextView getTvContent() {
return tvContent;
        }
    }
}

做完这些，我们就去填充下数据

package com.liuguilin.recyclerviewsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

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

public class MainActivity extends AppCompatActivity {

private RecyclerView mRecyclerView;
private List<ItemData> mList = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

/**
 * 初始化View
 */
private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.mRecyclerView);
//设置布局，这里我们使用线性布局
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
for (int i = 0; i < 100; i++) {
            ItemData item = new ItemData();
            item.setTitle("Title" + i);
            item.setContent("Content:" + i);
            mList.add(item);
        }
//设置适配器
        mRecyclerView.setAdapter(new RecyclerViewAdapter(mList));
    }
}

好的，我们来运行一下：

这个扩展就比较高了对吧；我们继续来看。

三.RecyclerView的样式

你们看了这么久了肯定会觉得这个太丑了，想定义下样式，事实上，RecyclerView很灵活，很多都是通过代码来控制的不像listview一样是xml设置，我们看下setLayoutManager的具体使用姿势：

//设置布局，这里我们使用线性布局
mRecyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false));

我们设置水平的，来看看效果

我们可以看到，水平了，这三个参数分别是：上下文，布局方向，是否旋转，我们现在把是否旋转设置为true再来看下效果：

显而易见，数据是倒过来的了，当然我们也不只是一种布局，我们设置表格布局

 mRecyclerView.setLayoutManager(new GridLayoutManager(this,3));

参数是3列的含义，我们来看下：

好的，基本的你学会了吗？我们还有一个属性是添加分割线的，很多同学并不知道在哪里添加，其实他是需要代码设置的；

//添加分割线
        mRecyclerView.addItemDecoration(new MyDecoration(this,MyDecoration.VERTICAL_LIST));

但是这个MyDecoration是什么？官方为我们提供了例子，这里就不演示了

package com.liuguilin.recyclerviewsample;

/*
 * 项目名： RecyclerViewSample 
 * 包名： com.liuguilin.recyclerviewsample
 * 文件名: MyDecoration
 * 创建者: LGL
 * 创建时间: 2016/10/7 14:22
 * 描述： 分割线
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

public class MyDecoration extends RecyclerView.ItemDecoration{

private Context mContext;
private Drawable mDivider;
private int mOrientation;
public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

//我们通过获取系统属性中的listDivider来添加，在系统中的AppTheme中设置
public static final int[] ATRRS  = new int[]{
            android.R.attr.listDivider
    };

public MyDecoration(Context context, int orientation) {
this.mContext = context;
final TypedArray ta = context.obtainStyledAttributes(ATRRS);
this.mDivider = ta.getDrawable(0);
        ta.recycle();
        setOrientation(orientation);
    }

//设置屏幕的方向
public void setOrientation(int orientation){
if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST){
throw new IllegalArgumentException("invalid orientation");        }        mOrientation = orientation;
    }

@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (mOrientation == HORIZONTAL_LIST){
            drawVerticalLine(c, parent, state);
        }else {
            drawHorizontalLine(c, parent, state);
        }
    }

//画横线, 这里的parent其实是显示在屏幕显示的这部分
public void drawHorizontalLine(Canvas c, RecyclerView parent, RecyclerView.State state){
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++){
final View child = parent.getChildAt(i);

//获得child的布局信息
final RecyclerView.LayoutParams params = (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);
//Log.d("wnw", left + " " + top + " "+right+" "+bottom+" "+i);
        }
    }

//画竖线
public void drawVerticalLine(Canvas c, RecyclerView parent, RecyclerView.State state){
int top = parent.getPaddingTop();
int bottom = parent.getHeight() - parent.getPaddingBottom();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++){
final View child = parent.getChildAt(i);

//获得child的布局信息
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams();
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicWidth();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

//由于Divider也有长宽高，每一个Item需要向下或者向右偏移
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if(mOrientation == HORIZONTAL_LIST){
//画横线，就是往下偏移一个分割线的高度
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        }else {
//画竖线，就是往右偏移一个分割线的宽度
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

设置完之后我们来运行一下

好的，分割线野有了，如果我们要自定义一下最喜欢个分割线，我们可写一个xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorAccent"/>
<size android:height="1dp"/>
</shape>

然后在我们的主题里面引用

   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:listDivider">@drawable/divider</item>
    </style>

再来运行一下

OK，到这里这个样式已经基本上没什么问题了

四.RecyclerView的Adapter

我们把Adapter放后面讲，也是希望大家先去看下代码，本身代码也不多，以这个adapter为例，我简单的说话这些方法的作用

• 构造方法

传递参数的，没什么可说的

• onCreateViewHolder

这里我们一般是来初始化我们的布局的，也就是我们item

• onBindViewHolder

绑定View之后就在这里面进行赋值了，分工明确

• getItemCount

返回数据长度，没什么可说的

• ViewHolder

继承RecyclerView.ViewHolder，对item的view进行初始化，也就是我们的缓存对象

到这里，大家是不是已经学会了呢？如果没有学会的话，请加群：555974449我们继续学习

Demo下载：http://download.csdn.net/detail/qq_26787115/9646804