airbnb 爱彼迎开源 Epoxy 优化使用 RecyclerView_com.airbnb.epoxy 框架

airbnb 爱彼迎开源 Epoxy 优化使用 RecyclerView

一、为什么要使用Epoxy

RecyclerView 众所周知是在listview和gridview基础上优化缺点，提炼出的一个组件view。通过layoutmanager可以设置样式，完全替代前者那两个组件view。

但是随着我们使用RecyclerView，发现它的问题也越来越难以忍受。使用RecyclervView，必然会有Adapter和Viewholder的处理。
onCreateViewHolder，onBindViewHolder，GettemCount 等等。

viewHolder样板代码太多，对于多type类型的itemview列表十分不友好。

控制数据刷新view的代码太繁琐，,设置view数据都集中在了onBindViewHolder方法中，维护数据变更的代码很臃肿，数据业务和view耦合的很严重。逻辑想要清晰真的是要抽出来N个函数方法才可以。

Epoxy Github地址

Epoxy 发行版本

这时候airbnb 爱彼迎开源 Epoxy 应运而出。针对RecyclervView的痛点数据和view绑定的样板代码多，数据更新操作复杂，逻辑业务和view不清晰几点问题做出了优化。

一定要注意的是，该插件只支持kotlin。Java是无法使用的。

二、Epoxy的基本概念

使用Epoxy很简单，它的核心思想就是解放创建viewHoler的过程，让其自动化，并且将业务逻辑完全抽离出RecyclervView的Adapter。

Epoxy的核心就是EpoxyModel和EpoxyController。

EpoxyModel：
就是Epoxy编译后自动生成的视图类文件，如果你了解视图绑定（View Binder）

Google Android JetPack喷气包组件中还没有包含视图绑定的时候，Epoxy使用的是butterknife来简化视图绑定的过程。现在butterknife也正式不更新了，推荐使用官方的视图绑定。

EpoxyController：
EpoxyController类似于RecyclerView的Adapter，用来将数据绑定到UI，同时定义view的相关事件操作。

三、如何使用Epoxy

Gradle 是唯一受支持的构建配置，因此只需将依赖项添加到项目文件中：build.gradle

dependencies {
  implementation "com.airbnb.android:epoxy:$epoxyVersion"
  // Add the annotation processor if you are using Epoxy's annotations (recommended)
  annotationProcessor "com.airbnb.android:epoxy-processor:$epoxyVersion"
}
1
2
3
4
5

apply plugin: 'kotlin-kapt'

kapt {
    correctErrorTypes = true
}
1
2
3
4
5

如果您使用Android DataBinding，您可以像往常一样简单地设置xml布局：

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="title" type="String" />
    </data>

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="@{title}" />
</layout>
1
2
3
4
5
6
7
8
9
10

创建一个接口或类，并添加一个注释来声明数据绑定布局。EpoxyDataBindingLayouts

package com.airbnb.epoxy.sample;

import com.airbnb.epoxy.EpoxyDataBindingLayouts;

@EpoxyDataBindingLayouts({R.layout.header_view, ... // other layouts })
interface EpoxyConfig {}
1
2
3
4
5
6

如果使用不带数据绑定的 xml 布局，则可以创建一个模型类来执行绑定。

@EpoxyModelClass(layout = R.layout.header_view)
public abstract class HeaderModel extends EpoxyModelWithHolder<Holder> {
  @EpoxyAttribute String title;

  @Override
  public void bind(Holder holder) {
    holder.header.setText(title);
  }

  static class Holder extends BaseEpoxyHolder {
    @BindView(R.id.text) TextView header;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

控制器通过按所需顺序添加相应的模型来定义应在 RecyclerView 中显示哪些项目。
例如，我们显示了一个标题、一个照片列表和一个加载器（如果正在加载更多照片）。每当加载照片时，都会调用控制器的方法，这会触发对控制器的调用，以便可以构建表示新数据状态的模型。PhotoControllersetData(photos, loadingMore)buildModels

public class PhotoController extends Typed2EpoxyController<List<Photo>, Boolean> {
    @AutoModel HeaderModel_ headerModel;
    @AutoModel LoaderModel_ loaderModel;

    @Override
    protected void buildModels(List<Photo> photos, Boolean loadingMore) {
      headerModel
          .title("My Photos")
          .description("My album description!")
          .addTo(this);

      for (Photo photo : photos) {
        new PhotoModel()
           .id(photo.id())
           .url(photo.url())
           .addTo(this);
      }

      loaderModel
          .addIf(loadingMore, this);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

use in RecyclerView

MyController controller = new MyController();
recyclerView.setAdapter(controller.getAdapter());

// Request a model build whenever your data changes
controller.requestModelBuild();

// Or if you are using a TypedEpoxyController
controller.setData(myData);
1
2
3
4
5
6
7
8