データバインディングを使ってみた

データバインディング(DataBinding)とは?

XMLなどのデータソースとアプリケーションやウェブページ(ウェブアプリケーション)のユーザインタフェースを静的または動的に結合する技術である。

(参照:データバインディング - Wikipedia

Androidにおけるそれは、レイアウトファイルにデータを定義し、そのデータに直接アクセスできるようにすることである。今回はData Binding Library | Android Developersを参考にデータバインディングを使ってみた。

 

build.gradle(Module: app)

まずは、データバインディングを使えるようにするためにbuild.gradle(Module: app)に下記を追加します。

android {
・・・
dataBinding {
enabled = true
}
}

これでデータバインディングを使えるようになります。

 

レイアウトファイル

データバインディング用のレイアウトファイルを作成する。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable name="User" type="com.example.myapplication.User"/>
</data>

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

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:text="name : "
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

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


<Button
android:id="@+id/button"
android:text="DataBinding"
android:onClick="@{User.onClickListener}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</layout>

 

データ要素にバインド対象のクラスを指定します。

    <data>
<variable name="User" type="com.example.myapplication.User"/>
</data>

 

"@{}"構文を使うことでTextViewがUserクラスのnameに設定されました。

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

 

クリックリスナーを設定することもできます。

<Button
android:text="DataBinding"
android:onClick="@{User.onClickListener}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

 

バインド対象のクラス

データバインディングの対象となるクラスを作成する。

今回はnameとonClickListenerを持つUserクラスとしました。

package com.example.myapplication;

import android.databinding.BaseObservable;
import android.databinding.Bindable;
import android.view.View;

public class User extends BaseObservable{
private String name;
private View.OnClickListener onClickListener;

public User(String name, View.OnClickListener onClickListener) {
this.name = name;
this.onClickListener = onClickListener;
}

public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}

@Bindable
public String getName() {
return name;
}

@Bindable
public View.OnClickListener getOnClickListener() {
return onClickListener;
}
}

 

バインドを可能にするためにBaseObservableを継承します。

public class User extends BaseObservable{

 

ゲッターに@Bindableをアノテーションを指定し、
セッターに通知できるようにします。

    @Bindable
public String getName() {
return name;
}

 

@Bindableをアノテーションを付与することでBRクラスが生成される。

続いてセッター側では、notifyPropertyChangedを用いて通知を行う。

    public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}

 

MainActivity

データバインディングを使うためのMainActivityを作成する。

package com.example.myapplication;

import android.databinding.DataBindingUtil;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.example.myapplication.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

private User mUser;
private ActivityMainBinding mBinding;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
mUser = new User("", new View.OnClickListener() {
@Override
public void onClick(View v) {
mUser.setName("山田太郎");
}
});
mBinding.setUser(this.mUser);
}
}

 

activity_main.xmlファイルの末尾に"Binding"がついたActivityMainBindingクラスが生成される。これがバインディングクラスとなる。

import com.example.myapplication.databinding.ActivityMainBinding;
    private ActivityMainBinding mBinding;

 

DataBindingUtil.setContentViewにactivity_main.xmlを指定する。

mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

 

Userクラスを宣言する。

Userクラスのnameには""(空文字)を指定し、onClickListenerにはクリックされたタイミングでnameを"山田太郎"とするように指定しました。

    private User mUser;
mUser = new User("", new View.OnClickListener() {
@Override
public void onClick(View v) {
mUser.setName("山田太郎");
}
});

 

実行

実行結果は以下のようになります。

f:id:tmyhri:20170312201327p:plain f:id:tmyhri:20170312201349p:plain

DATABINDINGボタンをクリックするとname:の横に山田太郎と表示されました。