Android Kotlin基礎講座 03.2: ナビゲーションパスを定義する

タスク：条件付きナビゲーションを追加する

このステップでは、条件付きナビゲーションを追加します。これはユーザーに特定の条件下でのみ動作するように設定されるナビゲーションです。一般的な条件付きナビゲーションの使われ方としては、ユーザーがログインしているかどうかによってアプリに異なる表示をさせるなどといった具合です。

今回作成するアプリでは、ユーザーが全ての問題に正確に答えたかどうかで異なるフラグメントに遷移させるようにします。

スターターコードには条件付きナビゲーションを使うために、以下の二つのフラグメントが用意されています。

GameWonFragmentは”Congratulations!”と表示する画面へ遷移させます。
GameOverFragmentは”Try Again”と表示する画面へ遷移させます。

ステップ1：ナビゲーショングラフにGameWonFragmentとGameOverFragmentを追加する

navigation.xmlファイルを開いてください。navigationフォルダーの中にあります。
ナビゲーションエディターのNew Destinationボタンをクリックしてfragment_game_overを選択してください。
レイアウトエディターのプレビューエリアで、gameOverFragmentをgameFragmentの右側にド
ラッグして被らないようにしてください。アトリビュートパネルからIDをgameOverFragmentに変更してください。
同様に、fragment_game_wonも追加してください。
gameWonFragmentが被らないようにgameFragmentの右側にドラッグして、IDをgameWonFragmentに変更してください。

レイアウトエディターは以下のようになっているはずです。

ステップ2：ゲームフラグメントをゲーム結果フラグメントに接続する

このステップではゲームフラグメント(gameFragment)をgameWonFragmentとgameOverFragmentの両方に接続します。

レイアウトエディターのプレビューエリアで丸い接続点が表示されるまでカーソルをgameFragmentに置いてください。
接続点をクリックしてgameOverFragmentにドラッグしてください。gameFragmentとgameOverFragmentを接続するアクションを意味する青い接続線が表示されます。
同様に、gameFragmentからgameWonFragmentに接続するアクションを作成してください。レイアウトエディターは以下のようになります。
プレビューでgameWonFragmentにつながる線をクリックしてください。アクションのIDが自動で設定されていることを確認してください。

ステップ3：フラグメントを次のフラグメントに遷移させるコードを追加する

GameFragmentはゲーム用の問題の答えを含んでいるfragmentクラスです。またこのクラスにはユーザーがゲームをクリアしたのか、失敗したのかを判定するロジックも含みます。ユーザーがゲームをクリアしたのか、失敗したのかに応じて遷移先を決定する条件付きナビゲーションをGameFragmentクラスに追加する必要があります。

GameFragment.ktファイルを開いてください。onCreateView()メソッドが以下のゲームのクリア判定をするif/else文を含んでいます。

binding.submitButton.setOnClickListener @Suppress("UNUSED_ANONYMOUS_PARAMETER")
        { 
              ...
                // answer matches, we have the correct answer.
                if (answers[answerIndex] == currentQuestion.answers[0]) {
                    questionIndex++
                    // Advance to the next question
                    if (questionIndex < numQuestions) {
                        currentQuestion = questions[questionIndex]
                        setQuestion()
                        binding.invalidateAll()
                    } else {
                        // We've won!  Navigate to the gameWonFragment.
                    }
                } else {
                    // Game over! A wrong answer sends us to the gameOverFragment.
                }
            }
        }

ゲームクリア用のelse文(We’ve won!のコメントがある部分)に、gameWonFragmentに遷移させるための以下のコードを追加してください。アクション名(action_gameFragment_to_gameWonFragment)がnavigation.xmlファイルに表示されていたものと一致していることを確認してください。

// We've won!  Navigate to the gameWonFragment.
view.findNavController()
   .navigate(R.id.action_gameFragment_to_gameWonFragment)

同様に、失敗用のelse文に以下のコードを追加してください。

// Game over! A wrong answer sends us to the gameOverFragment.
view.findNavController().
   navigate(R.id.action_gameFragment_to_gameOverFragment)

アプリを起動して、問題に答えてみてください。もし回答が全て正しければ、GameWonFragmentに遷移します。

回答が間違っていた場合、即座にGameOverFragmentに遷移します。

上画像の①で表示されているのはAndroidシステムの戻るボタンです。ユーザーが戻るボタンをgameWonFragment、またはgameOverFragmentでタップした場合、アプリは問題画面に遷移します。理想的には戻るボタンはアプリをタイトル画面に戻すべきです。
次のタスクでは戻るボタンの行先を変更します。