Compose を使用したナビゲーション
2023.06.25
画面遷移について勉強したことの備忘録です。
表紙からFirstScreen画面に遷移するイメージで作成してみました。
設定
アプリ モジュールの build.gradleファイルに次の依存関係を使用する。
dependencies {
-----------
implementation "androidx.navigation:navigation-compose:2.6.0"
-----------
}
NavHost の作成
NavController は Navigation コンポーネントの中心的な API： アプリ内の画面を構成するコンポーザブルのバックスタックと各画面の状態を追跡する。
NavController を作成するには、コンポーザブルで rememberNavController() メソッドを使用する。 NavController は、これを参照する必要があるすべてのコンポーザブルがアクセスできるコンポーザブル階層内の場所に作成する必要がある。
各 NavController は 1 つの NavHost コンポーザブルに関連付ける必要がある。
NavHost を作成するには、rememberNavController() を使って以前に作成された NavController と、グラフの開始デスティネーションのルートが必要。
@Composable
fun NavApp(){
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "cover") {
composable("cover"){
Cover(navController = navController)
}
composable("firstScreen"){
FirstScreen(navController = navController)
}
}
}
コンポーザブルに移動する
ナビゲーション グラフ内のコンポーザブルのデスティネーションに移動するには、navigate メソッドを使用する必要がある。
navigate は、デスティネーションのルートを表す単一の String パラメータを取る。
FloatingActionButton（Open）をタップしたときに FirestScreenに移動するようにしました。
@Composable
fun Cover(navController: NavController){
Box(modifier = Modifier.fillMaxSize()){
------------------------------------------------------------
{
FloatingActionButton(
onClick = {
navController.navigate("firstScreen")
},
containerColor = Color(0xFF00CC11),
shape = RoundedCornerShape(20.dp),
modifier = Modifier.size(95.dp, 50.dp),
) {
Text(text = "Open", color = Color.White, fontSize = 25.sp)
}
}
}
}
BackボタンをTopAppBar内に追加しました
-----------------------------------------------
navigationIcon = {
IconButton(onClick = { navController.popBackStack() }) {
Icon(Icons.Filled.ArrowBack, "Back")
}
}
-----------------------------------------------------------
コード
build.gradle (:app)
＊Imageに Coil を使用しています。
plugins {
id 'com.android.application'
id 'org.jetbrains.kotlin.android'
}
android {
namespace 'com.example.memorandum'
compileSdk 33
defaultConfig {
applicationId "com.example.memorandum"
minSdk 24
targetSdk 33
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.10.1'
implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
implementation 'androidx.activity:activity-compose:1.7.2'
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'
implementation "androidx.navigation:navigation-compose:2.6.0"
implementation "io.coil-kt:coil-compose:2.0.0"
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'
}
MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NavApp()
}
}
}
NavApp.kt
@Composable
fun NavApp(){
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "cover") {
composable("cover"){
Cover(navController = navController)
}
composable("firstScreen"){
FirstScreen(navController = navController)
}
}
}
Cover.kt
@Composable
fun Cover(navController: NavController){
Box(modifier = Modifier.fillMaxSize()){
Image(painter = rememberAsyncImagePainter(
model = R.drawable.topscreen),
contentDescription = null,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
Column(modifier = Modifier
.fillMaxSize()
.padding(0.dp, 0.dp, 70.dp, 55.dp),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.End
){
FloatingActionButton(
onClick = {
navController.navigate("firstScreen")
},
containerColor = Color(0xFF00CC11),
shape = RoundedCornerShape(20.dp),
modifier = Modifier.size(95.dp, 50.dp),
) {
Text(text = "Open", color = Color.White, fontSize = 25.sp)
}
}
}
}
FirstScreen.kt
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FirstScreen(navController: NavController) {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = {
Text(
"FirstScreen",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = TopAppBarDefaults.centerAlignedTopAppBarColors(Color.Green),
navigationIcon = {
IconButton(onClick = { navController.popBackStack() }) {
Icon(Icons.Filled.ArrowBack, "Back")
}
}
)
},
content = { innerPadding ->
}
)
}