Kotlin × Data Binding으로 onItemClickListener가 있는 ListView 응용 프로그램 만들기

Kotlin 및 Data Binding을 사용하여 ListView 응용 프로그램을 만듭니다.
예제 항목은 다음 저장소에 저장됩니다.
https://github.com/shanonim/Kotlin-DataBinding-ListView

Kotlin에서 데이터 바인딩을 사용하는 설정

build.gradle 에 다음 내용을 추가합니다.
build.gradle
apply plugin: 'kotlin-kapt'

android {
    dataBinding {
        enabled = true
    }
}

dependencies {
    kapt 'com.android.databinding:compiler:2.2.3'
}
kapt 'com.android.databinding:compiler:의 버전은 아래 사이트를 참조했다.
https://bintray.com/android/android-tools/com.android.databinding.compiler
2017.02.11 현재stable의 최신은2.2.3이기 때문에 그곳을 채택했습니다.

표시할 데이터


API에서 가져온 데이터가 아니라 enum에 정의된 예시 데이터를 표시합니다.
KemonoData.kt
enum class KemonoData(val kemonoName: String, val kemonoWords: String) {
    SERVAL("サーバル", "サーバルキャットのサーバルだよ!"),
    FENNEC("フェネック", "君、やっぱイケてるねー"),
    COMMON_RACCOON("アライグマ", "アライさんにお任せなのだー!"),
    KABAN("かばん", "(・8・)")
}
KemonoModel.kt
data class KemonoModel(val kemonoName: String, val kemonoWords: String)

소스 코드


Activity


MainActivity.kt
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val binding : ActivityMainBinding
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val listAdapter = KemonoAdapter(applicationContext)
        val list = mutableListOf<KemonoModel>()
        for (value in KemonoData.values()) {
            list.add(KemonoModel(value.kemonoName, value.kemonoWords))
        }
        listAdapter.kemonoFriends = list
        binding.listview.adapter = listAdapter

        binding.setOnItemClick { adapterView, view, position, l ->
            Toast.makeText(this, listAdapter.kemonoFriends[position].kemonoName, Toast.LENGTH_SHORT).show()
        }
    }
}
해당하는 xml 파일은 activity_main.xml 입니다.<variable>type을 태그의 AdapterView.OnItemClickListener, 하위 요소의 ListView로 설정합니다.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bind="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="onItemClick"
            type="android.widget.AdapterView.OnItemClickListener" />
    </data>

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

        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            bind:onItemClickListener="@{onItemClick}" />

    </LinearLayout>
</layout>

onItemClick

item_list_view의 하위 요소의 xml 파일입니다.
item_list_view.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="kemonoFriends"
            type="com.example.shanonim.kotlin_databinding_listview.model.KemonoModel" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/text_view_kemono_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="500dp"
            android:height="30dp"
            android:gravity="center_vertical"
            android:text="@{kemonoFriends.kemonoName}"
            android:textColor="@android:color/black"
            android:textSize="20dp"
            tools:text="サーバル" />

        <TextView
            android:id="@+id/text_view_kemono_words"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text_view_kemono_name"
            android:width="500dp"
            android:height="30dp"
            android:gravity="center_vertical"
            android:text="@{kemonoFriends.kemonoWords}"
            android:textColor="@android:color/black"
            tools:text="サーバルキャットのサーバルだよ!" />
    </RelativeLayout>
</layout>

ListView


KemonoAdapter.kt
class KemonoAdapter(private val context: Context) : BaseAdapter() {
    var kemonoFriends: List<KemonoModel> = emptyList()

    override fun getCount(): Int = kemonoFriends.size

    override fun getItem(position: Int): Any? = kemonoFriends[position]

    override fun getItemId(position: Int): Long = 0

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val binding: ItemListViewBinding
        if (convertView == null) {
            binding = ItemListViewBinding.inflate(LayoutInflater.from(context), parent, false)
            binding.root.tag = binding
        } else {
            binding = convertView.tag as ItemListViewBinding
        }
        binding?.kemonoFriends = getItem(position) as KemonoModel

        return binding.root
    }
}

동작 결과


Adapter의 하위 요소를 클릭하면 각자의 데이터를 표시합니다.

총결산


Butter Knife에서 Data Binding으로 갈아타기 위해 이번 샘플 앱을 만들었지만 비교적 적은 코드로 구하는 기능을 실현했기 때문에 Data Binding의 유용성을 확인할 수 있습니다.
여기에 더 좋은 방법이 있다면 댓글과 GitHub의 Pull Request에서 알려주세요.

참조 URL


참고하도록 허락해 주세요.정말 감사합니다.
  • Kotlin에서 데이터 바인딩 시 설정
    http://qiita.com/umetsu/items/487d38be86c31ff59075
  • Kotlin에서 데이터 Binding-ListView 편.
    http://qiita.com/kykomi/items/cb9020d37ae2b04af800
  • DataBinding을 사용하여 Layout(원본) 만들기
    http://tiro105.hateblo.jp/entry/2016/03/23/000500
  • 좋은 웹페이지 즐겨찾기