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

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

目次

まとめ

ナビゲーションコンポーネント

Androidナビゲーションライブラリを使うためには、以下のセットアップが必要です。

  • navigation-fragment-ktxおよびnavigation-ui-ktxの依存関係をモジュールレベルのbuild.gradleファイルに追加する
  • プロジェクトレベルのbuild.gradleファイルにnavigationVersion用のext変数を追加する

ナビゲーション遷移画面とはユーザーが遷移するフラグメント、アクティビティ、または他のアプリのコンポーネント等のことです。
ナビゲーショングラフはあるナビゲーション遷移画面から次に遷移し得る遷移先へのパスを定義するものです。

  • ナビゲーショングラフを作成するためにはNavigationタイプのAndroidリソースファイルを作成します。このファイルにはアプリ全体のナビゲーションフローが定義されます。このファイルは一般的にres/navigationフォルダーにあります。また一般的にその名称はnavigation.xmlとされます。
  • ナビゲーションエディターでナビゲーショングラフを表示するためには、navigation.xmlを開いた後にDesignタブをクリックします。
  • ナビゲーションエディターはフラグメントのような遷移先をナビゲーショングラフに追加する際に利用します。
  • ある遷移画面から別の遷移画面へのパスを定義するためには、ナビゲーショングラフを利用して遷移画面同士を接続するアクションを作成します。navigation,xmlファイルにおいてアクションを表す線はそれぞれIDを独自の保持しています。

ナビゲーションホストフラグメントは普通NavHostFragmentと名付けられ、ナビゲーショングラフにおけるフラグメントのホストとしての役割を担います。

  • ユーザーがナビゲーショングラフに定義された遷移画面間を動く際に、NavHostFragmentはフラグメントを入れ替え、フラグメントバックスタックを管理します。
  • activity_main.xmlレイアウトファイルにおいて、NavHostFragmentはandroid:name=”androidx.navigation.fragment.NavHostFragment”という名前と共に、fragment要素として表されます。

ユーザーがビュー(ボタンなど)をタップした際にどのフラグメントを表示するかを定義するためには、onClickリスナーをビューにセットします。

  • onClickリスナーの中で、findNavController().navigate()をそのビューから呼び出します。

  • 特定の遷移先へ導くアクションのIDを指定します。

条件付きナビゲーションは、特定の条件下でのみある画面に遷移させ、別の条件下では別の画面に遷移させることができます。条件付きナビゲーションを作成するためには

  1. ナビゲーションエディターを使ってスタートとなるフラグメントから遷移し得るフラグメント全てにアクションを作成します。
  2. それぞれに独自のIDを付与します。
  3. ビューのクリックリスナーの中に、条件を判別するコードを追加します。そしてそのビューからfindNavController().navigate()を呼び出し、適切なアクションのIDを引数に渡します。

戻るボタン

システムの戻るボタンは通常端末の最下部に位置しています。デフォルトでは戻るボタンはユーザーが直前に開いた画面へと遷移させます。場合によっては戻るボタンの遷移先を変更することもできます。

  • ナビゲーションエディターでは、アトリビュートパネルを使ってアクションのPop Up Toの設定を変更できます。この設定は戻るボタンの遷移先に影響を与えるバックスタックから遷移画面を削除します。
  • Pop Up To設定はnavigation.xmlファイル上ではpopUpTo属性として表示されます。

  • Inclusiveチェックボックスを設定すると、popUpToInclusive属性がtrueになります。設定中の遷移画面を含めたすべての遷移先がバックスタックから削除されます。
  • アクションのpopUpTo属性がアプリの最初の画面で設定されていて、popUpToInclusiveがtrueになっている場合、戻るボタンはアプリの外(通常ホーム画面)へと遷移させます。

アップボタン

Androidアプリの画面にはそれぞれスクリーン上、アプリバーの左上部に表示されるアップボタンを置くことができます。アップボタンは画面間のヒエラルキー関係に基づいて、アプリ内にある画面を”上方”に遷移させます。

ナビゲーションコントローラーのNavigationUIライブラリを使ってアプリバーにアップボタンを表示させることで、ユーザーがアプリ内のどこからでもアプリのホーム画面へと戻ることができます。

ナビゲーションコントローラーをアプリバーにリンクするためには:

  1. onCreate()の中でNavigationUIクラス上でsetupActionBarWithNavController()を呼び出します。引数にはナビゲーションコントローラーを渡します。
val navController = this.findNavController(R.id.myNavHostFragment)
NavigationUI.setupActionBarWithNavController(this,navController)
  1. onSupportNavigateUp()メソッドをオーバーライドして、ナビゲーションコントローラーのnavigateUp()を呼び出すようにします。
override fun onSupportNavigateUp(): Boolean {
        val navController = this.findNavController(R.id.myNavHostFragment)
        return navController.navigateUp()
    }
}

オプションメニュー

オプションメニューはアプリバーの縦に並んだ三つの点のアイコンをタップすることでアクセスできるメニューのことです。
フラグメントを表示するメニューアイテムをもつオプションメニューを作成するためには、フラグメントがIDを持っていることをまず確認します。それからオプションメニューとメニューアイテムのonOptionsItemSelected()ハンドラーを定義します。

1.フラグメントがIDを持っているか確認する。

  • 遷移フラグメントをナビゲーショングラフに追加し、フラグメントのIDを確認してください。(IDは自由に変更できます)

2. オプションメニューを定義する。

  • MenuタイプのAndroidリソースファイルを作成してください。通常options_menu.xmlと命名されます。ファイルはres > Menuフォルダーに保存されます。
  • options_menu.xmlファイルを開き、デザインエディターを表示し、Menu Itemウィジェットをパレットからメニューにドラッグしてください。
  • 扱いやすくするために、メニューアイテムのIDとそのメニューアイテムが選択されたときに表示するフラグメントのIDは同じにしておいてください。このステップは必須ではありませんが、メニューアイテムのonClickのコードをより簡素にすることができます。

3. メニューアイテムのonClickハンドラーをコーディングする。

  • オプションメニューを表示するフラグメント、またはアクティビティの中のonCreateView()の中で、setHasOptionsMenu(true)を呼び出して、オプションメニューを有効にします。
  • オプションメニューをインフレートするようにonCreateOptionsMenu()を実装します。
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
   super.onCreateOptionsMenu(menu, inflater)
   inflater?.inflate(R.menu.options_menu, menu)
}
  • onOptionsItemSelected()メソッドをオーバーライドして、メニューアイテムが選択されたときに適切なアクションを取り出すようにします。以下のコードはメニューアイテムと同じIDをもつフラグメントを表示するコードです。(このコードはメニューアイテムのIDとフラグメントのIDが同じである時のみ正常に動作します)
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
   return NavigationUI.onNavDestinationSelected(item!!,
           view!!.findNavController())
           || super.onOptionsItemSelected(item)
}

ナビゲーションドロワー

ナビゲーションドロワーは画面の端からスライドアウトするパネルのことです。ユーザーがナビゲーションドロワーを表示するには二通りの方法があります。

  • 画面のスタート端(通常は左)からスワイプする。
  • アプリバーにあるドロワーボタン(三本線)をタップする。

ナビゲーションドロワーをアプリに追加するためには:

  1. build.gradle(app)に依存関係を追加する。
  2. 全ての遷移先フラグメントがIDを持っていることを確認する。
  3. ドロワー用のメニューを作成する。
  4. ドロワーをフラグメントのレイアウトに追加する。
  5. ドロワーをナビゲーションコントローラーに接続する。
  6. アプリバーにドロワーボタンをセットアップする。

上記手順をより詳しく以下で説明します。

1.build.gradle(app)に依存関係を追加する。

  • ナビゲーションドロワーはMaterial Components for Androidライブラリの一部です。build.gradle(app)ファイルにMaterialライブラリを追加してください。
dependencies {
    ...
    implementation "com.google.android.material:material:$supportlibVersion"
    ...
}

2. 遷移先フラグメントにIDを付与する。

  • ナビゲーションドロワーからあるフラグメントに飛ぶ可能性がある場合、そのフラグメントをナビゲーショングラフで開き、フラグメントがIDを持っていることを確認してください。

3. ドロワー用のメニューを作成する。

  • ナビゲーションドロワーメニューのためのMenuタイプのAndroidリソース(通常はnavdrawer_menuと呼ばれます)を作成してください。これによりres > Menuフォルダーの中にnavdrawer_menu.xmlが作成されます。
  • デザインエディターでMenuにMenu Itemウィジェットを追加してください。

4. ドロワーをフラグメントのレイアウトに追加する。

  • ナビゲーションホストフラグメントを含むレイアウト(通常はメインレイアウト)中で、<addroidx.drawerlayout.widget.DrawerLayout>をルートビューとして使ってください。
  • レイアウトに<com.google.android.material.navigation.NavigationView>ビューを追加してください。

5. ドロワーをナビゲーションコントローラーに接続する。

  • ナビゲーションコントローラーを作成するアクティビティを開いてください。(通常はメインアクティビティ)
    onCreate()中で、NavigationUi.setupWithNavController()を使ってナビゲーションドロワーとナビゲーションコントローラーを接続します。
val binding = DataBindingUtil.setContentView<ActivityMainBinding>(
       this, R.layout.activity_main)
NavigationUI.setupWithNavController(binding.navView, navController)

6. アプリバーにドロワーボタンをセットアップする。

  • ナビゲーションコントローラーを作成するアクティビティ(通常はメインアクティビティ)の中のonCreate()の中で、NavigationUI.setupActionBarWithNavControllerの三番目の引数にドロワーレイアウトを渡してください。
val binding = DataBindingUtil.setContentView<ActivityMainBinding>(
    this, R.layout.activity_main)

NavigationUI.setupActionBarWithNavController(
    this, navController, binding.drawerLayout)
  • アップボタンをドロワーボタンと一緒に動作するようにするために、onSupportNavigateUp()を編集して、NavigationUi.navigateUp()を返すようにしてください。ナビゲーションコントローラーとドロワーレイアウトをnavigateUp()の引数に渡してください。
override fun onSupportNavigateUp(): Boolean {
   val navController = this.findNavController(R.id.myNavHostFragment)
   return NavigationUI.navigateUp(navController, drawerLayout)
}

次の講座は 3.3 外部のアクティビティを起動するです。

おすすめ書籍

Kotlinの文法をまず学びたい!という方には以下の書籍がおすすめです。Kotlinは日本語書籍がまだ豊富とは言えない状況ですが、細かく解説されており、Kotlin入門者のかたでもつまずくことなく学習できると思います。

実際にアプリを作りながら覚えていきたい!という方には以下もお勧めです。はじめに上の書籍で文法をさらっと学んでから取り組むのがお勧めです。

コメント

プロフィール

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

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

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