RecyclerView入门（一）

作者: 黄烨1121 | 来源:发表于2017-11-23 22:19 被阅读0次

本章目录

Part One：AdapterView
Part Two：RecyclerView概述
Part Three：Adapter和ViewHolder
Part Four：LayoutManager

Part One：AdapterView

AdapterView是RecyclerView，ListView等控件共同的父类，通过它我们先认识下这类容器组件的运行机制。
总体来看，AdapterView系列是一个容器类（ViewGroup）组件，它是以列表的形式在Android客户端显示一些列表选项。
比如，淘宝客户端：

淘宝客户端.png

可以看到，商品信息列表具有一种或者几组相同的布局结构，但是每个列表项的数据是不一样的。
它的工作机制包含：

首先把一个数据放到一个布局界面上，然后把承载了数据的界面放到AdapterView上，依次类推，最终把所有的item添加到AdapterView中。
在Android当中，AdapterView虽然是一个容器类，但实质上和任何容器都不一样，因为它禁用了addView(View v)方法，不允许用户随意添加item。
任何一个AdapterView都由三部分组成：AdapterView控件，item布局，呈现的数据。然后用Adapter接口对象，将三者关联起来。整个过程可以用一张图来演示：

AdapterView工作原理.png

Part Two：RecyclerView概述

在Android5.0以前，对于列表我们习惯于使用ListView或者GridView去呈现，但是官方API封装的太好了，导致的结果就是操作的耦合度非常高，并且不灵活。
因此，Google的改进就是RecyclerView本身不参与任何视图相关的问题，只管Recycler View，也就是说RecyclerView只管回收与复用View，这就是它名字的由来。
所有关于布局、绘制和其他相关的问题，也就是跟数据展示相关的所有问题，都被委派给了一些”插件化”的类来处理。这使得RecyclerView的API变得非常灵活。
而这些插件化的类主要包括：

RecyclerView.Adapter - 处理数据集合并负责绑定视图。
ViewHolder：保存用于显示每个数据条目的子View。
LayoutManager：将每个条目的视图放置于适当的位置。
ItemDecoration - 负责绘制Item附近的分割线。
ItemAnimator - 为Item的一般操作添加动画效果，如，增删条目等。

在理解概念的同时，我们继续填充先前的案例：

在app的build.gradle中的dependencies里面添加依赖：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.3"
    defaultConfig {
        applicationId "com.terana.customview"
        minSdkVersion 21
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:25.3.1'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:recyclerview-v7:25.3.1'
}

需要注意的是，RecyclerView的版本号需要和V7的版本号要一致。

新建一个GalleryActivity，然后在布局文件中加上RecyclerView控件：

<?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"
    tools:context="com.terana.customview.activities.GalleryActivity">

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

在GalleryActivity了初始化RecyclerView对象

package com.terana.customview.activities;

import android.os.Bundle;
import android.support.v7.widget.RecyclerView;

import com.terana.customview.R;

public class GalleryActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        removeStatusBar();
        setContentView(R.layout.activity_gallery);
        initRecyclerView();
    }

    private void initRecyclerView() {
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView_gallery);
    }
}

Part Three：Adapter和ViewHolder

Adapter就像前面我们说的，负责把数据集和布局组装成一个View。不同于以往的AdapterView，Google创建了一个新的RecyclerView.Adapter基类来取代旧的Adapter接口。
由于RecyclerView.Adapter是一个抽象类，所以必须要实现以下三个方法：

public VH onCreateViewHolder(ViewGroup parent, int viewType)
public void onBindViewHolder(VH holder, int position)
public int getItemCount()

同时，继承该抽象类还需要一个VH，也就是ViewHolder。ViewHolder的基本作用是缓存视图对象。比如说一个屏幕只够显示6个条目，那么就需要6+1个item，多出来的那个就是一个缓存，当第一个item滑出屏幕后，第7个显示，并且把第一个item的数据取出来，准备下一个呈现。
在ListView时代，Android官方就推荐使用这种缓存模式，RecyclerView开始正式强制使用。
整个Adapter + ViewHolder的实现步骤为：

新建一个类继承RecyclerView.Adapter

package com.terana.customview.adapter;

import android.support.v7.widget.RecyclerView;

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<>{
}

创建一个内部ViewHolder类继承RecyclerView.ViewHolder

package com.terana.customview.adapter;

import android.support.v7.widget.RecyclerView;
import android.view.View;

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<>{
    class MyViewHolder extends RecyclerView.ViewHolder{

        public MyViewHolder(View itemView) {
            super(itemView);
        }
    }
}

在泛型里填上自定义的ViewHolder，并重写三个方法

package com.terana.customview.adapter;

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

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder>{
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {

    }

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

    class MyViewHolder extends RecyclerView.ViewHolder{

        public MyViewHolder(View itemView) {
            super(itemView);
        }
    }
}

创建实体类

package com.terana.customview.bean;


public class PhotoBean {
    private int photoResId;
    private String content;

    public PhotoBean(int photoResId, String content) {
        this.photoResId = photoResId;
        this.content = content;
    }

    public int getPhotoResId() {
        return photoResId;
    }

    public void setPhotoResId(int photoResId) {
        this.photoResId = photoResId;
    }

    public String getContent() {
        return content;
    }

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

创建摆放条目的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView_item_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"
        android:contentDescription="@null" />

    <TextView
        android:id="@+id/textView_item_photo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="64dp"
        android:textColor="@android:color/white"
        android:gravity="center_horizontal"/>
</RelativeLayout>

修改ViewHolder，设置缓存视图

    class MyViewHolder extends RecyclerView.ViewHolder{
        ImageView photoImeView;
        TextView contentTextView;

        public MyViewHolder(View itemView) {
            super(itemView);
            photoImeView = (ImageView) itemView.findViewById(R.id.imageView_item_photo);
            contentTextView = (TextView) itemView.findViewById(R.id.textView_item_photo);
        }
    }

添加Adapter构造方法，并完善3个主要方法

package com.terana.customview.adapter;

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

import com.terana.customview.R;
import com.terana.customview.bean.PhotoBean;

import java.util.List;

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder>{
    private List<PhotoBean> datas;
    private Context context;

    public MyRecyclerViewAdapter(List<PhotoBean> datas, Context context) {
        this.datas = datas;
        this.context = context;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyViewHolder(LayoutInflater.from(context).inflate(
                R.layout.item_photo_gallery, parent, false));
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        PhotoBean bean = datas.get(position);
        holder.photoImeView.setImageResource(bean.getPhotoResId());
        holder.contentTextView.setText(bean.getContent());
    }

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

    class MyViewHolder extends RecyclerView.ViewHolder{
        ImageView photoImeView;
        TextView contentTextView;

        MyViewHolder(View itemView) {
            super(itemView);
            photoImeView = (ImageView) itemView.findViewById(R.id.imageView_item_photo);
            contentTextView = (TextView) itemView.findViewById(R.id.textView_item_photo);
        }
    }
}

创建假数据并初始化Adapter

    private void initRecyclerView() {
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView_gallery);
        List<PhotoBean> datas = getFakeDatas();
        MyRecyclerViewAdapter adapter = new MyRecyclerViewAdapter(datas, this);
    }

    public List<PhotoBean> getFakeDatas() {
        List<PhotoBean> fakeDatas = new ArrayList<>();
        fakeDatas.add(new PhotoBean(R.drawable.gaoyuanyuan1, "这是我们第一次旅行"));
        fakeDatas.add(new PhotoBean(R.drawable.gaoyuanyuan2, "去了哪儿"));
        fakeDatas.add(new PhotoBean(R.drawable.gaoyuanyuan3, "吃的啥"));
        fakeDatas.add(new PhotoBean(R.drawable.gaoyuanyuan4, "回家睡觉啦"));
        return fakeDatas;
    }

Part Four：LayoutManager

LayoutManager主要作用是，测量和摆放RecyclerView中itemView，以及当itemView对用户不可见时循环复用处理。
主要有3个类：

LinearLayoutManager：线性布局管理器（类似于ListView）
StaggeredGridLayoutManager: 错列网格布局管理器（瀑布流）
GridLayoutManager：网格布局管理器（类似于GridView）

除了瀑布流的实现方式稍微有点讲究外，其它两个应用非常简单，我们就以LinearLayoutManager为例。
LinearLayoutManager有两种构造：

new LinearLayoutManager(Context context)
//参数为上下文环境，实现的是默认的垂直布局

new LinearLayoutManager( Context context, int orientation, boolean reverseLayout)
//第一个参数为上下文环境，第二个参数为布局显示方式，第三个参数为布尔值是否反转

我们的案例想使用一个水平的画廊，所以调用第二个构造方法：

    private void initRecyclerView() {
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView_gallery);
        List<PhotoBean> datas = getFakeDatas();
        MyRecyclerViewAdapter adapter = new MyRecyclerViewAdapter(datas, this);
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
        recyclerView.setAdapter(adapter);
    }

这只是RecyclerView的最基本的一个用法，还有动画，装饰，多条目布局，条目监听事件等，后续会细说。

RecyclerView入门（一）

本章目录

Part One：AdapterView

Part Two：RecyclerView概述

Part Three：Adapter和ViewHolder

Part Four：LayoutManager

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读