DataBindingチュートリアル第1回 – 基礎編

2020年5月4日 12:36

DataBinding

Data Bindingとは、Google IO 2015で発表された技術で、モデルオブジェクトとレイアウトを結びつける仕組みです。（Bindingとは”結びつける”という意味です）
Data Bindingを使うと「Kotlinのコード側でViewに文字列を設定する」という従来のスタイルが、「レイアウト側がモデルを受け取って中身をViewに展開する」というコーディングスタイルに代わります。

私がData Bindingを使い始めて感じたメリットには以下のようなものがあります。

- Kotlinコード側ではロジックに関する記述の閉める割合が大きくなり、クラスの目的がよりはっきり見えるようなコードを書くことができる

- Viewクラスのメンバー変数の宣言とfindViewByIdでViewオブジェクトを取得する大量のコードがなくなるのでOnCreateの中が読みやすくなる

- 非同期的に取得した値をViewに表示するコードもすごくスッキリとしたものになる

実際はもっとたくさんのメリットがあると思いますが、まず同じメリットをみなさんにも体験してもらいたいと思いますので、簡単なチュートリアルから始めたいと思います。
（今回使うサンプルコードは↓↓からダウンロードできます。）

セットアップ

appモジュールのbuild.gradleファイルに以下のようにdataBinding{enabled=true}を足します。

android {
   ....
   dataBinding {
       enabled = true
   }
}

レイアウトの変更

このサンプルでは、ユーザーの名前をTextViewに出力するだけのアプリを作って見ますので、本来であれば下のようなレイアウトを定義します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   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"
   tools:context=".MainActivity"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <TextView android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="User Name"
       android:id="@+id/username"/>
</LinearLayout>

Data Bindingを使うためにはここからレイアウトの構造を変化させます。まず今までのレイアウトを<layout>タグで囲みます。次に先頭に新たに<data>というタグを足します。ここで<data>タグの中にuserというメンバーを定義します。見慣れない書き方ですがJavaのコードでUserクラスのメンバー変数"user"を宣言するのと同じです。

<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">

<data>
   <variable
       name="user"
       type="com.goldrushcomputing.databindingtutorial.model.User"/>
</data>

<LinearLayout
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <TextView android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@{user.name}"/>
</LinearLayout>
</layout>

ここまでの作業で、Viewの中からuserというメンバーのデータにアクセスできるようになります。 TextViewの中でユーザーの名前をtextに設定するためにandroid:text="@{user.name}"のような表記を書きます。これで、userの中のname変数に入っている文字列をTextViewのTextとして表示することができます。 type="com.goldrushcomputing.databindingtutorial.model.User"のところは、モデルクラスのフルパスを指定しないと行けないところを注意しましょう。

データオブジェクトの用意

上のレイアウトで定義したUserクラスは下のようにdata classで定義します。

package com.goldrushcomputing.databindingtutorial.model

data class User(
   var name: String
)

MainActivity

これで、レイアウトとモデルの準備ができました。最後にMainActivityを見ていきます。

class MainActivity : AppCompatActivity() {
   private lateinit var binding: ActivityMainBinding

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

       val user = User("Benjamin")
       binding.user = user
   }
}

Data Bindingを使うにはthis.setContentView(R.layout.activity_main)の代わりにDataBindingUtilのsetContentViewを使います。
するとActivityMainBindingというクラスのオブジェクトが取得できます。
先ほどレイアウトファイル(activity_main.xml)を<layout>タグの中に入れると自動的にこのレアアウトファイル名からBindingクラスが作られます。クラス名は、

1 先頭を大文字にする: activity -> Activity
2 アンダースコアの後の文字を大文字にする: _main -> _Main
3 アンダースコアを取り払う:_Main -> Main
4 最後に'Binding'という文字列をつける: ActivityMain -> ActivityMainBinding

つまり

activity_main -> Activity_main -> Activity_Main -> ActivityMain -> ActivityMainBinding

という風にルールが適用されてBindingクラスができます。このBindingオブジェクトはレイアウトファイルそのものをオブジェクト化したものだと考えてください。先ほど、ここに<data>というタグの領域を作り、その中にuserという変数を定義しました。

ここに、bindingオブジェクトはレイアウトファイルそのもの、ということで実際のユーザーデータを下のように代入できます。

val user = User("Benjamin")
binding.user = user

bindingオブジェクトにuserをセットしているので、下のようにViewのタグ内でオブジェクトから取ってきたデータをそのまま表示できるようになります。

<TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.name}"/>

Data Bindingの素晴らしいところはモデルをアップデートするとViewに反映されるところです。このケースでは、userというオブジェクトをbindingに設定すると自動的にTextViewのレンダリングが起き、最新のuserの名前が表示されます(これは次回詳しく説明します。)

実行結果

実行すると以下のようにユーザー名の表示ができました。

これはもっとも単純なData Bindingの例です。ただ、Data Bindingを導入するときは、gradleも、レイアウトファイルも、Activityファイルも従来のものに変更を加える必要があるのでこのようなシンプルなもので一度成功をしてから次のステップに進んだ方が良いと思いこのようなシンプルなサンプルにしました。次回以降Data Bindingの応用例を説明していきたいと思います。

第２回 - DataBindingチュートリアル第2回 – アクションのバインディングはこちら↓

https://note.com/mizutory/n/n22c2a94a2106

GitHub

DataBindingTutorialのコードはこちらのGitHubでも公開しています。

今回のサンプルはコミットハッシュ

84e38c49f877c12d3d06db152a82a7740ccd9a7b

で保存してあります。