navigation-compose 依存関係を持つ共有要素を使用するには、次のコマンドを使用します。
前に示したものと同じコンセプトです。次の Modifier.sharedElement()
を使用します。
AnimatedVisibilityScope
をパラメータとして受け取ります。これを使用して
何をいつ表示するかを決定します。
共有要素で navigation-compose
を使用する例を次に示します。
@Preview @Composable fun SharedElement_PredictiveBack() { SharedTransitionLayout { val navController = rememberNavController() NavHost( navController = navController, startDestination = "home" ) { composable("home") { HomeScreen( navController, this@SharedTransitionLayout, this@composable ) } composable( "details/{item}", arguments = listOf(navArgument("item") { type = NavType.IntType }) ) { backStackEntry -> val id = backStackEntry.arguments?.getInt("item") val snack = listSnacks[id!!] DetailsScreen( navController, id, snack, this@SharedTransitionLayout, this@composable ) } } } } @Composable private fun DetailsScreen( navController: NavHostController, id: Int, snack: Snack, sharedTransitionScope: SharedTransitionScope, animatedContentScope: AnimatedContentScope ) { with(sharedTransitionScope) { Column( Modifier .fillMaxSize() .clickable { navController.navigate("home") } ) { Image( painterResource(id = snack.image), contentDescription = snack.description, contentScale = ContentScale.Crop, modifier = Modifier .sharedElement( sharedTransitionScope.rememberSharedContentState(key = "image-$id"), animatedVisibilityScope = animatedContentScope ) .aspectRatio(1f) .fillMaxWidth() ) Text( snack.name, fontSize = 18.sp, modifier = Modifier .sharedElement( sharedTransitionScope.rememberSharedContentState(key = "text-$id"), animatedVisibilityScope = animatedContentScope ) .fillMaxWidth() ) } } } @Composable private fun HomeScreen( navController: NavHostController, sharedTransitionScope: SharedTransitionScope, animatedContentScope: AnimatedContentScope ) { LazyColumn( modifier = Modifier .fillMaxSize() .padding(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp) ) { itemsIndexed(listSnacks) { index, item -> Row( Modifier.clickable { navController.navigate("details/$index") } ) { Spacer(modifier = Modifier.width(8.dp)) with(sharedTransitionScope) { Image( painterResource(id = item.image), contentDescription = item.description, contentScale = ContentScale.Crop, modifier = Modifier .sharedElement( sharedTransitionScope.rememberSharedContentState(key = "image-$index"), animatedVisibilityScope = animatedContentScope ) .size(100.dp) ) Spacer(modifier = Modifier.width(8.dp)) Text( item.name, fontSize = 18.sp, modifier = Modifier .align(Alignment.CenterVertically) .sharedElement( sharedTransitionScope.rememberSharedContentState(key = "text-$index"), animatedVisibilityScope = animatedContentScope, ) ) } } } } } data class Snack( val name: String, val description: String, @DrawableRes val image: Int )
共有要素による予測型「戻る」
共有要素で予測型「戻る」を使用する場合は、
最新の navigation-compose
依存関係を使用します。次のスニペットを使用します。
説明します。
dependencies {
def nav_version = "2.8.0-beta02"
implementation "androidx.navigation:navigation-compose:$nav_version"
}
android:enableOnBackInvokedCallback="true"
を AndroidManifest.xml
に追加
予測型「戻る」を有効にします。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
android:maxSdkVersion="28" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:enableOnBackInvokedCallback="true"
android:theme="@style/Theme.Snippets">