Overview
Jetpack Composeで画面遷移をするには、パッケージが必要なようです。画面遷移する標準機能は、FlutterやSwiftみたいにないんですね😅
こちらの参照
summary
こちらのパッケージをbuild.gradle に追加するが、人によってはバージョンが新しいとエラーが出ることがある!
その場合は、環境を合わせる必要があります。
私はこのように設定した
パッケージを追加したら、画面右上のSync Nowを押す。
人よっては、SDKのバージョンを変更する必要があります。
plugins {
id 'com.android.application'
id 'org.jetbrains.kotlin.android'
}
android {
namespace 'com.example.mynavigation'
compileSdk 34 // 33 -> 34に変更
defaultConfig {
applicationId "com.example.mynavigation"
minSdk 24
targetSdk 34// 33 -> 34に変更
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary true
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion '1.3.2'
}
packagingOptions {
resources {
excludes += '/META-INF/{AL2.0,LGPL2.1}'
}
}
}
dependencies {
implementation 'androidx.core:core-ktx:1.8.0'
implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.5.1'
implementation platform('androidx.compose:compose-bom:2022.10.00')
implementation 'androidx.compose.ui:ui'
implementation 'androidx.compose.ui:ui-graphics'
implementation 'androidx.compose.ui:ui-tooling-preview'
implementation 'androidx.compose.material3:material3'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-tooling'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// 画面遷移のパッケージを追加する
def nav_version = "2.7.2"
implementation "androidx.navigation:navigation-compose:$nav_version"
}
画面遷移するだけの機能を作ってみた。
最初のページが、First Screenで、次のページがSecond Screenです。
- navControllerを作成して、画面遷移の設定をする。
- ボタンを押すと画面遷移ができるように、パラメーターを渡す。
// どこのページへ移動するかnavControllerに定義する
@Composable
fun DisplayNav() {
// navControllerを作成
val navController = rememberNavController()
// NavHostを作成
// startDestinationは最初に表示するページ
// startDestinationは最初に表示するページ
NavHost(navController = navController,
startDestination = "First Screen") {
// 最初に表示するページ
composable(route = "First Screen") {
FirstScreen(navController = navController)
}
// 2番目に表示するページ
composable(route = "Second Screen") {
SecondScreen(navController = navController)
}
}
}
// ボタンを押すと、画面遷移できるようにパラメーターを追加
@Composable
fun FirstScreen(navController: NavController) {
Button(onClick = { navController.navigate("Second Screen") }) {
Text(text = "Go to 2nd Screen")
}
}
@Composable
fun SecondScreen(navController: NavController) {
Button(onClick = { navController.navigate("First Screen")}) {
Text(text = "Go to 1st Screen")
}
}
全体のコード
app/src/main/java/com/example/mynavigation/MainActivity.kt
package com.example.mynavigation
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.mynavigation.ui.theme.MyNavigationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyNavigationTheme {
// A surface container using the 'background' color from the theme
Surface(
// modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
DisplayNav()
}
}
}
}
}
// どこのページへ移動するかnavControllerに定義する
@Composable
fun DisplayNav() {
// navControllerを作成
val navController = rememberNavController()
// NavHostを作成
// startDestinationは最初に表示するページ
// startDestinationは最初に表示するページ
NavHost(navController = navController,
startDestination = "First Screen") {
// 最初に表示するページ
composable(route = "First Screen") {
FirstScreen(navController = navController)
}
// 2番目に表示するページ
composable(route = "Second Screen") {
SecondScreen(navController = navController)
}
}
}
// ボタンを押すと、画面遷移できるようにパラメーターを追加
@Composable
fun FirstScreen(navController: NavController) {
Button(onClick = { navController.navigate("Second Screen") }) {
Text(text = "Go to 2nd Screen")
}
}
@Composable
fun SecondScreen(navController: NavController) {
Button(onClick = { navController.navigate("First Screen")}) {
Text(text = "Go to 1st Screen")
}
}
最初のページ
次のページ
ボタンを押すと最初のページに戻る
thoughts
Swiftで画面遷移をやったことあるのですが、Androidだとパッケージを追加しないと画面遷移ができないのだなと知って驚きました!
ネイティブは難しいですね。クロスプラットフォームのありがたみを感じるFlutterエンジニアの感想でした。
Discussion