🏀

【Android】データバインディングとは？なぜ使う？簡単な例を見てまとめ

2023/11/13に公開

Android

Databindingとは？

Androidですでに多く使われているDataBinding(データバインディング)は、簡単に言うとxmlファイルにDataを接続(binding)して使うようにサポートし、Android JetPackライブラリの一つの機能です。
つまり、データバインディングはアプリケーションロジックとレイアウトをバインディングするために必要なグルーコードを最小限に抑えます。

Databindingを使うと、findViewByIdを使わなくてもよく、通常MVVMパターンを具現する際に「LiveData」と一緒に必須的に使用します。

グルーコードとは？

プログラムの要求事項の実装には寄与しないが、本来互換性のない部分同士を結合するために作動するコード。

Databindingの簡単な使い方

コードはコトリンで進行します。

まず、サンプル用に作るアプリはメイン画面のTextViewに"Hello World!"が表示され、ButtonをClickするとTextViewに"Hello Databinding!"が出力されます。

まず、graddleで以下のセッティングを追加します。
kotlin-kapt pluginがインストールされていない場合は、そのセッティング値にマウスをのせておくとインストールしろとメッセージが表示されますので、インストールしてください。

android {
    ...
   dataBinding {    
 	   enabled true
   }
}

その後、データバインディングを設定するアクティビティビューのxmlに移動してソースを開きます。
最上段をlayoutタグで包みます。
既存のxmlソースを修正するのであれば、既存の最上段レイアウト(例。ConstraintLayoutなど)を"layout"のすぐ下に置いてください。
その後、イベントを作成する際、参照するデータバインディング変数名が必要ですので、データ、vairableタグを追加し、nameには変数名を、typeにはデータバインディングによるイベントをセットする(パッケージ名+アクティビティ名またはフラグメント名)を書いてください。

1.MainActivityでTextViewのみButtonを追加したConstraintLayoutのxmlです。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout     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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/hello_text_view"
        android:text="Hello!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
  
    <Button
        android:id="@+id/btn_change"
        android:text="Text Change!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/hello_text_view"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2.最上段のConstraint Layoutをlayoutの下に置きます。そしてデータ、variableを追加します。

<?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">
  
    <data>
      <variable
         name="main"
         type="com.joel.jojo.MainActivity"/>
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/hello_text_view"
            android:text="Hello!"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
      
        <Button
            android:id="@+id/btn_change"
            android:text="Text Change!"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/hello_text_view"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

3.セットしたxmlのアクティビティソースに移動します。

class MainActivity : AppCompatActivity() {
    // ファイル名がキャメルケースでクラスが自動生成されます。
    private lateinit var binding: ActivityMainBinding

    var text = "Hello!"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // binding セッティング
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        // bindingしたxml의のvariableの名前
        binding.main = this
        // bindingボタンクリックイベント
        binding.btnChange.setOnClickListener {
            text = "Hello Binding!"
            // データが変わる場合、バインディングされたViewにデータの変化を知らせる。
            binding.invalidateAll()
        }
    }
}

Databindingを使う理由

上記のサンプルコードは、簡単にどのような形式で使っているかを見る例です。
単純に一つのTextViewを使ってTextをバインディングするので、何で使うかと思っちゃいますが、xmlにDTOまたはデータセットクラスをBindして、そのクラスが変更されると、接続されたいくつかのViewが一度に変更されるので、とても楽になります。
また、DatabindingのようにBindingAdapterを利用してImageViewにGlide、Frescoのようなイメージローディングライブラリを利用してイメージを出力しやすく、LiveDataを使用すると、Dataがリアルタイムで変更されるのでViewも一緒に変更されるます。
そのため、MVMパターンの実装に非常に便利になります。

また、RecyclerViewでそれぞれのitemをセットする作業もxmlですべて書いてくれれば、自分で値が入るなど使う理由がたくさんあります。