SHOEISHA iD

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

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

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

画面遷移を管理してくれるナビゲーションコンポーネント

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

 本連載は、「Android Studio2で始めるアプリ開発入門」連載、および『Androidアプリ開発の教科書』の続編にあたる内容として、Jetpackを取り上げていきます。前回は、ネット上のリストデータをいったんデータベースに格納した上でページングする方法を紹介しました。今回は、画面遷移を管理してくれるナビゲーションコンポーネントを紹介します。

ナビゲーションコンポーネントのメリット

 本連載は、Android Jetpackを紹介しています。今回は、Androidアプリの画面遷移をまとめて管理できる便利なライブラリとして、ナビゲーションコンポーネントを紹介します。

 なお、今回のサンプルデータは、GitHubから参照できます。

フラグメントを利用した通常の画面遷移の問題点

 ナビゲーションを紹介するためのサンプルとして、メモ帳アプリのようなものを考えます。アプリを起動すると、図1のメモ内容のタイトルのみをリスト表示した画面が表示されます。

図1:今回のサンプルのメモリスト画面
図1:今回のサンプルのメモリスト画面

 その後、このリストをタップすると、図2のメモ内容の詳細画面が表示されます。もちろん、メモ詳細画面の左上のナビゲーションアイコンをクリックすると、元のメモリスト画面に戻ります。

図2:今回のサンプルのメモ詳細画面
図2:今回のサンプルのメモ詳細画面

 このような画面遷移を実現する方法として、アクティビティはMainActivityのみとして、そのアクティビティに乗るフラグメントを置き換える画面遷移の方法、つまり、シングルアクティビティマルチフラグメントアーキテクチャを採用して、メモリスト画面をMemoListFragment、メモ詳細画面をMemoDetailFragmentとしたとします。

 すると、通常の画面遷移コードは、MemoListFragment内のリストをタップした際のリスナ内に、リスト1の通り表示フラグメントをMemoDetailFragmentに置き換える処理を記述します。

[リスト1]別のフラグメントへの画面遷移のJavaコード例
// フラグメントマネージャの取得。
FragmentManager manager = getParentFragmentManager();
// フラグメントトランザクションの開始。
FragmentTransaction transaction = manager.beginTransaction();
// バックスタックが正しく動作するように設定。
transaction.setReorderingAllowed(true);
// バックスタックへの追加。
transaction.addToBackStack("MemoList");
// フラグメントコンテナ上のフラグメントを詳細画面に置き換える。
transaction.replace(R.id.fragmentContainer, MemoDetailFragment.class, arguments);
// フラグメントトランザクションのコミット。
transaction.commit();

 一方、MemoDetailFragmentのナビゲーションアイコンクリック時の処理では、リスト2のように、バックスタックからポップさせるコードを記述します。

[リスト2]元のフラグメントに戻るJavaコード例
// フラグメントマネージャの取得。
FragmentManager manager = getParentFragmentManager();
// バックスタックからポップ。
manager.popBackStack();

 こういった画面遷移コードには、以下の問題があります。

画面遷移の全体像がわからない。

 例えば、MemoListFragmentからどの画面に遷移しているのかは、MemoListFragment内の該当コードを探し出して読まないとわかりません。もちろん、これは専用のドキュメントを作成すればよいわけですが、アプリ内のファイルにはまとまった情報はありません。

バックスタックへの登録を忘れると戻れない。

 前の画面や、場合によってはさらにその前の画面に戻るという処理は、バックスタックからのポップとなるため、画面遷移時にバックスタックへの登録処理コードを記述し忘れると戻る処理が成立しなくなります。これは、すなわち、バックボタン(バックジェスチャー)の挙動そのものも変わってきます。

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

 これら問題を一挙に解決してくれるのがナビゲーションコンポーネントです。ナビゲーションコンポーネントの仕様に従って、アプリ内に画面遷移をひとつのファイルに定義すると、そのファイルを参照することで、アプリ内のすべて画面遷移をまとめて参照できます。このファイルに記述されたデータ構造のことを、ナビゲーショングラフといいます。

 しかも、Android Studioには、このナビゲーショングラフをビジュアルに表示し、GUIで編集できる機能が備わっています。この機能をナビゲーションエディタと言います。

 図3は、メモリスト画面からメモ詳細画面の画面遷移を定義したナビゲーショングラフを表示させたナビゲーションエディタ画面です。今回はサンプルとして2画面のみのアプリですが、複数画面で複雑な遷移を行うものでも、このようにビジュアルに表示されます。

図3:ナビゲーションエディタ画面
図3:ナビゲーションエディタ画面

ナビゲーションコンポーネントの利用準備

 概論はここまでにして、実際にナビゲーションコンポーネントの利用方法を解説していきます。まずは、その準備からです。

依存ライブラリの追加

 ナビゲーションコンポーネントを利用する場合、依存ライブラリを追加する必要があります。これは、build.gradle.kts(:app)ファイルのdependenciesブロックへの、リスト3のコードの追記です。

 なお、バージョン番号は、原稿執筆時点での番号です。最新バージョンに関しては、こちらのページを参照してください。

[リスト3]build.gradle.kts(:app)へのナビゲーションライブラリを利用する設定
implementation("androidx.navigation:navigation-fragment:2.9.5")
implementation("androidx.navigation:navigation-ui:2.9.5")

フラグメントコンテナへの属性記述

 次に、activity_main.xml中に記述されているフラグメントコンテナを、ナビゲーションコンポーネントを利用するものとして定義します。これは、リスト4のコードです。

[リスト4]res/layout/activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout
  :
  <androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragmentContainer"
    android:name="androidx.navigation.fragment.NavHostFragment"  // (1)
    app:navGraph="@navigation/nav_graph"  // (2)
    app:defaultNavHost="true"  // (3)
    : />
</androidx.constraintlayout.widget.ConstraintLayout>

 リスト4のフラグメントコンテナ定義のポイントは(1)です。コンテナに埋め込むフラグメントとして、すなわち、name属性の値として、自作したものではなく、NavHostFragmentとします。これにより、ナビゲーションコンポーネントがナビゲーショングラフに従って自動的にフラグメントコンテナに適切なフラグメントを埋め込みます。

 そのナビゲーショングラフを指定する属性が、(2)のnavGraphです。こちらの作り方は、次節で紹介します。

 なお、(3)のdefaultNavHostの属性値としてtrueを指定すると、バックボタン(バックジェスチャー)の処理をバックスタックからのポップに置き換えてくれます。これにより、バックボタン(バックジェスチャー)でアプリが終了しなくなります。

次のページ
ナビゲーショングラフの作り方

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

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

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/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編 」他、著書多数

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/22588 2025/11/27 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング