【シンプルサンプル】AndroidStudio　画面遷移



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

* 動作環境

| OS | AndroidStudio | 
|:--:|:--:|
| Windows 10 | Android Studio Flamingo 2022.2.1 |

# 本家サンプル

https://developer.android.com/jetpack/compose/navigation?hl=ja

https://developer.android.com/codelabs/basic-android-kotlin-compose-navigation?hl=ja&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-4-pathway-2%3Fhl%3Dja%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-navigation#0



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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/10502d16-c4b9-8f5d-6a8a-788eea531d29.png)
プロジェクト名などは好きに付けてOKです。

## 設定追加

①build.gradle(Module:app)　ファイルを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/9c6e64d4-45ec-7543-09bd-15086840819e.png)
②dependencies {}の間に
implementation "androidx.navigation:navigation-compose:2.4.0-rc01"　を追記
「2.4.0-rc01」の部分：バージョンもお好きな感じで

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


# 2画面遷移サンプル

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

![uploading...0]()


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/4fcc3e40-cdcc-0c5b-a8b5-785005963d62.png)


## コード


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

```Kotlin: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画面へ")
        }
    }
}

```



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

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

①エラーがないことを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/e42739b8-04a5-c93e-5993-66ba247de119.png)

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

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

Main画面が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/2de8968d-8ad0-8464-1176-316894ca83db.png)

「Next画面へ」ボタンをクリック
↓
Next画面が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/80858763-ef4b-9f54-1032-7ba1ab0578f4.png)

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


動作を止める場合。赤い四角「Stop Interactive Mode」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/8e40250f-712e-59df-75bb-fd9c9aea30ac.png)




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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/f0003229-a29f-45c2-09b9-02d90483d7a3.png)

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

<details><summary>コード</summary><div>



```Kotlin: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の画面へ")
        }
    }
}

```
</div></details>




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

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

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

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