이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Jetpack 탐색을 Navigation Compose로 이전

Navigation Compose API를 사용하면 Jetpack Navigation의 구성요소를 활용하면서 설계하는 방법을 알아봅니다

이 페이지에서는 프래그먼트 기반 Jetpack Navigation에서 Navigation Compose(Jetpack으로의 뷰 기반 대규모 UI 이전의 일부) 편지쓰기를 클릭합니다.

이전 사전 요구사항

모든 구성 요소를 상응하는 화면 컴포저블이 있는 프래그먼트. 화면 컴포저블에는 다음이 포함될 수 있습니다. Compose와 View 콘텐츠가 혼합되어 있지만 모든 탐색 대상은 컴포저블을 사용하여 Navigation Compose 이전을 사용 설정합니다. 그때까지는 상호 운용성 뷰에서 프래그먼트 기반 탐색 구성요소를 계속 사용하고 Compose 코드베이스 자세한 내용은 탐색 상호 운용성 문서를 참고하세요. 확인할 수 있습니다

Compose 전용 앱에서 Navigation Compose를 사용하는 것이 기본 요건은 아닙니다. 다음을 수행할 수 있습니다. 프래그먼트 기반 탐색 구성요소를 계속 사용합니다. 구성 가능한 콘텐츠를 호스팅하기 위한 프래그먼트입니다.

이전 단계

Google에서 권장하는 이전 전략을 따르고 있는지, 모든 탐색 대상이 도착하는 지점에 도달하게 됩니다. 화면 컴포저블과 Fragment는 구성 가능한 컨테이너 역할만 합니다. 이 시간 탐색 Compose로 이전할 수 있습니다.

앱이 이미 UDF 디자인 패턴 및 Jetpack Compose와 Navigation Compose로 이전하면 안 됨 UI 레이어 외에 앱의 다른 레이어에 대한 주요 리팩터링이 필요합니다.

Navigation Compose로 이전하려면 다음 단계를 따르세요.

앱에 Navigation Compose 종속 항목을 추가합니다.

App-level 컴포저블을 만들어 Activity에 뷰 레이아웃 설정을 대체하는 Compose 진입점:

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}MigrationCommonScenariosSnippets.kt

필요한 모든 컴포저블이 있는 위치에 NavController를 설정합니다. 액세스할 수 있음을 참조합니다 (일반적으로 App 내부에 있음). 있습니다. 이 접근 방식은 상태 호이스팅 원칙과 탐색을 위한 정보 소스로 NavController를 사용할 수 있음 및 백 스택 유지에 관한 변경사항을 살펴보겠습니다.
```
@Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}MigrationCommonScenariosSnippets.kt
```

앱 컴포저블 내에 앱의 NavHost를 만들고 다음을 전달합니다. navController:

@Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        // ...
    }
}MigrationCommonScenariosSnippets.kt

composable 대상을 추가하여 탐색 그래프를 빌드합니다. 만일 이전에 Compose로 이전한 경우 이 단계는 이러한 화면 컴포저블을 프래그먼트에서 composable로 추출 대상 유형:

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        composable("first") {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable("second") {
            SecondScreen(/* ... */)
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Compose UI 설계에 관한 안내를 따랐다면 특히 ViewModel 및 탐색 이벤트가 다음 단계는 구성 가능한 함수와 관련해 ViewModel를 제공하는 방법을 각 화면 컴포저블 종종 Hilt 삽입과 통합을 사용할 수 있음 hiltViewModel를 통해 Compose 및 Navigation으로 포인트를 얻는 방법을 보여줍니다.
```
@Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}MigrationCommonScenariosSnippets.kt
```

모든 findNavController() 탐색 호출을 navController로 바꿉니다. 이를 각 컴포저블 화면에 탐색 이벤트로 전달합니다. 전체 navController를 전달하는 것보다. 이 접근 방식은 최적의 구성 가능한 함수의 이벤트를 호출자와 호출자에게 노출하는 navController를 단일 정보 소스로 유지합니다.

이전에 Safe Args 플러그인을 사용하여 탐색 경로 및 작업을 포함하는 경우 경로로 대체합니다. 대상마다 고유한 컴포저블의 문자열 경로입니다.
데이터를 전달할 때 Safe Args를 대체하려면 인수를 사용합니다.

Navigation Compose의 유형 안전성은 Safe Args 섹션을 참고하세요. 참조하세요.

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        composable("first") {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate("second_screen_route")
                }
            )
        }
        composable("second") {
            SecondScreen(
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate("third_screen_route")
                }
            )
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

모든 Fragment, 관련 XML 레이아웃, 불필요한 탐색 및 기타 삭제 리소스, 오래된 프래그먼트 및 Jetpack Navigation 종속 항목을 포함합니다.

Navigation Compose에 관한 더 많은 세부정보에서 동일한 단계를 확인할 수 있습니다. 설정 문서

일반적인 사용 사례

어떤 탐색 구성요소를 사용하든 탐색 구성요소가 탐색이 적용됩니다.

이전 시 일반적인 사용 사례는 다음과 같습니다.

이러한 사용 사례에 대한 자세한 내용은 작성하기를 참고하세요.

Safe Args

Jetpack Navigation과 달리 Navigation Compose는 Safe 코드 생성을 위한 Args 플러그인 대신 Navigation Compose를 구현하는 방법을 보여줍니다. 런타임 환경입니다

탐색 시 복잡한 데이터 검색

Navigation Compose는 문자열 경로 기반이며 Jetpack Navigation과 달리 맞춤 Parcelable 및 Serializable을 인수로 전달하는 것은 지원되지 않습니다.

탐색 시 복잡한 데이터 객체는 전달하지 않는 것이 좋습니다. 대신 고유 식별자 또는 다른 형식의 ID를 인수로 사용합니다. 해야 할 일 복잡한 객체를 단일 정보 소스에 데이터로 저장(예: 레이어에 대해 자세히 알아보세요. 자세한 내용은 문서에서 복잡한 데이터를 가져올 때 탐색을 참조하세요.

프래그먼트가 복잡한 객체를 인수로 전달하는 경우 리팩터링을 고려하세요. 객체를 저장하고 가져올 수 있는 방식으로 데이터 영역입니다. 자세한 내용은 Now in Android 저장소를 참고하세요. 예로 들 수 있습니다

제한사항

이 섹션에서는 Navigation Compose의 현재 제한사항을 설명합니다.

Navigation Compose로 증분 이전

현재 다음과 같이 프래그먼트를 사용하는 동안 Navigation Compose를 사용할 수 없습니다. 대상 위치를 지정할 수 있습니다. Navigation Compose 사용을 시작하려면 대상은 컴포저블이어야 합니다. 이 기능 요청은 Issue Tracker를 참조하세요.

전환 애니메이션

Navigation 2.7.0-alpha01부터 맞춤 설정 지원 이전에 AnimatedNavHost에서 전환된 전환이 이제 NavHost에서 직접 지원됩니다. 출시 노트 읽어보기 를 참조하세요.

자세히 알아보기

Navigation Compose로 이전에 관한 자세한 내용은 다음을 참고하세요. 리소스:

Navigation Compose Codelab: Navigation Compose의 기본사항을 알아봅니다. 실습 Codelab을 진행합니다.
Now in Android 저장소: 모든 기능을 갖춘 Android 앱 Android 디자인을 따르는 Kotlin과 Jetpack Compose로 완전히 빌드됨 및 개발 권장사항을 제공하며 Navigation Compose를 포함합니다.
Sunflower에서 Jetpack Compose로 이전: Sunflower 샘플 앱의 마이그레이션 여정을 뷰에서 Navigation Compose로의 이전도 포함된 Compose
모든 화면에 적합한 Jetnews: Jetnews 샘플을 리팩터링하고 이전하여 Jetpack Compose와 Navigation Compose가 있습니다.