Jetpack Compose를 통해 Android는 활동에 대한 프래그먼트 트랜잭션, 탐색 및 의도를 사용하여 이동하는 암시적 방법을 포기합니다. 요즘 앱은 처음에 사용자가 취할 수 있는 모든 가능한 경로를 선언해야 합니다.

Jetpack Compose는 여러 구성요소를 탐색하는 기본 방법을 제공합니다. NavHost 및 NavController를 사용하면 필요에 따라 컴포저블을 푸시하거나 팝할 수 있습니다. 그럼 시작하겠습니다.

종속성

먼저 프로젝트에 종속성을 추가해야 합니다. 현재 버전을 얻으려면 여기로 이동하십시오 .

implementation "androidx.navigation:navigation-compose:2.5.3"

구현

먼저 NavHost 및 NavController가 프로젝트에 도입되었습니다 .

NavHost는 사용자가 취할 수 있는 경로 선언을 호스팅합니다. NavController는 선언된 경로를 이동하기 위한 API를 제공합니다. 경로 는 앱에 표시될 수 있는 각 화면/기타 컴포저블에 대해 고유한 경로입니다.

인스턴스화

NavController는 rememberNavController() 로 인스턴스화되므로 컴포저블을 다시 빌드해도 NavController는 동일합니다.

출발 목적지

NavController 및 시작 대상이 있는 NavHost가 선언됩니다. 시작 목적지는 첫 화면 경로의 이름입니다.

경로 선언

사용자가 이동할 수 있는 모든 옵션이 선언됩니다. 두 화면 모두 경로를 선언해야 합니다. 경로 이름은 NavController가 경로 이름을 사용하여 표시할 다음 컴포저블을 식별하기 때문에 고유합니다.

모든 컴포저블은 navcontroller.navigate("route to composable")를 통해 표시될 수 있습니다 .

사용자의 뒤로 버튼을 모방하기 위해 navcontroller.popBackStack()을 사용할 수 있습니다. 이렇게 하면 모든 컴포저블의 스택에서 현재 컴포저블이 나타납니다.

스택 은 컴포저블/스크린의 히스토리로 볼 수 있으므로 첫 번째 스크린이 루트이고 다른 컴포저블이 그 위에 놓입니다. 따라서 두 번째 화면으로 이동하면 두 번째 화면이 스택 맨 위에 추가됩니다. 스택을 꺼내면 상단 컴포저블이 제거됩니다.

청소

앞으로 더 오류가 발생하기 쉽도록 [aths를 더 깔끔하게 선언해야 합니다. 따라서 모든 위치에 문자열을 추가하지 말고 앱의 모든 경로를 저장하는 독립 실행형 파일을 만드십시오. 이후에는 선언된 상수를 사용해야 합니다. 난처한 오타는 앞으로 피할 것입니다. 또한 앱이 어떻게 구성되어 있는지에 대한 보다 설명적인 보기를 제공합니다.

여러 화면을 거쳐 루트로 돌아가기

이제부터는 내비게이션에 후속 화면을 추가하는 것이 쉽습니다. NavHost는 컴포저블을 하나 더 확장해야 하며 화면에서 이동하려면 더 많은 버튼을 채택해야 합니다.

세 번째 화면에는 사용자를 첫 번째 화면으로 되돌리고 쌓인 모든 구성 요소를 청소하는 버튼이 있습니다.

스택에서 여러 컴포저블을 팝하려면 navController.popBackStack("팝핑을 중지하려는 화면", 포함: false)을 사용할 수 있습니다.

포괄적 매개 변수 는 대상 컴포저블도 제거해야 하는지 여부를 알려줍니다. 첫 번째 화면을 제거하면 빈 화면이 나오므로 false 값이 전달됩니다.

화면에 값 전달

대부분의 앱은 사용자의 이전 선택에 따라 정보나 데이터를 표시하려고 합니다. 다른 화면은 무엇을 보여줄지 알아야 하므로 값을 전달해야 합니다.

이는 경로 내부에 값을 넣어 수행하므로 값이 문자열로 인코딩된 다음 다른 화면에서 구문 분석됩니다.

선언

첫째, 경로는 다음과 같이 수행되는 값의 존재를 선언해야 합니다.

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

이제 첫 번째 화면에는 하나의 텍스트 필드가 포함되며 이 내용은 두 번째 화면으로 전달됩니다.

내비게이션의 뷰에 복잡한 데이터를 전달하지 마세요.

하나의 값만 뷰에 전달되어야 합니다. 다른 데이터는 ViewModel 또는 다른 논리 장치의 도움으로 얻어야 ​​합니다. 그러면 코드가 훨씬 더 깨끗하고 테스트 가능해집니다.

예를 들어 제품이나 사용자에 대한 세부 정보를 표시하려면 보기에만 ID를 전달해야 합니다. 논리 장치는 ID를 획득하고 인터넷이나 데이터베이스에서 더 자세한 정보를 파헤칩니다. 그런 다음 데이터는 탐색 구성 요소의 도움 없이 보기에 직접 전달됩니다.

자원:

Android 개발에 대한 추가 정보: