[Android] RecyclerView.Adapterの代わりにEpoxyを使用する

ここに写真の説明を挿入

エポキシ


Epoxyは、RecyclerViewが宣言的な方法でデータの読み込み、UIの更新、およびその他のロジックをより効率的に実装し、リストシーンの開発効率を向上させるのに役立ちます。

https://github.com/airbnb/epoxy
Epoxyは、RecyclerViewで複雑な画面を構築するためのAndroidライブラリです-airbnb / epoxy


開発プロセス


エポキシの基本的な使用プロセス:

  1. セルのレイアウトファイル
    作成するには.xmlを使用する.kt、レイアウトセルを作成します。XMLをお勧めします。データバインディングで使用する方が簡単です。
  2. セルに従ってEpoxyModelを生成し、package-info.javaで
    レイアウトファイルを宣言し、kaptがEpoxyRecyclerViewで使用するためにxmlに従ってEpoxyModelコードを自動的に生成します。
  3. EpoxyControllerの作成EpoxyController
    は、RecyclerViewのアダプターと同等であり、データをUIにバインドし、OnClickなどのイベントを定義するために使用されます。
  4. EpoxyControllerを使用してEpoxyControllerをEpoxyRecyclerViewに
    設定し、データの記録とリストの表示を完了します

次に、各ステップの具体的な実装を簡単に紹介します。たとえば、リストに次のデータをロードする必要があります。

data class Foo (
    var title: String,
    var bar: List<Bar>
)

data class Bar (
    var body: String,
    var time: String  
)

0. gradle


apply plugin: 'kotlin-kapt' // 需要使用kapt

android {
    
    
 dataBinding {
    
    
        enabled = true // 使用databinding
    }
}

kapt {
    
    
    correctErrorTypes = true
}

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

1.セルレイアウト


list_cell_a.xml

<?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="title"
            type="String"
            />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{title}"
            android:textSize="24sp"
            android:textStyle="bold"
            tools:text="test"
            />

    </LinearLayout>

</layout>

list_cell_b.xml

<?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="body"
            type="String"
            />

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="8dp"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{body}"
            android:textSize="20sp"
            tools:text="test"
            />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{time}"
            android:textSize="18sp"
            tools:text="test"
            />
    </LinearLayout>

</layout>

2. package-info.java


@EpoxyDataBindingLayouts({
    
    
        R.layout.list_cell_a,
        R.layout.list_cell_b
})
package com.airbnb.epoxy.sample;

import com.airbnb.epoxy.EpoxyDataBindingLayouts;

コンパイル後、データをバインドするためになどのレイアウトファイルに従ってEpoxyModelsコードを生成しますListCellABindingModel_ListCellBindingModel_


3. EpoxyController


宣言的な方法でUIデータを継承TypedEpoxyController、書き換えbuildmodels、および入力します。

class FooBarController : TypedEpoxyController<Foo>() {
    
    
    override fun buildModels(foo: Foo) {
    
    

        ListCellABindingModel_()
            .title(foo.title) // databinding
            .id(modelCountBuiltSoFar)
            .addTo(this)

        foo.bar.forEach {
    
    
            ListCellBindingModel_()
                    .body(it.body)
                    .time(it.time)
                    .id(modelCountBuiltSoFar)
                    .addTo(this)
        }
    }
}
  • 、buildModelsパラメータの数に応じてなど、異なる基本クラスを選択しTyped2EpoxyControllerTyped3EpoxyController
  • titlebodytimeのレイアウトに定義されていますdatabinding
  • idさまざまなタイプのセルを区別するために使用され、すべてのEpoxyModelは一意のIDを持っている必要があります

4.RecyclerViewで使用します


class FooBarFragment : Fragment() {
    
    
    lateinit var binding: FragmentFooBarBinding //fragment的layout生成的daabinding
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    
    
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_foo_bar, container, false)
        return binding.root
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
    
    
        super.onActivityCreated(savedInstanceState)

        val controller = FooBarController()
        binding.recyclerView.adapter = controller.adapter

        val data = Foo("title", listOf(Bar("str1","time1"),Bar("str2","time2")))
        controller.setData(data)
    })
}

コントローラでデータを設定することにより、データは自動的にリストに表示されます


総括する


簡単な例を通して、Epoxyには次の利点があると感じることができます

  1. ViewHolderの使用を避け、コードを減らします
  2. EpoxyControllerとEpoxyModelを介して、データをUIに宣言的に入力し、シンプルで直感的に
  3. データが更新されるたびに、最小の差分でUIが自動的に更新されます(ページング機能と同様)。
  4. MvRxとともに使用して、完全なレスポンシブUIを実現します

おすすめ

転載: blog.csdn.net/vitaviva/article/details/108966907