Zenn
Jboy王国メディアPublicationへの投稿
➡️

Jetpack Composeで画面遷移をする

JboyHashimoto
2023/09/09に公開
Kotlin
Jetpack Compose
tech

Overview

Jetpack Composeで画面遷移をするには、パッケージが必要なようです。画面遷移する標準機能は、FlutterやSwiftみたいにないんですね😅

こちらの参照
https://developer.android.com/jetpack/compose/navigation?hl=ja

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"
}

ktsだと（）に変わります。

plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.jetbrains.kotlin.android)
}

android {
    namespace = "com.junichi.lightsenserapplication"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.junichi.lightsenserapplication"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = 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.5.1"
    }
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
    // navigation library
    val nav_version = "2.7.7"

    implementation("androidx.navigation:navigation-compose:$nav_version")
    // Firebase libraries
    implementation(platform("com.google.firebase:firebase-bom:32.3.1"))

    implementation("com.google.firebase:firebase-auth-ktx")
    implementation("com.google.firebase:firebase-firestore")
    implementation("com.google.firebase:firebase-analytics-ktx")
    implementation("com.google.firebase:firebase-crashlytics")
}

画面遷移するだけの機能を作ってみた。
最初のページが、First Screenで、次のページがSecond Screenです。

  1. navControllerを作成して、画面遷移の設定をする。
  2. ボタンを押すと画面遷移ができるように、パラメーターを渡す。
// どこのページへ移動するか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エンジニアの感想でした。

Jboy王国メディア
Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

Discussion