ややめも

アプリ作りたい女子大学院生のめも💁‍♀️

技術メモ
日記
つくったもの
就活の話

[Android] Jetpack ComponentのNavigationの理解を深める備忘録

blog.yayawatanabe.net
Androidの入門コースを勉強しました。

実際に自分でアプリを作ってみると、
チュートリアルでわかっていた気になっていたところが全くわかってなかったのでメモ。

よくわからなかったこと

Jetpack componentのNavigationの使い方
developer.android.com
Navigation drawerを入れた瞬間よくわからなくなってしまた…

自分なりにNavigation周りの用語や動作を整理

NavHostによる画面遷移を管理するもの

findNavController(R.id.{nav host fragmentのID})

とかで取得可能。

このNavControllerを使って遷移できる。
例えばこんな感じ。

var navController = findNavController(R.id.nav_host_fragment)
navController.navigate(navigationのxmlで設定したfragmentのid)

findNavControllerはfragmentを引数にとって、NavControllerを取得できるやつ。

画面遷移のメソッドであるnavigate()は色んな引数をとれる。
上の例はfragmentのidを指定して遷移させたもの。

fragmentにあるデータを引数として渡し、画面遷移するときは
①navigation.xmlで画面遷移を設定する
②遷移のIDを命名
③{遷移元のfragment名}Directionsクラスと、{画面遷移のID}メソッドが自動生成される
④navigateの引数に、{遷移元のfragment名}Directions.{画面遷移のID}を渡す。(必要があれば遷移先に渡すデータも渡す)

Activity上で画面遷移をするやつ(雑)

NavigationDrawerなどとNavigationを連携できるやつ

例えばMainActivity.kt上で

override fun onCreate(saveInstanceState: Bundle?) {
// ToolBarと連携、戻るボタンやToolBarタイトルをセット(navigationでセットしているlabelがタイトルになる)
// ちなみにlabelが空だとToolBarのタイトルが遷移先から戻るときにバグる
    NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)

// navViewというidで示したメニューとnavigationあたりを紐付ける
    NavigationUI.setupWithNavController(binding.navView, navController)
}


// Toolbarとの連携設定をoverride、これで戻るボタンが機能しそう
    override fun onSupportNavigateUp(): Boolean {
        val navController = this.findNavController(R.id.nav_host_fragment)
        return NavigationUI.navigateUp(navController, drawerLayout)
    }

画面遷移について

navigation.xmlで設定したfragmentのIDとMenu ItemのIDを一致させておくと、
Listenerをセットしなくても画面遷移できる。

Listenerを自分でセットしたいときはsetNavigationItemSelectedListenerを使う

material.io
ここに書いてあった。

こんな感じのイメージ。
このときは画面遷移も自分でセットする必要がある。

// これをonCreateで呼び出す。
 private fun setItemSelection() {
        val navView = findViewById<NavigationView>(R.id.navView)
        navView.setNavigationItemSelectedListener {
            when (it.itemId) {
                case1 -> {
        
                }
                case2 -> {

                }
                case3 -> {

                }
            }
            drawerLayout.closeDrawer(GravityCompat.START)
            true
        }
    }