目的
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)にて以下を追記
def nav_version = "2.4.1"
implementation("androidx.navigation:navigation-compose:$nav_version")
import文
MainActivityのimportに以下を追加
まぁエラーの補完機能で自動で追加してくれますが。。一応記載。
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
画面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は以下とした。
@Composable
fun Next() {
Text(text = "next page",
color = Color.Black)
}

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もがんばれば実装できそうだけど、
今回は消した。