Android(kotlin) - JetPack Compose - Navigation

💡 Navigation Compose는 Compose 배포 버전과 동일하게 업데이트 되지 않습니다.
때문에, https://developer.android.com/jetpack/compose/navigation?hl=ko 에서 Navigation 버전을 확인하시고 설정을 진행해야 합니다.

설정

• 버전확인!

dependencies {
    val nav_version = "2.5.3"

    implementation("androidx.navigation:navigation-compose:$nav_version")
}

dependencies {
    implementation("androidx.navigation:navigation-compose:2.5.3")
}

▪️popUpTo

// room1으로 이동하기 전 home을 제외한 나머지 스택을 모두 제거 후 room1으로 이동 
navController.navigate("room1") {
    popUpTo("home") 
}

• Home, Room1, Room2가 있다고 가정

• 위 코드를 보면 홈으로 이동시 popUpTo를 지정

• popUpTo는 Home → Room1으로 이동후 Room1 → Room2로 이동하면 Room1은 사라짐
  (상태 Home → Room2)

• 즉, Home과 이동하려는 곳 사이를 제거한다.

• inclusive

  navController.navigate("Home") {
                          popUpTo("Home") {
                              inclusive = true
                          }
                      }

  • inclusive = ture를 사용하면 Home까지 제거를 한다.
  • ex) 동작 방식
  1. 처음 Home → Room1 으로 이동시 Home이 제거된다. (상태 : Room1)
  2. Room1 → Room2로 이동시에는 popUpto가 동작하지 않는다. (상태 Room1 → Room2)
  3. 그리고 다시 Home으로 이동하면 Room1 → Room2 → Home으로 앞에 Home이 없어 아무것도 제거되지 않는다.
  4. 여기서 Room1으로 이동하면 Room1 → Room2 → Room1으로 Home이 제거된다.

💡 `inclusive`는 언제 주로 사용할까? 만약 Home에서 Login이 성공하면 광고 화면으로 이동한다고 가정하자. 이때 Login으로 이동시 `inclusive를 적용한 popUpTo`를 사용하면 로그인 성공 후 광고화면에서 뒤로가기를 하면 Home 화면으로 이동할 것이다.

▪️launchSingleTop

• launchSingleTop: 스택 최상단에 올라가 있으면, 스택에 쌓지 않음

navController.navigate("Home") {
                        launchSingleTop = true
                    }

• Home에서 Home으로 이동한다고 가정
• launchSingleTop을 사용하지 않으면 Home에서 Home으로 이동하는 버튼을 클릭시 스택에 Home이 여러개 쌓임
• launchSingleTop을 사용하면 Home을 여러번 눌러도 이미 Home이 있기 때문에 더이상 쌓이지 않음

▪️ Argument Nav

• 버튼 클리깃 Argument/dong을 전달
• 해당 composable은 전달받은 {userId}로 이동

@Composable
fun Navigation(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
) {
    // NavHost 생성
    // 컨트롤러, 목적지, modifier
    NavHost(navController, "Home", modifier = modifier) {
        // 라우터 설정
        composable("Home") {
            Column {
                // argument nav
                Button(onClick = {
                    navController.navigate("Argument/dong") {
                        launchSingleTop = true
                    }
                }) {
                    Text("userId 입력값 으로 연결 이동")
                }
            }
        }

        composable("Argument/{userId}") {
            val userId = it.arguments?.get("userId")
            Text(text = "userId: $userId")
        }
    }
}

전체 코드

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.MaterialTheme
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.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.compose_example.ui.theme.Compose_exampleTheme

class NavActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Compose_exampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    Navigation()
//                    Greeting("Android")
                }
            }
        }
    }
}

/**
 * Navigation 이동은 stack이 쌓인다.
 */
@Composable
fun Navigation(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
) {
    // NavHost 생성
    // 컨트롤러, 목적지, modifier
    NavHost(navController, "Home", modifier = modifier) {
        // 라우터 설정
        composable("Home") {
            Column {
                Text(text = "Home")
                Button(onClick = {
                    navController.navigate("room1")
                }) {
                    Text("room1 이동")
                }
                Button(onClick = {
                    navController.navigate("room2")
                }) {
                    Text("room2 이동")
                }
                Button(onClick = {
                    navController.navigate("Home") {
                        launchSingleTop = true
                    }
                }) {
                    Text("Home으로 이동")
                }

                // argument nav
                Button(onClick = {
                    navController.navigate("Argument/dong") {
                        launchSingleTop = true
                    }
                }) {
                    Text("userId 입력값 으로 연결 이동")
                }
            }
        }

        composable("room1") {
            Column {
                Text(text = "room1")
                Button(onClick = {
                    navController.navigate("Home")
                }) {
                    Text("Home으로 이동")
                }
                Button(onClick = {
                    navController.navigate("room2")
                }) {
                    Text("room2 이동")
                }
            }
        }

        composable("room2") {
            Column {
                Text(text = "room2")
                Button(onClick = {
                    navController.navigate("Home")
                }) {
                    Text("Home으로 이동")
                }
                Button(onClick = {
                    navController.navigate("room1")
                }) {
                    Text("room1 이동")
                }
            }
        }

        composable("Argument/{userId}") {
            val userId = it.arguments?.get("userId")
            Text(text = "userId: $userId")
        }
    }
}