Zenn
💻

【備忘録】Navigation UIについて

2023/07/21に公開
Android
navigation
fragment
画面遷移
activity
tech

備忘録⑥Navigation UI

前回に引き続き、Todoアプリで使ったNavigation UIについて備忘録を残します。

もしよろしければ、アプリの感想やご意見も頂ければ幸いです。
https://play.google.com/store/apps/details?id=jp.dev.myapp.todo

はじめに

最近のAndroidアプリケーションでは、ナビゲーションの効率性と使いやすさが重要です。Navigation UIは、アプリケーション内の画面遷移とナビゲーションの管理をサポートするための強力なツールセットです。

Navigation UIとは、Android Jetpackのコンポーネントの一部であり、画面遷移とナビゲーションの管理を簡単にするためのツールセットで、画面間のシームレスな遷移、アプリケーションのバックスタック管理、ディープリンクのサポートなど、さまざまな機能を提供します。

Navigation グラフは、アプリケーション内の画面遷移の全体像を表現するグラフです。
XMLファイルで定義され、目的地（画面）やアクション（遷移）を含みます。作成の際、Navigation Editorを使用して可視化してグラフを作成することもできます。

<!-- nav_graph.xml -->
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.myapp.HomeFragment"
        android:label="Home"
        tools:layout="@layout/fragment_home" >
	<action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.myapp.DetailFragment"
        android:label="Detail" />

    <activity
        android:id="@+id/settingsActivity"
        android:name="com.example.myapp.SettingsActivity"
        android:label="Settings" />
	
    <action
        android:id="@+id/action_home_to_detail"
        app:destination="@id/detailFragment" />
    <action
        android:id="@+id/action_home_to_settings"
        app:destination="@id/settingsActivity" />

</navigation>
要素 定義
<navigation> 各目的地（fragmentやactivity）を定義します。startDestination属性は、起動時に表示される画面を指定します。
<fragment> Fragmentの目的地を定義します。IDやクラス名、ラベル、レイアウトなどを指定できます。
<activity> Activityの目的地を定義します。IDやクラス名、ラベルなどを指定できます。
<action> 遷移アクションを定義します。IDと目的地を指定します。

ナビゲーションコンポーネントの追加

Navigation UIを使用するためには、アプリケーションにNavigationコンポーネントを追加する必要があります。build.gradleファイルで、Navigationコンポーネントを含むJetpackライブラリを依存関係に追加します。

dependencies {
    // Navigation コンポーネントの依存関係を追加する
    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'
}

ナビゲーションの実装と遷移

Navigation UIでは、FragmentやActivityを遷移元や遷移後の目的地として使用します。ナビゲーションを実現するためには、NavControllerを使用して目的地間の遷移を管理します。NavControllerは、画面遷移に関するアクションを実行するためのメソッドを提供します。
下記にNavigationの実装例と遷移方法について手順を記載します。

  1. Navigation グラフの作成の章で作成したNavigationグラフを利用します。
  2. ホストフラグメントの追加
    activity_main.xmlなどのレイアウトファイルに、NavHostFragmentを追加します。
<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/navigation" />
  1. NavControllerの初期化
    アクティビティやフラグメントでNavControllerを初期化します。
// アクティビティでのNavControllerの初期化例
val navController = findNavController(R.id.nav_host_fragment)

// フラグメントでのNavControllerの初期化例
val navController = findNavController()

// カスタムビュー内でのNavControllerの初期化例
val navController = Navigation.findNavController(requireActivity(), R.id.nav_host_fragment)
  1. 目的地への遷移
    NavControllerを使用して目的地への遷移を行います。
// ボタンなどのクリックリスナー内での遷移例
view.setOnClickListener {
    navController.navigate(R.id.action_home_to_detail)
}
  1. バックスタックの管理
    NavControllerを使用してバックスタックの管理を行います。
// バックボタンのクリックリスナー内でのバックスタックの管理例
override fun onBackPressed() {
    if (!navController.popBackStack()) {
        super.onBackPressed()
    }
}

まとめ

Navigation UIは、Android開発において画面遷移とナビゲーションを管理するための重要なツールセットです。Navigation UIを活用することで、アプリケーションのユーザーエクスペリエンスを向上させ、使いやすさと効率性を高めることができます。個人的にも、Navigationグラフなどで視覚的にFragmentやActivityの遷移が理解できるのでわかりやすいかと思います。

Discussion