【Android】RecyclerView のリスト表示を MVVM パターン+ DataBinding で実装する
今回やること
タイトルどおり、RecyclerView をMVVM パターン+ DataBinding で実装してみたいと思います。
前回の記事では双方向バインディングのサンプルアプリを作ってみました。これは Text 型の LiveData を TextView にバインドして、値が変わったら自動的に画面に反映するような実装でした。これと同じようなことを RecyclerView でやろうとすると、BindingAdapter の実装などちょっとした工夫が必要です。
BindingAdapter を使えがば RecyclerView に対して「この値が変わったら画面を更新してね!」と指示を出すことができます。つまり、これまで findViewById()
で取得したビューをゴニョゴニョしていた処理を書かなくて済むので、少し幸せになれます。
今回はやることをざっくり言うとこんな感じです。
- ViewModel に RecyclerView で表示したいリストアイテムを持たせる
- レイアウトファイル内で RecyclerView にリストアイテムをバインドする
- クリックでリストアイテムの中身を変更するボタンを設置(API に問い合わせる想定)
- リストアイテムの変更で自動的に画面も変更!!
見た目は普通の RecyclerView です。
ソースファイルはこちらで公開してます。
最終的なディレクトリ構造
参考までに最終的なディレクトリ構造を載せておきます。
実装手順
1. 新しいプロジェクトを作成
まずは Empty Activity で新しいプロジェクトを作成します。
2. Gradel ファイルを編集
build.gradle (Module: app)
を編集してデータバインディングの有効化とライブラリの追加を行います。
apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' apply plugin: 'kotlin-kapt' // 追加 android { ... // dataBinding を有効化 dataBinding { enabled = true } } dependencies { ... // ViewModel と LiveData のライブラリを追加 def lifecycle_version = "2.2.0" implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version" implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version" }
3. ViewModel、User モデルクラスを作成
次に ViewModel と User モデルクラスを作成します。
UserViewModel という名前で Kitlin ファイルを作成して以下のとおり編集します。
/** * User モデルクラス */ data class User(var name: String) /** * User の情報を保持する ViewModel。 */ class UserViewModel : ViewModel() { // クラス内部で扱う LiveData は変更可能な形式で保持する。 private val _users: MutableLiveData<List<User>> = MutableLiveData() // クラス外部に公開する LiveData は変更不可な形式で保持する。 val users: LiveData<List<User>> = _users // 初期値として10人分のユーザー情報を LiveData に突っ込む。 init { val names = listOf( "一郎", "二郎", "三郎", "四郎", "五郎", "六郎", "七郎", "八郎", "九郎", "十郎" ) val users = names.map { name -> User(name) } _users.value = users } /** * API 通信してユーザー情報を取ってくることを模した関数。 * 今回は通信せずにリストをシャッフルする仕様にしている。 */ fun fetchUsers() { val shuffled = _users.value?.shuffled() _users.value = shuffled } }
4. レイアウトファイルを作成、編集
activity_main.xml
リストの中身を更新するためのボタンと RecyclerView を設置します。
<?xml version="1.0" encoding="utf-8"?> <!-- データバインディングを行うため、ルートを layout タグにする。 --> <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"> <!-- レイアウトファイル内で使う変数を data タグの中で定義する。 --> <data> <!-- 変数 viewModel を定義する。 --> <variable name="viewModel" type="com.example.bindingadaptersample.UserViewModel" /> </data> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- ボタンクリックで UserViewModel#fetch を発火させる。 --> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="@{() -> viewModel.fetchUsers()}" android:text="FETCH!" /> <!-- BindingAdapter を利用して users という属性を自作している。 --> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:users="@{viewModel.users}" tools:context=".MainActivity" /> </LinearLayout> </layout>
row_user_list.xml
リスト1行分のレイアウトファイルを新規作成します。
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:id="@+id/user_name" android:layout_width="wrap_content" android:layout_height="80dp" android:gravity="center_vertical" android:padding="8dp" android:textSize="30sp" android:textStyle="bold" /> </layout>
5. リストアダプターを作成
UserListAdapter という名前で Kotlin ファイルを追加して以下のとおり編集します。
/** * ユーザーリスト用の Adapter。 */ class UserListAdapter( private var users: List<User>, private val owner: LifecycleOwner ) : RecyclerView.Adapter<UserListAdapter.UserViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder { val binding: RowUserListBinding = DataBindingUtil.inflate( LayoutInflater.from(parent.context), R.layout.row_user_list, parent, false ) return UserViewHolder(binding) } override fun onBindViewHolder(holder: UserViewHolder, position: Int) { val user = users[position] holder.binding.apply { userName.text = user.name lifecycleOwner = owner } } override fun getItemCount(): Int { return users.size } /** * リストの中身を更新する。 */ fun update(users: List<User>) { this.users = users notifyDataSetChanged() } /** * ユーザーリスト用の ViewHolder。 */ inner class UserViewHolder(val binding: RowUserListBinding) : RecyclerView.ViewHolder(binding.root) }
6. BindingAdapter を作成
UserListAdapters という名前で Kotlin ファイルを追加して以下のとおり編集します。
RecyclerView を拡張した関数なので adapter
が取得できます。ただし、もし複数の RecyclerView に対して app:users="@{xxx}"
を設定していた場合、それがどの RecyclerView なのか判別する必要があります。そのために when()
で型をチェックしてから adapter.update()
を実行しています。
object BindingAdapters { /** * RecyclerView の拡張関数を定義。 * レイアウトファイル内で users という属性を設定できるようにする。 */ @BindingAdapter("users") @JvmStatic fun RecyclerView.bindUsers(users: List<User>?) { users ?: return // adapter が UserListAdapter ならリスト情報をアップデートする。 when (val adapter = this.adapter) { is UserListAdapter -> adapter.update(users) } } }
7. MainActivity を編集
最後の仕上げに MainActivity を編集します。
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // UserViewModel を取得。 val viewModel = ViewModelProvider(this).get(UserViewModel::class.java) // gradle ファイルで DataBinding を有効にするとバインディングクラスが自動生成される。 val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main) binding.also { it.viewModel = viewModel // レイアウトファイルで定義した viewModel にバインド。 it.lifecycleOwner = this } val users = viewModel.users.value ?: listOf() val adapter = UserListAdapter(users, this) val manager = LinearLayoutManager(this) val decoration = DividerItemDecoration(this, manager.orientation) binding.recyclerView.also { it.adapter = adapter it.layoutManager = manager it.addItemDecoration(decoration) // リストアイテム間に境界線をつける。 } } }
処理の流れ
画面が更新される流れをざっくり表すと以下のようになります。
- ボタンをクリック
UserViewModel#fetch
が発火- UserViewModel のメンバ変数
users
の値が変化 - 値の変化を検知して
RecyclerView#bindUsers()
が発火 UserListAdapter#update()
が発火して画面を更新
今回は参考になる記事が少なく少し苦労しましたが、とても便利そうなのでどんどん使っていきたいと思います。