ユーザ用ツール

サイト用ツール


サイドバー

プログレス合同会社

広告

android:studio:application:navigation

02.画面遷移の作成

全体の画面構成として

  • Home(ナビゲーション)
  • Settings(設定)
  • Listing(一覧)

という構成を例にします。

また、縦画面のときはHomeSettingsHomeHomeListingHomeという画面遷移を行い、横画面のときは、左ペインにHomeを固定し、Homeの操作により右ペインにSettingsまたはListingを表示するようにします。

各画面のパッケージフォルダーを作成

各画面のパッケージフォルダーを作成します。

android:studio:application:android-app0201.png

パッケージフォルダーの作成

app/src/mainuiフォルダーで右クリック➡『新規(N)』➡『パッケージ』でパッケージフォルダーを作成します。

android:studio:application:android-app0202.png

ui/homeパッケージを作成します。

android:studio:application:android-app0203.png

同様に
 ui/settings
 ui/listing
パッケージを作成しました。

Compose Navigationの導入

画面遷移を実装するため、Compose Navigationを導入します。

バージョンカタログにCompose Navigationの情報を追記します。

[versions]
   :
navigation = "2.9.4"             # https://mvnrepository.com/artifact/androidx.navigation/navigation-compose

[libraries]
   :
navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation" }
   
[plugins]
   :

[bundles]
navigation-compose = [ "compose-ui", "compose-material", "compose-activity", "navigation-compose" ]

3行目
コメント部分のURLを参照して、最新安定バージョンを指定します。
7行目
Compose Navigationの依存ライブラリを定義しています。
13行目
Compose Navigationの依存ライブラリをグループ化しています。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

appモジュールのbuild.gradle.ktsにCompose Navigationの依存ライブラリを追記します。

   :
dependencies {
   :
  implementation(libs.bundles.navigation.compose)
   :
}

4行目
グループ化したCompose Navigationの依存ライブラリを参照しています。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

画面遷移の実装

appモジュールのMainActivityに画面遷移を実装します。

   :
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.NavigationUI
import com.google.android.material.bottomnavigation.BottomNavigationView
   :
class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
   :
    setContentView(R.layout.activity_main)

    val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
    val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragmentContainerView) as NavHostFragment
    NavigationUI.setupWithNavController(bottomNavigation, navHostFragment.navController)
  }  
}

11行目
ナビゲーションバーを取得します。
12行目
FragmentContainerViewを取得します。
NavHostFragmentに型キャストしています。
13行目
NavControllerを設定します。

android/studio/application/navigation.txt · 最終更新: by プログレス合同会社