techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

DataBindingで双方向バインディングしてみる

Motivation

色々調べ物をしつつ、お試しを書いてたらこんな事できたよ!と書いておく。
実際にどんなところで良いことがあるのかはわかんない。

つくるもの

EditTextにテキストをインプットすると、そのままTextViewにテキストがインプットされる双方向バインディングを試してみる。 DataBindingが利用できないと、テキストのWatcherを拾ってTextViewにテキストを描画していくようなことをしないといけない。 これがどれだけ簡単になるのかに着目してみてほしい。

f:id:kobashin__G:20160519012626p:plain

上部のEditTextにテキストを入力すると、下部のTextViewにテキストがそのままアウトプットされる。

layoutの編集

上のスクリーンショットの通りに、EditTextとTextViewを置いたLayoutを作成する。

ポイントは22行目と31行目。 22行目の方ではView→Dataクラスへのgetterを設定している。EditTextのテキスト部に入力されたテキストがSampleModel.textInputに入力される。 31行目はインプットされたものをViewへ反映している。ただ常時反映はxmlのみの記述ではできないので、Dataクラス側でBaseObservableと@Bindableを利用する。

Dataクラスの編集

SampleModel.textInputの変更とともに、Viewへの反映がされるように下記設定を行う。

textInputのgetterに@Bindableを設定し、setter内でnotifyPropertyChangedを呼び出して即変更の反映を要求する。

これで双方向バインディングが設定できる。
冒頭に書いた通り、DataBindingを使わないときと比較すると、ほとんどコードを書かなくてもすんでいる。 setterの方の拡張はドキュメント見つかるのだけど、getterの方(@={}の方)はドキュメントが見当たらない。 こっちを柔軟に設定できるようになると、ホントに強力なので注視していきたい。

サンプルコードはこちら。

github.com