目的

Androidアプリにて
Jetpack Composeを利用している場合の
ナビゲーション画面遷移メモ

あくまで参考程度に





環境

  • Android Studio Arctic Fox | 2020.3.1 Patch 4
  • Kotlin 203-1.5.31-release-550-AS7717.8

参照サイト

developers Compose を使用したナビゲーション





対応メモ

Androidの新規プロジェクトのEmpty Compose Activityを使う想定で進めます。

モジュール追加

まずモジュール追加。 build.gradle（Module: app）にて以下を追記

build.gradle（Module: app
def nav_version = "2.4.1"
implementation("androidx.navigation:navigation-compose:$nav_version")

import文

MainActivityのimportに以下を追加
まぁエラーの補完機能で自動で追加してくれますが。。一応記載。

import
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController





画面1

遷移前の画面1のコードは以下とした。

画面1のコード
@Composable
fun Greeting(navController: NavController) {
    Button(
        onClick = {
            navController.navigate("Next")
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 56.dp)
            .height(48.dp),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Blue,
        ),

    ) {
        Text(text = "Hello!",
            color = Color.White)
    }
}

画面2

遷移後の画面2は以下とした。

画面2のコード
@Composable
fun Next()  {
    Text(text = "next page",
        color = Color.Black)
}





MainActivity

MainActivityは以下。

MainActivity
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MovesceneTheme {
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = "greeting") {
                    composable("greeting") { Greeting(navController) }
                    composable("next") { Next() }
                }
            }
        }
    }
}

簡単ですね。
ただ実際のリリースアプリとなると、こう簡単に行かないことも。。。
引数を使いたい場合は、参照先のページに記載があります。

@Previewもがんばれば実装できそうだけど、
今回は消した。