記事内容

「JetpackCompose」を使用した画面遷移になります。本家のサンプルは複雑で分からなかったのでもっと簡単なコードで動作させてみました。

動作環境

OS	AndroidStudio
Windows 10	Android Studio Flamingo 2022.2.1

本家サンプル

プロジェクト作成、設定追加

プロジェクト作成

「JetpackCompose」を使用するので「Empty Activity」でプロジェクトを作成します。

プロジェクト名などは好きに付けてOKです。

設定追加

①build.gradle(Module:app)　ファイルを開く

②dependencies {}の間に
implementation "androidx.navigation:navigation-compose:2.4.0-rc01"　を追記
「2.4.0-rc01」の部分：バージョンもお好きな感じで

③「Sync Now」クリック　で設定内容が反映されます

2画面遷移サンプル

ボタンを押して2つの画面を行きするサンプルです。

コード

プレビューのみ行っています。

MainActivity.kt


// importの参考
import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
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.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.movescreen.ui.theme.MoveScreenTheme

// MainActivityの参考　自動生成されます。　今使用しない部分は削除しています。
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 実際はここに呼び出し内容を書く↓このような感じで
            // プレビューだけなのでなくても動きます。
            // MoveBetweenTwoScreens()
        }
    }
}

// 例1：2画面の遷移
@Preview
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MoveBetweenTwoScreens() {
    val navController = rememberNavController()

    // プレビューで動かすには「Scaffold」が必要なようです。
    Scaffold {
        NavHost(navController = navController, startDestination = "Main") {

            // 「Main」画面の設定とボタンクリック時の移動先画面を設定
            composable("Main") {
                MainScreen(onClickButtonGoToNext = { navController.navigate("Next") })
            }

            // 「Next」画面の設定とボタンクリック時の移動先画面を設定
            composable("Next") {
                NextScreen(onClickButtonGoToMain = { navController.navigate("Main") })
            }
        }
    }
}

// 各画面（Main画面）
@Composable
fun MainScreen(onClickButtonGoToNext: () -> Unit) {
    Column() {
        Text("見出し：Main画面")
        Button(onClick = onClickButtonGoToNext) {
            Text("Next画面へ")
        }
    }
}

// 各画面（Next画面）
@Composable
fun NextScreen(onClickButtonGoToMain: () -> Unit) {
    Column() {
        Text("見出し：Next画面")
        Button(onClick = onClickButtonGoToMain) {
            Text("Main画面へ")
        }
    }
}

プレビューの実行と動作確認

上記コードでプレビューを実行して動かしてみます。

①エラーがないことを確認する

②「Sprit」になっていることを確認する

③「Start Interactive Mode」をクリックする

Main画面が表示される

「Next画面へ」ボタンをクリック
↓
Next画面が表示される

「Main画面へ」ボタンをクリック　でまた「Main」の画面へ遷移します。

動作を止める場合。赤い四角「Stop Interactive Mode」をクリックします。

3画面の移動遷移サンプル

各画面に2つのボタンがあり3つの画面へ移動出来るサンプルです。

（下記コードで動くは動くのですが本来このような書き方で良いのか…もう少し効率の良い書き方があるとは思います。）

コード

MainActivity.kt


// 一つ目のコードに続けて書いても動作します。　2つのプレビューが表示されます。
// 新しいプロジェクトを作成する場合は
// class MainActivity : ComponentActivity() {…}　の下に下記コードを追加してください。


// 例2：3画面の遷移

@Preview
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MoveMultipleScreens() {
    val navController = rememberNavController()
    Scaffold(
    ) {
        NavHost(navController = navController, startDestination = "first") {
            composable("first") {
                FirstScreen(
                    onClickButtonGoToSecond = { navController.navigate("second") },
                    onClickButtonGoToThird = { navController.navigate("third") }
                )
            }
            composable("second") {
                SecondScreen(
                    onClickButtonGoToFirst = { navController.navigate("first") },
                    onClickButtonGoToThird = { navController.navigate("third") }
                )
            }
            composable("third") {
                ThirdScreen(
                    onClickButtonGoToFirst = { navController.navigate("first") },
                    onClickButtonGoToSecond = { navController.navigate("second") }
                )
            }
        }
    }
}


@Composable
fun FirstScreen(onClickButtonGoToSecond: () -> Unit, onClickButtonGoToThird: () -> Unit) {
    Column() {
        Text("見出し：1個目の画面")
        Button(onClick = onClickButtonGoToSecond) {
            Text("2の画面へ")
        }
        Button(onClick = onClickButtonGoToThird) {
            Text("3の画面へ")
        }
    }
}

@Composable
fun SecondScreen(onClickButtonGoToFirst: () -> Unit, onClickButtonGoToThird: () -> Unit) {
    Column() {
        Text("見出し：2個目の画面")
        Button(onClick = onClickButtonGoToFirst) {
            Text("1の画面へ")
        }
        Button(onClick = onClickButtonGoToThird) {
            Text("3の画面へ")
        }
    }
}

@Composable
fun ThirdScreen(onClickButtonGoToFirst: () -> Unit, onClickButtonGoToSecond: () -> Unit) {
    Column() {
        Text("見出し：3個目の画面")
        Button(onClick = onClickButtonGoToFirst) {
            Text("1の画面へ")
        }
        Button(onClick = onClickButtonGoToSecond) {
            Text("2の画面へ")
        }
    }
}

参考にさせていただいたページ

Jetpack Compose入門(15) 画面遷移
https://engawapg.net/jetpack-compose/1393/screen-transition/

Navigation Compose
https://tech.mokelab.com/android/compose/app/navigation/index.html

後記

本来はメニューバーなどを追加して画面遷移を行うと思います。先は長いです💦