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

アイキャッチ画像 Android Kotlin基礎講座

目次

タスク:アプリバーにアップボタンを追加する

アプリバー

アプリバーはアクションバーとも呼ばれ、アプリのブランディングと識別に有用なスペースです。アプリバーの色を設定することもできます。アプリバーはオプションメニューのような馴染みのあるナビゲーションツールをユーザーに提供します。アプリバーからオプションメニューにアクセスするには、縦に並んだ三つの点のアイコンをタップします。

アプリバーには画面ごとに変更できるタイトル文字を表示させることができます。AndroidTriviaアプリのタイトル画面では、アプリバーはAndroid Triviaと表示しています。問題画面では、タイトル文字にユーザーがどの段階にいるのかを伝えるために(“1/3,” “2/3,” “3/3.”)を表示しています。

アップボタン

現在の段階では、前画面に戻るためにはユーザーはシステムの戻るボタンを使う仕様になっています。しかしながら、Androidアプリは画面上、アプリバーの左上部にアップボタンを表示することもできます。

AndroidTriviaアプリでは、タイトル画面をのぞく全ての画面にアップボタンを表示させます。タイトル画面はアプリの画面ヒエラルキーにおいてトップにあるので、ユーザーがタイトル画面に遷移した場合はアップボタンを非表示にします。

アップボタンとシステムの戻るボタン:

  • アップボタンは以下のスクリーンショットの1で表示されるアプリバーにあるボタンです。
  • アップボタンはアプリ内においてのみ、画面間のヒエラルキー関係に基づいた画面遷移を行います。アップボタンではアプリの外(通常はホーム画面)に遷移させることはありません。
  • 戻るボタンはスクリーンショットの2で表示されたシステムナビゲーションバーに表示されたボタンです。機種によっては画面外の物理ボタンである場合もあります。アプリに依存していません。
  • 戻るボタンはユーザーが直近で遷移した画面の履歴(バックスタック)を遡るように遷移させます。

アップボタン用サポートを追加する

ナビゲーションコンポーネントにはNavigationUIというUIライブラリが含まれます。ナビゲーションコントローラーによってアプリバーにアップボタンの挙動が実装されるので、自身で行う必要はありません。

以下の手順でナビゲーションコントローラーを使ってアプリにアップボタンを追加できます。

  1. MainActivity.ktを開いてください。onCreate()メソッドの中にナビゲーションコントローラーオブジェクトを見つけるためのコードを追加してください。
val navController = this.findNavController(R.id.myNavHostFragment)
  1. さらにonCreate()メソッドの中に、ナビゲーションコントローラーとアプリバーをリンクさせるコードを追加してください。
NavigationUI.setupActionBarWithNavController(this,navController)
  1. onCreate()メソッドの後に、ナビゲーションコントローラーのnavigateUp()を呼び出すために、onSupportNavigateUp()をオーバーライドしてください。
override fun onSupportNavigateUp(): Boolean {
        val navController = this.findNavController(R.id.myNavHostFragment)
        return navController.navigateUp()
    }
  1. アプリを起動してください。タイトル画面をのぞく全ての画面にアップボタンが表示されるようになりました。アプリ内のどこにいても、アップボタンを利用してタイトル画面に戻ることができます。

コメント

プロフィール

プロフィール
コードラボJP

大学卒業後SEに就職、現在は退職しフリーランスとして活動中。
『初心者でも挫折せずに一人でプログラミングを学べる』をモットーに、コードラボJPを開設
お問い合わせ等はcodelabsjp@gmail.comまで

コードラボJPをフォローする
タイトルとURLをコピーしました