개요

Epoxy는 Airbnb에서 생산하는 라이브러리입니다.특히, 여러 ViewType 유형의 RecyclerView를 쉽게 구현할 수 있습니다.

배치

build.gradle에 다음 내용을 추가합니다.

apply plugin: 'kotlin-kapt'

dependencies {
    // epoxy
    compile 'com.airbnb.android:epoxy:2.7.3'
    kapt 'com.airbnb.android:epoxy-processor:2.7.3'
    compile 'com.airbnb.android:epoxy-databinding:2.7.3'

}

kapt {
    correctErrorTypes = true
}

레이아웃 디자인

RecyclerView를 사용하여 헤더 2종, 콘텐츠 2종 등 총 4가지 레이아웃을 포함하는 다음과 같은 화면을 만듭니다.

Epoxy를 사용하지 않는 경우 RecyclerView와 연결된 Adapter에서 4가지 ViewType에 따라 분리된 설치가 필요하다고 판단됩니다.

주 레이아웃

<layout
    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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            app:layoutManager="android.support.v7.widget.LinearLayoutManager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

</layout>

header1 레이아웃

<layout xmlns:android="http://schemas.android.com/apk/res/android" >

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

    <LinearLayout
        android:background="#ff0000"
        android:gravity="left|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <TextView
            android:text="@{title}"
            android:textStyle="bold"
            android:layout_marginLeft="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</layout>

header2 레이아웃

<layout xmlns:android="http://schemas.android.com/apk/res/android" >

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

    <LinearLayout
        android:background="#00ff00"
        android:gravity="right|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="80dp">

        <TextView
            android:text="@{title}"
            android:textStyle="italic"
            android:layout_marginRight="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</layout>

contents1 레이아웃

<layout xmlns:android="http://schemas.android.com/apk/res/android"　>

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

    <LinearLayout
        android:gravity="center"
        android:background="#eeeeee"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:text="@{text}"
            android:textSize="35sp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</layout>

contents2 레이아웃

<layout xmlns:android="http://schemas.android.com/apk/res/android" >

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

    <LinearLayout
        android:gravity="center"
        android:background="#888888"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:text="@{text}"
            android:textSize="18sp"
            android:fontFamily="serif-monospace"
            android:textColor="#ffffff"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</layout>

package-info.java

레이아웃 파일에서 Epoxy로 BindingModel_클래스를 자동으로 생성하기 위해, 패키지-info.자바를 만듭니다. 아래와 같습니다.

@EpoxyDataBindingLayouts({
        R.layout.header1,
        R.layout.header2,
        R.layout.contents1,
        R.layout.contents2
})
package example.test.epoxytest;

import com.airbnb.epoxy.EpoxyDataBindingLayouts;

만든 패키지-info.java는 다음과 같이 설정됩니다.

지금까지 Header1BindingModel_을 구축하여Contents1BindingModel_, Header2BindingModel_, Contents2BindingModel_Epoxy에서 자동으로 생성됩니다.

데이터 클래스 생성

내용 데이터를 저장하는 클래스를 만듭니다.

class Data(val header1: String, val contents1: List<String>, val header2: String, val contents2: List<String>)

컨트롤러 생성

Adapter 대신 컨트롤러를 생성합니다.

class TestController : TypedEpoxyController<Data>() {

    override fun buildModels(data: Data) {

        Header1BindingModel_()
                .title(data.header1)
                .id(modelCountBuiltSoFar)
                .addTo(this)

        for (item in data.contents1) {
            Contents1BindingModel_()
                    .text(item)
                    .id(modelCountBuiltSoFar)
                    .addTo(this)
        }

        Header2BindingModel_()
                .title(data.header2)
                .id(modelCountBuiltSoFar)
                .addTo(this)

        for (item in data.contents2) {
            Contents2BindingModel_()
                    .text(item)
                    .id(modelCountBuiltSoFar)
                    .addTo(this)
        }
    }
}

Adapter를 설치하는 것보다 간결합니다.

MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)

        val controller = TestController()
        controller.setData(Data("header1", listOf("aa", "ab", "ac"),
                "header2", listOf("ba", "bb", "bc", "bd", "be", "bf")))
        binding.recyclerView.adapter = controller.adapter

        binding.recyclerView.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))
    }
}

데이터를 컨트롤러로 설정하고 컨트롤러 내부에서 생성된 adapter를 RecyclerView와 연결합니다.

총결산

Epoxy를 사용하면 보일러판 코드가 줄어들어 여러 개의viewType를 가진RecyclerView를 비교적 적은 기술로 설치할 수 있습니다