SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

一歩進んだAndroidアプリ開発ができる「Android Jetpack」入門

画面へのデータ反映処理を自動化できるデータバインディング! 監視オブジェクトやLiveDataの利用方法を紹介

一歩進んだAndroidアプリ開発ができる「Android Jetpack」入門 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

双方向データバインディング

 前節で紹介した監視オブジェクトを利用すると、双方向データバインディングを実現できます。

双方向データバインディング用サンプル

 ここで、サンプルを、双方向データバインディング用に変更します。新しいサンプルの画面は、図2のようなものです。

図2:縦の長さと横の長さを入力できるアプリの画面
図2:縦の長さと横の長さを入力できるアプリの画面

 ここまでのサンプルでは、縦の長さと横の長さは、それぞれ乱数で発生させるものでした。その表示欄を入力欄に変更し、ボタンをタップすると乱数で発生させた値を表示させます。一方、入力欄の値も直接変更でき、もちろん、変更した値で面積が自動計算されるようになります。このような場合、前節で利用したMainViewModelをバインドした上で、そのMainViewModel内で保持したRectangleを監視オブジェクトとするパターンをもちろん利用します。

 ただし、そのRectangleに入力された縦の長さや横の長さが画面に入力されたと同時にエンティティに格納し、さらには、格納されたデータをもとに新たに計算された面積を自動的に表示する必要があります。つまり、ViewModelで保持されたデータと画面の入力欄のデータを双方向で連動させる必要があります。データバインディングでは、この双方向のデータバインディングにも対応しています。

レイアウトxmlでの双方向データバインディングの設定

 このような双方向データバインディングを実現するには、レイアウトxmlの記述を、リスト6のようにします。

リスト6:双方向データバインディングの設定コード
<?xml version="1.0" encoding="utf-8"?>
<layout
     :
    <EditText
      android:id="@+id/etHeight"
      :
      android:text="@={mainViewModel.rectangle.heightStr}"/>  (1)
     :
    <EditText
      android:id="@+id/etWidth"
      :
      android:text="@={mainViewModel.rectangle.widthStr}"/>  (2)
      :
  </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 リスト6では省略していますが、MainViewModelを直接バインドするものとします。そして、その中のRectangleオブジェクト、つまり、mainViewModel.rectangleのheightStrプロパティやwidthStrプロパティと双方向データバインディングを行う場合、(1)や(2)のように、@={}の形式でそれらのプロパティを記述します。=が増えているところがポイントです。これだけで、縦の長さなら、etHeightのEditTextのデータとmainViewModel.rectangle.heightStrの値が連動するようになります。横の長さに関しても同様です。

エンティティにはセッタとゲッタの両方を定義

 ただし、MainViewModelで保持しているRectangleオブジェクトが、リスト2のままならば、@={}を記述しても双方向データバインディングとはなりません。そもそも、レイアウトxmlファイル上でエラー表示となります。その原因は、リスト2のRectangleクラスには、heightStr、および、widthStrのセッタが存在しないからです。これは、もちろん、Javaではリスト7の、Kotlinではリスト8のセッタをRectangleクラスに追記することで解決します。これらのコードとしては、特に解説は不要でしょう。

リスト7:Rectangleクラスへのセッタの追記(Java版)
public class Rectangle extends BaseObservable {
    :
  @Bindable
  public void setHeightStr(String heightStr) {
    if(!heightStr.equals("")) {
      int height = Integer.valueOf(heightStr);
      setHeight(height);
    }
  }
  @Bindable
  public void setWidthStr(String widthStr) {
    if(!widthStr.equals("")) {
      int width = Integer.valueOf(widthStr);
      setWidth(width);
    }
  }
}
リスト8:Rectangleクラスへのセッタの追記(Kotlin版)
public class Rectangle extends BaseObservable {
    :
  @Bindable
  fun setHeightStr(value: String) {
    if(value != "") {
      val valueInt = value.toInt()
      height = valueInt
    }
  }
  @Bindable
  fun setWidthStr(value: String) {
    if(value != "") {
      val valueInt = value.toInt()
      width = valueInt
    }
  }
}

LiveDataの利用

 最後に、監視オブジェクトの代わりにLiveDataが利用できることも紹介しておきましょう。

ViewModelのフィールドをMutableLiveDataにする

 LiveDataを利用する場合は、MainViewModelのフィールドを、リスト9の(1)のように、MutableLiveDataとし、その内部で保持するデータ型、すなわち、ジェネリクスとしてRectangleを指定します。このRectangleクラスは、前回のリスト2と同内容で問題ありませんし、finalを外してミュータブルエンティティとしてもかまいません。

リスト9:LiveDataをフィールドとしたMainViewModelクラス(Java版)
public class MainViewModel extends ViewModel {
  MutableLiveData<Rectangle> _liveRectangle = new MutableLiveData<>();  // (1)
  public void generateNewHeight() {
    :
    _liveRectangle.setValue(rectangle);  //  (2)
  }
  :
}

 Kotlinコードでは、リスト10のようになります。

リスト10:LiveDataをフィールドとしたMainViewModelクラス(Kotlin版)
class MainViewModel : ViewModel() {
  val liveRectangle: MutableLiveData<Rectangle> = MutableLiveData()  // (1)
  fun generateNewHeight() {
    :
    liveRectangle.value = rectangle  //  (2)
  }
  :
}

 あとは、このMainViewModelに_liveRectangleのゲッタを記述しておくだけで、レイアウトxmlでは、以下の記述でフィールドのLiveData内のRectangleのheightStrプロパティにアクセスできます。

@{mainViewModel.liveRectangle.heightStr}

LiveDataを利用する場合の注意点

 ただし、LiveDataを監視オブジェクトの代わりとして利用する場合には注意が必要です。まず、LiveDataはその性質上、リスト9やリスト10の(2)のように、LiveDataのsetValue()メソッド(Javaコード)、あるいは、valueプロパティ(Kotlinコード)で新たなデータをセットしない限り、画面上の表示が変更されません。

 また、アクティビティでバンディングオブジェクトに対してライフサイクルオーナーを登録する必要があります。これは、Javaでは以下のようなコードとなります。

activityMainBinding.setLifecycleOwner(MainActivity.this);

 また、Kotlinでは、以下のようなコードとなります。

activityMainBinding.lifecycleOwner = this@MainActivity

まとめ

 Android Jetpackについて紹介していく本連載の第8回は、いかがでしたでしょうか。

 今回は、3回にわたって紹介するデータバインディングの最後として、監視オブジェクト、双方向データバインディング、LiveDataの利用を紹介しました。

 次回は、WorkManagerを紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
一歩進んだAndroidアプリ開発ができる「Android Jetpack」入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook<個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18826 2024/01/11 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング