목적지 작성 - 탐색 라이브러리

상용구 코드를 제거하기 위해 Compose 대상 라이브러리를 사용하도록 Jetpack Compose 탐색 앱을 변환하는 방법은 무엇입니까?

이 기사는 원래 2022년 4월 30일 vtsen.hashnode.dev에 게시되었습니다.

이전 게시물에서는 매우 간단한 Jetpack Compose 탐색을 빌드하고 NavRoute 봉인된 클래스를 사용하여 여러 위치에서 하드 코딩 문자열을 방지했습니다.

그러나 더 나은 솔루션은 이 멋진Compose Destinations 라이브러리를 사용하는 것일 수 있습니다! 이 라이브러리를 사용하도록 이 앱을 변환하는 방법을 살펴보겠습니다.

build.gradle 설정(모듈 수준)

1. KSP 플러그인 추가

추가com.google.devtools.ksp 플러그인

plugins {
    ...
    id 'com.google.devtools.ksp' version '1.6.10-1.0.2'
}

2. 생성된 KSP 경로 추가

android 블록 내부에 생성된 KSP 경로 추가

android {
    ...
    applicationVariants.all { variant ->
        kotlin.sourceSets {
            getByName(variant.name) {
                kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin")
            }
        }
    }
}

3. Compose 대상 종속성 추가

dependencies {
    ...
    implementation 'io.github.raamcosta.compose-destinations:core:1.5.1-beta'
    ksp 'io.github.raamcosta.compose-destinations:ksp:1.5.1-beta'   
} 

내비게이션 그래프 구축

기존 탐색 그래프 관련 코드(예: BuildNavGraph() 및 NavRoute ) 코드를 완전히 제거하고 Compose Destinations 주석으로 대체할 수 있습니다.

1. @Destination으로 화면에 주석 달기

구성 가능한 모든 화면에 @Destination로 주석 달기

@Destination
@Composable
fun LoginScreen(
   ...
) {
...

@Destination
@Composable
fun HomeScreen(
   ...
) {
...
@Destination
@Composable
fun ProfileScreen(
   ...
) {
...
@Destination
@Composable
fun SearchScreen(
   ...
) {
...

2. @RootNavGraph(start = true)로 시작 화면에 주석 달기

@RootNavGraph(start = true)
@Destination
@Composable
fun LoginScreen(
   ...
) 
...

After you annotate the composable screen, make sure you Rebuild Project so all the necessary generated code will be generated.

3. NavHostController를 DestinationsNavigator로 교체

원래 로그인 구성 가능 화면에는 이navigateToHome 콜백이 있습니다.

fun LoginScreen(
    navigateToHome: () -> Unit
) {
    ...
}

이제 DestinationsNavigator 매개변수로 대체할 수 있습니다.

fun LoginScreen(
    navigator: DestinationsNavigator
) {
   ...
}

탐색하려면 원래 구현 사용NavHostController

navController.navigate(NavRoute.Home.path)

이제 DestinationsNavigator로 대체됩니다.

navigator.navigate(HomeScreenDestination)

HomeScreenDestination is the generated code.

아래의 다른 변환 예

// #1  - popBackStack() 
// convert NavHostController
navController.popBackStack()
// to DestinationsNavigator
navigator.popBackStack()

// #2 - navigate with arguments
// convert NavHostController
navController.navigate(NavRoute.Profile.withArgs(id.toString(), showDetails.toString()))
// to DestinationsNavigator
navigator.navigate(ProfileScreenDestination(7, true))

// #3  - popUpTo() 
// convert NavHostController
navController.navigate(NavRoute.Login.path) {
        popUpTo(NavRoute.Login.path) {inclusive = true}
}
// to DestinationsNavigator
navigator.navigate(LoginScreenDestination) {
   popUpTo(LoginScreenDestination.route) {inclusive = true}
}

As you can see, the DestinationsNavigator is basically a wrapper for NavHostController which makes it a lot easier.

4. 기본 구성 가능 화면에서 DestinationsNavHost() 호출

교체BuildNavGraph()

@Composable
private fun MainScreen() {
    SimpleNavComposeAppTheme {
        val navController = rememberNavController()
        BuildNavGraph(navController)
    }
}

DestinationsNavHost()와 함께

@Composable
private fun MainScreen() {
    SimpleNavComposeAppTheme {
        DestinationsNavHost(navGraph = NavGraphs.root)
    }
}

5. @Preview에서 EmptyDestinationsNavigator 사용

이 라이브러리의 작성자 덕분에 Rafael Costa는 실제로 EmptyDestinationsNavigator 를 null 구현으로 사용할 수 있고 @preview 를 전달하는 대신 null 에 사용할 수 있다고 말했습니다.
navigator = null 를 전달하는 대신 navigator = EmptyDestinationsNavigator 를 전달할 수 있습니다.

@Preview(showBackground = true)
@Composable
private fun DefaultPreview() {
    SimpleNavComposeAppTheme(useSystemUiController = false) {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {     
            HomeScreen(navigator = EmptyDestinationsNavigator)
       }
    }
}

이렇게 하면 구성 가능한 함수에서 nullable 변수 매개변수를 선언navigator: DestinationsNavigator?할 필요가 없습니다.

완료!

결론

이 도서관은 굉장합니다! 많은 상용구 코드를 제거합니다. 내가 바라는 한 가지는 위의 Step 1 - Add KSP Plugin 및 Step 2 - Add Generated KSP Path과 같이 설정할 필요가 없지만 기술적으로 실현 가능하지 않을 수 있습니다.

소스 코드

변환 차이는 here입니다.

GitHub 저장소: Demo_SimpleNavigationCompose (compose_destinations 분기)

또한보십시오

Simple Jetpack Compose Navigation Example

Android Development Tips and Tricks