{"id":2627,"date":"2025-11-04T11:12:51","date_gmt":"2025-11-04T02:12:51","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2627"},"modified":"2025-11-07T11:03:22","modified_gmt":"2025-11-07T02:03:22","slug":"composenavigation","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/04\/composenavigation\/","title":{"rendered":"[Compose]Example3-\ud654\uba74\uc774\ub3d9\/Navigation"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb \uc571 \ud654\uba74 \uac04\uc758 \ud654\uba74 \uc774\ub3d9\ud558\ub294 \ucf54\ub4dc \uc785\ub2c8\ub2e4.<br>This is the code to move between app screens.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb\ub124\ube44\uac8c\uc774\uc158\uc774\ub780 \ud654\uba74\uc774\ub3d9 \uae30\ub2a5\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<br>Navigation refers to the screen movement function.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc640 \uad6c\uc870\uac00 \ub9e4\uc6b0 \uc720\uc0ac\ud569\ub2c8\ub2e4.<br>It is very similar in structure to React Native.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub098\uba38\uc9c0 \uc124\uba85\uc740 \ucf54\ub4dc \uc8fc\uc11d\uc744 \ucc38\uace0\ud558\uc138\uc694.<br>Please refer to the code comments for the rest of the explanation.<\/p>\n\n\n\n<p><strong>1.\ucf54\ub4dc\/Code<\/strong><\/p>\n\n\n\n<p>\u2714\ufe0f \ub124\uc774\uac8c\uc774\uc158 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc544\ub798\uc758 \ubaa8\ub4c8\uc124\uc815\uc744 \ud574\uc57c \ud569\ub2c8\ub2e4.<br>To use the navigation function, you must configure the module settings below.<\/p>\n\n\n\n<p>\u2714\ufe0fbuil.gradle.kts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dependencies {\n    implementation(libs.androidx.core.ktx)\n    implementation(libs.androidx.lifecycle.runtime.ktx)\n    implementation(libs.androidx.activity.compose)\n    implementation(platform(libs.androidx.compose.bom))\n    implementation(libs.androidx.compose.ui)\n    implementation(libs.androidx.compose.ui.graphics)\n    implementation(libs.androidx.compose.ui.tooling.preview)\n    implementation(libs.androidx.compose.material3)\n    testImplementation(libs.junit)\n    androidTestImplementation(libs.androidx.junit)\n    androidTestImplementation(libs.androidx.espresso.core)\n    androidTestImplementation(platform(libs.androidx.compose.bom))\n    androidTestImplementation(libs.androidx.compose.ui.test.junit4)\n    debugImplementation(libs.androidx.compose.ui.tooling)\n    debugImplementation(libs.androidx.compose.ui.test.manifest)\n<strong>    \/\/ \ub124\uc774\uac8c\uc774\uc158 \ubaa8\ub4c8 \/ navigation module\n    val nav_version = \"2.9.5\" \/\/ \ucd5c\uc2e0 \ubc84\uc804 \ud655\uc778 \/ check latest version\n    implementation(\"androidx.navigation:navigation-compose:$nav_version\")<\/strong>\n}<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f MainActivity.kt<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package com.freelifemakers.navigation\n\nimport android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.activity.enableEdgeToEdge\nimport androidx.compose.foundation.background\nimport androidx.compose.foundation.layout.Arrangement\nimport androidx.compose.foundation.layout.Column\nimport androidx.compose.foundation.layout.Spacer\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.foundation.layout.fillMaxWidth\nimport androidx.compose.foundation.layout.height\nimport androidx.compose.foundation.layout.padding\nimport androidx.compose.foundation.layout.width\nimport androidx.compose.material3.Button\nimport androidx.compose.material3.MaterialTheme\nimport androidx.compose.material3.Scaffold\nimport androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.graphics.Color\nimport androidx.compose.ui.tooling.preview.Preview\nimport androidx.compose.ui.unit.dp\nimport com.freelifemakers.navigation.ui.theme.NavigationTheme\nimport androidx.navigation.NavController \/\/ Add NavController\nimport androidx.navigation.compose.NavHost\nimport androidx.navigation.compose.composable\nimport androidx.navigation.compose.rememberNavController\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        enableEdgeToEdge()\n        setContent {\n            NavigationTheme {\n                    MainAppScreen() \/\/ \uc571 \uc2e4\ud589 \/ Run App\n\n\n\n\/\/                == \uae30\uc874 \ucf54\ub4dc \uc8fc\uc11d \ucc98\ub9ac \/ Comment out existing code ==\n\/\/                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -&gt;\n\/\/                    Greeting(\n\/\/                        name = \"Android\",\n\/\/                        modifier = Modifier.padding(innerPadding)\n\/\/                    )\n\/\/                }\n\n\n            }\n        }\n    }\n}\n\n\n@Composable\nfun MainAppScreen() {\n    \/\/ NavController \uc0dd\uc131 \ubc0f \uc0c1\ud0dc \uae30\uc5b5\n    \/\/ Create NavController and remember its state\n    val navController = rememberNavController()\n\n    Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -&gt;\n\n        \/\/ NavHost \uc124\uc815, \ub77c\uc6b0\ud130 \uc815\uc758\n        \/\/ NavHost settings, Define router\n        NavHost(\n            navController = navController,\n            startDestination = \"home_screen\", \/\/ \uc2dc\uc791 \ud654\uba74 \uc124\uc815 \/ Start screen settings\n            modifier = Modifier.padding(innerPadding)\n        ) {\n            \/\/ 'home_screen' Route \uc815\uc758 \/ Defining the 'home_screen' Route\n            \/\/ \ub77c\uc6b0\ud130 \uc2dd\ubcc4\uc790 \uc815\uc758 \/ Router Identifier Definition\n            composable(\"home_screen\") {\n                \/\/ \ub77c\uc6b0\ud130\uc5d0 \ud574\ub2f9\ud558\ub294 \ud654\uba74 \uc2e4\ud589\n                \/\/ Run the screen corresponding to the router\n                HomeScreen(navController = navController)\n            }\n\n            \/\/ 'detail_screen' Route \uc815\uc758\n            \/\/ Define the 'detail_screen' Route\n            composable(\"detail_screen\") {\n                DetailScreen(navController = navController)\n            }\n        }\n\n    }\n}\n\n\/\/ --- \ucef4\ud3ec\uc988 \uc815\uc758 \/ Compose Definition ---\n\n\/\/ Home \ud654\uba74 \/ Home Screen\n@Composable\nfun HomeScreen(navController: NavController, modifier: Modifier = Modifier) {\n    Column(\n        modifier = modifier\n            .fillMaxSize()\n            .padding(16.dp),\n        \/\/ \uc218\uc9c1 \uc815\ub82c(\uac00\uc6b4\ub370) \/ Vertical alignment (center)\n        verticalArrangement = Arrangement.Center,\n        \/\/ \uc218\ud3c9 \uc815\ub82c(\uac00\uc6b4\ub370) \/ Horizontal alignment (center)\n        horizontalAlignment = Alignment.CenterHorizontally\n\n    ) {\n        Text(text = \"\ud83c\udfe0 \ud648 \ud654\uba74\/Home Screen\")\n        Spacer(modifier = Modifier\n            \/\/ \ud328\ub529\uc744 \ub098\uc911\uc5d0 \uc801\uc6a9\ud558\uba74 \uc801\uc6a9\uc548\ub428 \/ If you apply padding later, it will not be applied.\n            .padding(vertical = 10.dp)\n            .height(2.dp)\n            .width(200.dp)\n            .background(Color.DarkGray)\n\n        )\n        Button(\n            \/\/ \ubc84\ud2bc \ud074\ub9ad \uc2dc \"detail_screen\"\uc73c\ub85c \uc774\ub3d9\n            \/\/ When the button is clicked, go to \"detail_screen\"\n            onClick = { navController.navigate(\"detail_screen\") }\n        ) {\n            Text(\"\uc0c1\uc138 \ud654\uba74\uc73c\ub85c \uac00\uae30 \/ Go to details screen\")\n        }\n    }\n}\n\n\/\/ Detail \ud654\uba74 \/ Detail Screen\n@Composable\nfun DetailScreen(navController: NavController, modifier: Modifier = Modifier) {\n    Column(\n        modifier = modifier\n            .fillMaxSize()\n            .padding(16.dp),\n        verticalArrangement = Arrangement.Center,\n        horizontalAlignment = Alignment.CenterHorizontally\n    ) {\n        Text(text = \"\ud83d\udcc4 \uc0c1\uc138 \ud654\uba74\uc785\ub2c8\ub2e4. \/ This is a detailed screen.\")\n        Spacer(modifier = Modifier.height(20.dp)) \/\/ \uacf5\uac04\ud655\ubcf4 \/ Securing space\n        Button(\n            \/\/ \ub4a4\ub85c \uac00\uae30 (\ubc31 \uc2a4\ud0dd\uc5d0\uc11c \ud604\uc7ac \ud654\uba74 \uc81c\uac70)\n            \/\/ Go back (remove current screen from back stack)\n            onClick = { navController.popBackStack() }\n            \/*\n            *\n            * \uc544\ub798\uc758 \ucf54\ub4dc\ucc98\ub7fc \uc0ac\uc6a9\ud558\uba74 \uc2a4\ud0dd\uc774 \ub204\uc801 \ub428\n            * If you use the code below, the stack will accumulate.\n            *\n            * onClick = { navController.navigate(\"home_screen\") }\n            *\n            * *\/\n        ) {\n            Text(\"\ub4a4\ub85c \uac00\uae30 \/ Go back\")\n        }\n    }\n}\n\n\/\/ == \uae30\uc874 \ucf54\ub4dc \/ Existing code ==\n@Composable\nfun Greeting(name: String, modifier: Modifier = Modifier) {\n    Text(\n        text = \"Hello $name!\",\n        modifier = modifier\n    )\n}\n\n@Preview(showBackground = true)\n@Composable\nfun GreetingPreview() {\n    NavigationTheme {\n        Greeting(\"Android\")\n    }\n}<\/code><\/pre>\n\n\n\n<p>2.\uc2a4\ud06c\ub9b0 \uc0f7 \/ Screen Shot<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"1024\" data-id=\"2634\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-1-457x1024.png\" alt=\"\" class=\"wp-image-2634\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-1-457x1024.png 457w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-1-134x300.png 134w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-1.png 472w\" sizes=\"auto, (max-width: 457px) 100vw, 457px\" \/><figcaption class=\"wp-element-caption\">Home Screen<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"1024\" data-id=\"2633\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-2-463x1024.png\" alt=\"\" class=\"wp-image-2633\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-2-463x1024.png 463w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-2-136x300.png 136w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-navigation-2.png 480w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><figcaption class=\"wp-element-caption\">Detail Screen<\/figcaption><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb \uc571 \ud654\uba74 \uac04\uc758 \ud654\uba74 \uc774\ub3d9\ud558\ub294 \ucf54\ub4dc \uc785\ub2c8\ub2e4.This is the code to move between app screens. \ud83d\udc49\ud83c\udffb\ub124\ube44\uac8c\uc774\uc158\uc774\ub780 \ud654\uba74\uc774\ub3d9 \uae30\ub2a5\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.Navigation refers to the screen movement function. \ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc640 \uad6c\uc870\uac00 \ub9e4\uc6b0 \uc720\uc0ac\ud569\ub2c8\ub2e4.It is very similar in structure to React Native. \ud83d\udc49\ud83c\udffb \ub098\uba38\uc9c0 \uc124\uba85\uc740 \ucf54\ub4dc \uc8fc\uc11d\uc744 \ucc38\uace0\ud558\uc138\uc694.Please refer to the code comments for the rest of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1],"tags":[],"class_list":["post-2627","post","type-post","status-publish","format-standard","hentry","category-kotlin","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2627"}],"version-history":[{"count":10,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2627\/revisions"}],"predecessor-version":[{"id":2650,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2627\/revisions\/2650"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}