このページは Cloud Translation API によって翻訳されました。

Android Kotlin の基礎 05.3: ViewModel と LiveData によるデータバインディング

この Codelab は、Android Kotlin の基礎コースの一部です。Codelab を順番に進めていくと、このコースを最大限に活用できます。すべてのコース Codelab は Android Kotlin の基礎 Codelab ランディングページに掲載されています。

はじめに

このレッスンの前の Codelab では、GuessTheWord アプリのコードを改善しました。アプリは ViewModel オブジェクトを使用するようになったため、アプリデータは画面の回転やキーボードの可用性の変更などのデバイス構成の変更に耐えます。また、オブザーバブルな LiveData を追加しました。これにより、実測データが変更されるとビューが自動的に通知されます。

この Codelab では、引き続き GuessTheWord アプリを使用します。レイアウトのビューが ViewModel オブジェクトと直接通信するように、アプリの ViewModel クラスにビューをバインドします。（これまで、ビューはアプリのフラグメントを介して、ビューが ViewModel と間接的に通信していました）。データバインディングを ViewModel オブジェクトと統合すると、アプリのフラグメントにクリックハンドラは必要なくなるため、削除します。

また、LiveData オブザーバーメソッドを使用せずに、データバインディングソースとして LiveData を使用し、データの変更について UI に通知するように GuessTheWord アプリを変更します。

前提となる知識

Kotlin で基本的な Android アプリを作成する方法。
アクティビティとフラグメントのライフサイクルの仕組み
アプリで ViewModel オブジェクトを使用する方法
LiveData を使用して ViewModel にデータを保存する方法。
LiveData データの変化を観察するオブザーバーメソッドを追加する方法

学習内容

データバインディングライブラリの要素の使用方法。
ViewModel をデータバインディングと統合する方法。
LiveData をデータバインディングと統合する方法。
リスナーバインディングを使用して、フラグメント内のクリックリスナーを置き換える方法。
データバインディング式に文字列形式を追加する方法

演習内容

GuessTheWord レイアウトのビューは、UI コントローラ（フラグメント）を使用して ViewModel オブジェクトと間接的に情報をやり取りします。この Codelab では、ビューを ViewModel オブジェクトと直接通信するように、アプリのビューを ViewModel オブジェクトにバインドします。
LiveData をデータバインディングソースとして使用するようにアプリを変更します。この変更の後は、LiveData オブジェクトがデータの変更について UI に通知し、LiveData オブザーバーメソッドは不要になります。

レッスン 5 の Codelab では、スターターコードから GuessTheWord アプリを開発します。GuessTheWord は 2 人構成のキャラクタースタイルゲームで、プレーヤーが協力して最高スコアを獲得します。

1 人目のプレーヤーはアプリで単語を確認し、2 人目のプレーヤーに単語を表示しないように順番に実行します。2 人目のプレーヤーがその単語を推測します。

ゲームをプレイするには、最初のプレーヤーがデバイスでアプリを開き、以下のスクリーンショットに示すように「ギター」などの単語が表示されます。

1 人目のプレーヤーが単語を実際に操作し、単語そのものを言わないように注意します。

2 人目のプレーヤーが単語を正しく推測したら、[OK] ボタンを押すと、カウントが 1 つ増えて次の単語が表示されます。
2 人目のプレーヤーが単語を推測できない場合は、[スキップ] ボタンを押すと、カウントが 1 つ減って次の単語に進みます。
ゲームを終了するには、[ゲームを終了] ボタンを押します。（この機能は、シリーズの最初の Codelab のスターターコードにはありません）。

この Codelab では、ViewModel オブジェクトで LiveData とデータバインディングを統合して、GuesTheWord アプリを改善します。これにより、レイアウト内のビューと ViewModel オブジェクト間の通信が自動的に行われ、LiveData を使用してコードを簡素化できます。

タイトル画面

ゲーム画面

スコア画面

このタスクでは、この Codelab のスターターコードを見つけて実行します。前の Codelab で作成した GuessTheWord アプリをスターターコードとして使用することも、スターターアプリをダウンロードすることもできます。

（省略可）前の Codelab のコードを使用していない場合は、この Codelab のスターターコードをダウンロードします。コードを解凍し、Android Studio でプロジェクトを開きます。
アプリを実行して、ゲームをプレイします。
[OK] ボタンによって次の単語が表示され、スコアが 1 つ上がり、[Skip] ボタンによって次の単語が表示され、スコアが 1 つ減ります。[ゲームを終了] ボタンをクリックするとゲームが終了します。
すべての単語を順番に順番に見ていくと、アプリが自動的にスコア画面に移動することがわかります。

前の Codelab では、GessTheWord アプリのビューにアクセスするための型安全な方法としてデータバインディングを使用していました。しかし、データバインディングの真の力は、名前が示すように、データをアプリのビューオブジェクトに直接バインドすることです。

現在のアプリアーキテクチャ

アプリでは、ビューは XML レイアウトで定義され、そのビューのデータは ViewModel オブジェクトに保持されます。各ビューとそれに対応する ViewModel の間には、ビュー間のリレーとして機能する UI コントローラがあります。

次に例を示します。

[Got it] ボタンは、game_fragment.xml レイアウトファイルでは Button ビューとして定義されます。
ユーザーが [OK] ボタンをタップすると、GameFragment フラグメントのクリックリスナーが GameViewModel 内の対応するクリックリスナーを呼び出します。
スコアは GameViewModel で更新されます。

Button ビューと GameViewModel は、直接通信することはなく、GameFragment のクリックリスナーを必要とします。

データバインディングに渡される ViewModel

具体的には、レイアウト内のビューが ViewModel オブジェクトのデータと直接通信することで、UI コントローラを経由する仕組みが簡略化されます。

ViewModel オブジェクトは GuessTheWord アプリのすべての UI データを保持します。ViewModel オブジェクトをデータバインディングに渡すことで、ビューと ViewModel オブジェクト間の通信の一部を自動化できます。

このタスクでは、GameViewModel クラスと ScoreViewModel クラスを、対応する XML レイアウトに関連付けます。クリックイベントを処理するリスナーバインディングも設定します。

ステップ 1: GameViewModel のデータバインディングを追加する

このステップでは、GameViewModel を対応するレイアウトファイル game_fragment.xml に関連付けます。

game_fragment.xml ファイルで、GameViewModel 型のデータバインディング変数を追加します。Android Studio でエラーが発生した場合は、プロジェクトをクリーンアップして再ビルドします。

<layout ...>

   <data>

       <variable
           name="gameViewModel"
           type="com.example.android.guesstheword.screens.game.GameViewModel" />
   </data>
  
   <androidx.constraintlayout...

GameFragment ファイルで、GameViewModel をデータバインディングに渡します。

そのためには、前の手順で宣言した binding.gameViewModel 変数に viewModel を割り当てます。このコードは、viewModel の初期化後に onCreateView() 内に配置します。Android Studio でエラーが発生した場合は、プロジェクトをクリーンアップして再ビルドします。

// Set the viewmodel for databinding - this allows the bound layout access 
// to all the data in the ViewModel
binding.gameViewModel = viewModel

ステップ 2: イベント処理にリスナーバインディングを使用する

リスナーバインディングは、onClick()、onZoomIn()、onZoomOut() などのイベントがトリガーされたときに実行されるバインディング式です。リスナーバインディングはラムダ式として記述される。

データバインディングによってリスナーが作成され、ビューにリスナーが設定されます。Listened イベントが発生すると、リスナーがラムダ式を評価します。リスナーバインディングは、Android Gradle プラグインバージョン 2.0 以降で機能する。詳細については、レイアウトとバインディング式をご覧ください。

このステップでは、GameFragment のクリックリスナーを game_fragment.xml ファイル内のリスナーバインディングに置き換えます。

game_fragment.xml で、onClick 属性を skip_button に追加します。バインディング式を定義し、GameViewModel で onSkip() メソッドを呼び出します。このバインディング式はリスナーバインディングと呼ばれます。

<Button
   android:id="@+id/skip_button"
   ...
   android:onClick="@{() -> gameViewModel.onSkip()}"
   ... />

同様に、correct_button のクリックイベントを GameViewModel の onCorrect() メソッドにバインドします。

<Button
   android:id="@+id/correct_button"
   ...
   android:onClick="@{() -> gameViewModel.onCorrect()}"
   ... />

end_game_button のクリックイベントを GameViewModel の onGameFinish() メソッドにバインドします。

<Button
   android:id="@+id/end_game_button"
   ...
   android:onClick="@{() -> gameViewModel.onGameFinish()}"
   ... />

GameFragment で、クリックリスナーを設定するステートメントと、そのクリックリスナーが呼び出す関数を削除します。今後それらの鍵は不要です。

削除するコード:

binding.correctButton.setOnClickListener { onCorrect() }
binding.skipButton.setOnClickListener { onSkip() }
binding.endGameButton.setOnClickListener { onEndGame() }

/** Methods for buttons presses **/
private fun onSkip() {
   viewModel.onSkip()
}
private fun onCorrect() {
   viewModel.onCorrect()
}
private fun onEndGame() {
   gameFinished()
}

ステップ 3: ScoreViewModel のデータバインディングを追加する

このステップでは、ScoreViewModel を対応するレイアウトファイル score_fragment.xml に関連付けます。

score_fragment.xml ファイルで、ScoreViewModel 型のバインディング変数を追加します。このステップは、上記の GameViewModel のステップと似ています。

<layout ...>
   <data>
       <variable
           name="scoreViewModel"
           type="com.example.android.guesstheword.screens.score.ScoreViewModel" />
   </data>
   <androidx.constraintlayout.widget.ConstraintLayout

score_fragment.xml で、onClick 属性を play_again_button に追加します。リスナーバインディングを定義し、ScoreViewModel で onPlayAgain() メソッドを呼び出す。

<Button
   android:id="@+id/play_again_button"
   ...
   android:onClick="@{() -> scoreViewModel.onPlayAgain()}"
   ... />

ScoreFragment の onCreateView() 内で viewModel を初期化します。次に、binding.scoreViewModel バインディング変数を初期化します。

viewModel = ...
binding.scoreViewModel = viewModel

ScoreFragment で、playAgainButton のクリックリスナーを設定するコードを削除します。Android Studio にエラーが表示されている場合は、プロジェクトをクリーンアップして再ビルドします。

削除するコード:

binding.playAgainButton.setOnClickListener {  viewModel.onPlayAgain()  }

アプリを実行します。前と同じようにアプリが動作するはずですが、ボタンビューが ViewModel オブジェクトと直接通信するようになりました。ScoreFragment のボタンクリックハンドラを介してビューが通信しなくなりました。

データバインディングのエラーメッセージのトラブルシューティング

アプリでデータバインディングを使用する場合、コンパイルプロセスにより、データバインディングに使用される中間クラスが生成されます。アプリのコンパイルを試みると Android Studio で検出されないエラーがあるため、コードの記述中に警告や赤色のコードが表示されないことがあります。しかし、コンパイル時には、生成された中間クラスからの暗号エラーが発生します。

暗号化エラーメッセージが表示される場合:

Android Studio の [Build] ペインのメッセージをよく確認してください。末尾が databinding のビジネスは、データバインディングでエラーが発生しています。
レイアウト XML ファイルで、データバインディングを使用する onClick 属性のエラーを確認します。ラムダ式が呼び出す関数を見つけて、それが存在することを確認します。
XML の <data> セクションで、データバインディング変数のスペルを確認します。

たとえば、次の属性値の関数名 onCorrect() のスペルに注意してください。

android:onClick="@{() -> gameViewModel.onCorrectx()}"

XML ファイルの <data> セクションの gameViewModel のスペルミスにも注意してください。

<data>
   <variable
       name="gameViewModelx"
       type="com.example.android.guesstheword.screens.game.GameViewModel" />
</data>

Android Studio では、アプリをコンパイルするまでエラーが検出されず、コンパイラに次のようなエラーメッセージが表示されます。

error: cannot find symbol
import com.example.android.guesstheword.databinding.GameFragmentBindingImpl"

symbol:   class GameFragmentBindingImpl
location: package com.example.android.guesstheword.databinding

データバインディングは、ViewModel オブジェクトで使用される LiveData に適しています。これで、ViewModel オブジェクトにデータバインディングが追加されたので、LiveData を組み込む準備が整いました。

このタスクでは、LiveData オブザーバーメソッドを使用せずに、データバインディングソースとして LiveData を使用し、データの変更について UI に通知するように GuessTheWord アプリを変更します。

ステップ 1: game_fragment.xml ファイルに LiveData という単語を追加する

このステップでは、現在の単語のテキストビューを ViewModel の LiveData オブジェクトに直接バインドします。

game_fragment.xml で、word_text テキストビューに android:text 属性を追加します。

バインディング変数 gameViewModel を使用して、GameViewModel の LiveData オブジェクト（word）に設定します。

<TextView
   android:id="@+id/word_text"
   ...
   android:text="@{gameViewModel.word}"
   ... />

word.value を使用する必要はありません。代わりに、実際の LiveData オブジェクトを使用できます。LiveData オブジェクトには、word の現在の値が表示されます。word の値が null の場合、LiveData オブジェクトには空の文字列が表示されます。

onCreateView() の GameFragment で、gameViewModel を初期化した後、現在のアクティビティを binding 変数のライフサイクルオーナーとして設定します。これにより、上記の LiveData オブジェクトのスコープが定義され、レイアウト game_fragment.xml 内のビューを自動的に更新できるようになります。

binding.gameViewModel = ...
// Specify the current activity as the lifecycle owner of the binding.
// This is used so that the binding can observe LiveData updates
binding.lifecycleOwner = this

GameFragment で、LiveData word のオブザーバーを削除します。

削除するコード:

/** Setting up LiveData observation relationship **/
viewModel.word.observe(this, Observer { newWord ->
   binding.wordText.text = newWord
})

アプリを実行してゲームをプレイします。現在の単語は、UI コントローラのオブザーバーメソッドなしで更新されます。

ステップ 2: score_fragment.xml ファイルにスコア LiveData を追加する

このステップでは、LiveData score をスコアフラグメントのスコアテキストビューにバインドします。

score_fragment.xml で、android:text 属性をスコアテキストビューに追加します。text 属性に scoreViewModel.score を割り当てます。score は整数であるため、String.valueOf() を使用して文字列に変換します。

<TextView
   android:id="@+id/score_text"
   ...
   android:text="@{String.valueOf(scoreViewModel.score)}"
   ... />

ScoreFragment で、scoreViewModel を初期化した後、現在のアクティビティを binding 変数のライフサイクルオーナーとして設定します。

binding.scoreViewModel = ...
// Specify the current activity as the lifecycle owner of the binding.
// This is used so that the binding can observe LiveData updates
binding.lifecycleOwner = this

ScoreFragment で、score オブジェクトのオブザーバーを削除します。

削除するコード:

// Add observer for score
viewModel.score.observe(this, Observer { newScore ->
   binding.scoreText.text = newScore.toString()
})

アプリを実行してゲームをプレイします。スコアフラグメントのスコアが正しく表示され、スコアフラグメントにオブザーバーが表示されない点に注意してください。

ステップ 3: データバインディングで文字列形式を追加する

レイアウトでは、データバインディングに加えて文字列形式を追加できます。このタスクでは、現在の単語を書式設定して引用符を追加します。また、次の画像に示すように、スコア文字列を、Current Score の先頭に付けるようにします。

string.xml に、word と score のテキストビューをフォーマットする際に使用する次の文字列を追加します。%s と %d は、現在の単語と現在のスコアのプレースホルダです。

<string name="quote_format">\"%s\"</string>
<string name="score_format">Current Score: %d</string>

game_fragment.xml で、word_text テキストリソースの text 属性を更新して、quote_format 文字列リソースを使用します。gameViewModel.word を渡します。これは、現在の単語を引数として書式設定文字列に渡します。

<TextView
   android:id="@+id/word_text"
   ...
   android:text="@{@string/quote_format(gameViewModel.word)}"
   ... />

word_text と同様に score テキストビューの形式を設定します。game_fragment.xml で、score_text テキストビューに text 属性を追加します。文字列リソース score_format を使用します。これは、%d プレースホルダで表される 1 つの数値引数を取ります。このフォーマット文字列の引数として LiveData オブジェクト score を渡します。

<TextView
   android:id="@+id/score_text"
   ...
   android:text="@{@string/score_format(gameViewModel.score)}"
   ... />

GameFragment クラスの onCreateView() メソッド内で、score オブザーバーコードを削除します。

削除するコード:

viewModel.score.observe(this, Observer { newScore ->
   binding.scoreText.text = newScore.toString()
})

アプリをクリーンアップ、再ビルド、実行してから、ゲームをプレイします。現在の単語とスコアがゲーム画面で書式設定されます。

これで、LiveData と ViewModel をアプリのデータバインディングと統合しました。これにより、レイアウト内のビューとフラグメントでクリックハンドラを使用せずに ViewModel を直接通信できるようになりました。また、データバインディングソースとして LiveData オブジェクトを使用し、LiveData オブザーバーメソッドを使用せずに、データの変更について UI に自動的に通知しました。

Android Studio プロジェクト: GuessTheWord

データバインディングライブラリは、ViewModel や LiveData などの Android アーキテクチャコンポーネントとシームレスに連携します。
アプリのレイアウトは、アーキテクチャコンポーネントのデータにバインドできます。これにより、UI コントローラのライフサイクルを管理し、データの変更について通知できるようになります。

ViewModel データバインディング

データバインディングを使用して、ViewModel をレイアウトに関連付けることができます。
ViewModel オブジェクトは UI データを保持します。ViewModel オブジェクトをデータバインディングに渡すことで、ビューと ViewModel オブジェクト間の通信の一部を自動化できます。

ViewModel をレイアウトに関連付ける方法:

レイアウトファイルで、ViewModel 型のデータバインディング変数を追加します。

   <data>

       <variable
           name="gameViewModel"
           type="com.example.android.guesstheword.screens.game.GameViewModel" />
   </data>

GameFragment ファイルで、GameViewModel をデータバインディングに渡します。

binding.gameViewModel = viewModel

リスナーバインディング

リスナーバインディングは、onClick() などのクリックイベントがトリガーされたときに実行されるレイアウト内のバインディング式です。
リスナーバインディングはラムダ式として記述される。
リスナーバインディングを使用して、UI コントローラのクリックリスナーをレイアウトファイルのリスナーバインディングに置き換えます。
データバインディングによってリスナーが作成され、ビューにリスナーが設定されます。

 android:onClick="@{() -> gameViewModel.onSkip()}"

LiveData をデータバインディングに追加する

LiveData オブジェクトは、データバインディングソースとして使用して、データの変更について UI に自動的に通知できます。
ビューは ViewModel の LiveData オブジェクトに直接バインドできます。ViewModel の LiveData が変更されると、UI コントローラのオブザーバーメソッドなしで、レイアウトのビューが自動的に更新されるようになります。

android:text="@{gameViewModel.word}"

LiveData データバインディングが機能するように、現在のアクティビティ（UI コントローラ）を UI コントローラの binding 変数のライフサイクル所有者として設定します。

binding.lifecycleOwner = this

データバインディングによる文字列形式

データバインディングを使用すると、文字列には %s、整数には %d などのプレースホルダを使用して文字列リソースをフォーマットできます。
ビューの text 属性を更新するには、書式設定文字列の引数として LiveData オブジェクトを渡します。

 android:text="@{@string/quote_format(gameViewModel.word)}"

Udacity コース:

Kotlin による Android アプリの開発

Android デベロッパードキュメント:

このセクションでは、インストラクターが主導するコースの一環として、この Codelab に取り組む生徒の課題について説明します。教師は以下のことを行えます。

必要に応じて課題を割り当てます。
宿題の提出方法を生徒に伝える。
宿題を採点します。

教師はこれらの提案を少しだけ使うことができます。また、他の課題は自由に割り当ててください。

この Codelab にご自分で取り組む場合は、これらの課題を使用して知識をテストしてください。

次の質問に答えてください。

問題 1

リスナーバインディングの説明として正しくないものは次のうちどれですか。

リスナーバインディングは、イベントの発生時に実行されるバインディング式である。
リスナーバインディングは、Android Gradle プラグインのすべてのバージョンで機能する。
リスナーバインディングはラムダ式として記述される。
リスナーバインディングはメソッド参照に似ているが、任意のデータバインディング式を実行できる。

質問 2

アプリに次の文字列リソースが含まれているとします。
<string name="generic_name">Hello %s</string>

データバインディング式を使用して文字列をフォーマットする構文として、正しいものは次のうちどれですか。

android:text= "@{@string/generic_name(user.name)}"
android:text= "@{string/generic_name(user.name)}"
android:text= "@{@generic_name(user.name)}"
android:text= "@{@string/generic_name,user.name}"

問題 3

リスナーバインディング式は、どのようなときに評価され実行されますか。

LiveData で保持されているデータが変更されたとき
設定の変更によってアクティビティが再作成されたとき
onClick() などのイベントの発生時
アクティビティがバックグラウンドに移動したとき

次のレッスンを開始する: 5.4: LiveData 変換

このコースの他の Codelab へのリンクについては、Android Kotlin の基礎 Codelab ランディングページをご覧ください。

Android Kotlin の基礎 05.3: ViewModel と LiveData によるデータ バインディング コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

はじめに

前提となる知識

学習内容

演習内容

ステップ 1: GameViewModel のデータ バインディングを追加する

ステップ 2: イベント処理にリスナー バインディングを使用する

ステップ 3: ScoreViewModel のデータ バインディングを追加する

データ バインディングのエラー メッセージのトラブルシューティング

ステップ 1: game_fragment.xml ファイルに LiveData という単語を追加する

ステップ 2: score_fragment.xml ファイルにスコア LiveData を追加する

ステップ 3: データ バインディングで文字列形式を追加する

ViewModel データ バインディング

リスナー バインディング

LiveData をデータ バインディングに追加する

データ バインディングによる文字列形式

次の質問に答えてください。

問題 1

質問 2

問題 3

Android Kotlin の基礎 05.3: ViewModel と LiveData によるデータバインディング

ステップ 1: GameViewModel のデータバインディングを追加する

ステップ 2: イベント処理にリスナーバインディングを使用する

ステップ 3: ScoreViewModel のデータバインディングを追加する

データバインディングのエラーメッセージのトラブルシューティング

ステップ 3: データバインディングで文字列形式を追加する

ViewModel データバインディング

リスナーバインディング

LiveData をデータバインディングに追加する

データバインディングによる文字列形式