search
LoginSignup
3

More than 3 years have passed since last update.

posted at

updated at

Epoxy をつかってみる

はじめに

VALU Advent Calendar 2018 の23日目です。
明日はクリスマス・イヴですね…そんなの関係ねぇ!!

今回は airbnb が提供している Epoxy というライブラリを使ってみます。前回と同様に RecyclerView の実装を楽にできるライブラリです。

では EpoxyInstallation に従ってすすめます。

build.gradle

dependencies {
    ...
    implementation 'com.airbnb.android:epoxy:3.1.0'
    implementation 'com.airbnb.android:epoxy-databinding:3.1.0'
    kapt 'com.airbnb.android:epoxy-processor:3.1.0'
}

kapt {
    correctErrorTypes = true
}

DataBinding を使いたいのでepoxy-databinding ライブラリを追加しています。また、kotlin を使うので correctErrorTypes = true も加えています。

モデルの作成

モデルは CustomView から作成する方法と、DataBinding (レイアウト) から作成する方法があります。ここでは DataBinding から作成する方法ですすめていきます。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    >

    <data>

        <variable
            name="name"
            type="String"
            />
    </data>

    <TextView
        style="@style/TextAppearance.AppCompat.Large"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="@{name}"
        tools:text="header"
        />
</layout>

このレイアウトでファイル名とスタイルを少し変えてヘッダーと普通のアイテムの2種類を作成します。

DataBinding からモデルを作成する場合は package-info.java が必要になります。File > New > File で package-info.java を作成し、次のように記述します。

@EpoxyDataBindingLayouts({
        R.layout.item_header,
        R.layout.item_normal
})
package me.aluceps.practicerecyclerview;

import com.airbnb.epoxy.EpoxyDataBindingLayouts;

Controller の実装

Epoxy は EpoxyController を継承した TypedEpoxyController を持っています。これはデータ型を指定することができるクラスです。ここではデータ型を1つ指定することができる TypedEpoxyController<T> を使用して実装します。

まずはデータ型です。

data class ItemData(
        val header: String,
        val normal: List<String>
)

次に Controller です。

class SampleTypedEpoxyController : TypedEpoxyController<ItemData>() {

    override fun buildModels(data: ItemData?) {
        data?.let {
            itemHeader {
                id(it.header)
                name(it.header)
            }
            it.normal.forEachIndexed { i, s ->
                itemNormal {
                    id(i)
                    name(s)
                }
            }
        }
    }
}

RecyclerView の実装

基本的には RecyclerVIew の adapter に Controller を渡して、Controller.setData するだけです。layoutManageraddItemDecoration も追加します。

class MainActivity : AppCompatActivity() {

    private val binding by lazy {
        DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
    }

    private val controller by lazy {
        SampleTypedEpoxyController()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding.recyclerView.run {
            adapter = controller.adapter
            layoutManager = LinearLayoutManager(context)
            addItemDecoration(DividerItemDecoration(context, DividerItemDecoration.VERTICAL))
        }
        controller.setData(ItemData("header1", listOf(
                "item: 1",
                "item: 2",
                "item: 3",
                "item: 4",
                "item: 5",
                "item: 6",
                "item: 7",
                "item: 8",
                "item: 9",
                "item: 10",
                "item: 11",
                "item: 12",
                "item: 13",
                "item: 14",
                "item: 15",
                "item: 16",
                "item: 17",
                "item: 18",
                "item: 19",
                "item: 20"
        )))
    }
}

ここでは RecyclerView を使いましたが、EpoxyRecyclerView を使用することもできます。

イメージ

まとめ

Epoxy の実装は前回の Groupie と比べると少しややこしい印象です。しかし、EpoxyWiki はとてもしっかり作られているので、Wiki をよく読めば比較的簡単に導入できるのではと思いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3