Android

KotlinでAndroidの双方向DataBindingを利用する

投稿日:2017年7月19日 更新日:

はじめに

今回は、AndroidのDataBindingをKotlinで実装する方法について、記事を書きたいと思います。AndroidのDataBindingについての概要はAndroid Developerサイトなどを参照いただければと思いますが、MVVMのアーキテクチャでAndroidを実装する場合は、非常に威力を発揮し、開発が捗ること間違いなしです。

最初は、色々と戸惑いがあるかもしれませんが、一度DataBaindingを利用するともうDataBindingなしでは開発はできなくなるでしょう!

 

MVVMアーキテクチャ

まずは、簡単にMVVMアーキテクチャについて、説明しておきます。

MVVMは、Model-View-ViewModelの略になります。Wikipediaからの引用させていただくと各層で下記のような役割となっています。

Model

アプリケーションのドメイン(問題領域)を担う、そのアプリケーションが扱う領域のデータと手続きを表現する要素である。

View

アプリケーションの扱うデータをユーザーが見るのに適した形で表示し、ユーザーからの入力を受け取る要素である。ViewModelに含まれたデータをデータバインディング機構のようなものを通じて自動的に描画するだけで自身の役割を果たす。ActivityやFragmentがこの部分に該当します。

ViewModel

Viewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。Viewとの通信はデータバインディング機構のような仕組みを通じて行うため、ViewModelの変更は開発者から見て自動的にViewに反映される。

これから紹介するAndroid DataBindingとは、上記にあるデータバインディング機構の一つとなります。

 

KotlinでAndroid DataBindingを設定

まずは、DataBindingの設定の前に、Android StudioでKotlinで実装できるようにしましょう。こちらの記事に設定方法がありますので、ご参照ください。

次にDataBindingの設定についてです。設定として、「app/build.gradle」に3箇所だけ追記して、「Sync Now」をするだけです。※追記箇所は下記にコメントで記載しています。

説明用のサンプルアプリについて

DataBindingを説明するにあたり、1つのEditTextと1つのTextViewだけのアプリを作ります。EditTextに文字を入力するとTextViewにEditTextの文字数がカウントされるだけのアプリです。

実装対象のファイルはたったの3つです。とてもシンプルですが、DataBindingの概要を掴むには問題ないと思います。

  • activity_main.xml(View)
  • MainActivity.kt(View)
  • MainViewModel.kt(ViewModel)

activity_main.xmlの実装

いきなりですが、コードです。ポイントは大きく3つあり、それぞれについて説明します。

従来のlayout xmlをlayoutタグで囲む

これはそいうものだと思って、layoutタグで囲んでください。後述しますが、こうすることで、AcitivityやFragmentなどから変数を使って、layoutにアクセスできるようになります。

dataタグ内のvariableタグにViewModelのクラスを指定する

type属性にViewModelのクラスを、name属性にxml内でアクセスする際に使う変数名を指定してください。後述しますが、ActivityやFragmentから実際にインスタンスを紐付けします。

タグ属性にViewModelのプロパティを設定する

ViewModelでのプロパティに変更があった場合に、Viewにもその変更を反映したい場合は、下記のように指定してください。(一方向)

今回の場合は、EditTextに入力された文字数をViewModelから通知してもらう必要があるので、下記の部分で設定されています。

ユーザからの入力をViewからViewModelへ通知したい場合は、双方向にする必要があり、下記のように指定します。一方向との違いは、=があるかないかです。EditTextにユーザが入力した値をViewModelに通知するために双方向である必要があります。

 

MainActivity.ktの実装

コードです。ポイントは大きく2つあり、それぞれについて説明します。

DataBindingインスタンスの取得

Activityとlayout xmlの関連付けには従来は、コメントアウトされているようにsetContentViewメソッドを利用していました。DataBindingでは、setContentViewメソッドではなく、DataBindingUtilを利用します。

前述の通りlayoutタグを親とするlayout xmlを記述するとActivityMainBindingクラスというxmlファイル名に沿った名前のクラスが自動生成されますので、下記のようにインスタンスを取得します。(生成されない場合は、一度[Build]-[Rebuild Project]を実行してください)

ViewModelインスタンスの設定

DataBindingのインスタンスが取得できたら、下記のようにViewModelのインスタンスを設定して、関連付けをしてください。

 

MainViewModel.kt

コードです。ポイントは大きく2つあり、それぞれについて説明します。

 

Viewに変更を通知する

@get:Bindableを指定したプロパティは、xlayout xmlの属性に指定することで、Viewに反映させることができます。今回の場合は、messageLengthがそれにあたり、前述のTextViewに指定されているものになります。

また、下記で説明しますが、messageLengthに変更があったことを通知することで、Viewにも即座に反映させることができます。

Viewからの変更の通知を受けて、さらにViewにも変更を通知する

@Bindableを指定したプロパティは、Viewからの変更の通知を受け取ることもできます。(双方向)今回の場合は、messageEditTextプロパティになり、前述のEditTextに指定されているものになります。

ユーザがEditTextに文字を入力すると、messageEditTextプロパティのsetterが呼ばれます。そのsetterないで、messageLengthにも変更があったことを通知することで、ViewのTextViewにも変更内容(messageEditText.length)が反映されます。

 

さいごに

いかがでしたでしょうか。かなり単純な内容ではありますが、DataBindingの利便性が少しは理解できたのではないでしょうか。DataBindingはここで紹介したもの以外にも多くのことができますので、さらに詳しく知りたい方はAndroid Developerサイトで一読してみると良いと思います。

また、DataBindingを組み込むとコンパイルエラー時にどこで、なぜエラーとなっているのかがわかりにくい場合があります。その際は、こちらの記事でエラー内容の出力設定をしてみてください。

ぜひ、Kotlin + DataBindingで快適なAndroid開発ライフをお過ごしください。

blog-page_footer_336




blog-page_footer_336




-Android
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Kotlin】Glideで角丸の画像を作成する

1 はじめに2 使用するライブラリのインポート3 Glideで画像を読み込む4 オプションまとめ5 さいごに6 おすすめ書籍 はじめに こんにちは。miyagawaです。 今回はGlideを使って角丸 ...

[Android] Firebase ML Kit勉強会に参加してきました

1 はじめに2 Firebase ML Kitとは3 準備するもの4 動かすまでの手順4.1 gradleのsyncがうまくいかない場合5 テキスト認識を試してみる6 画像のラベル付けを試してみる7 ...

【Kotlin】FirebaseAuthenticationでGoogle・Facebook連携する

1 はじめに2 Firebaseプロジェクトの設定3 build.gradleに追記4 Googleログイン5 Facebookログイン6 さいごに7 参考8 おすすめ書籍 はじめに はじめまして。m ...

Flutterでテストコードを書こう! 単体テスト・Widgetテスト・インテグレーションテスト

1 はじめに2 単体テスト2.1 testパッケージの利用2.2 テストの書き方2.3 テストの実行2.4 モック化2.4.1 mockitoの導入2.4.2 メソッドのモック化3 Widgetテスト ...

【Kotlin】RecyclerViewAdapterを使ってリスト表示

1 はじめに2 GradleファイルにRecyclerViewの設定を追加する3 レイアウトファイルの作成4 Adapterクラスの追加5 Activityファイルへの追加6 さいごに7 おすすめ書籍 ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。