Compose의 뒤로 탐색 예측

동작 탐색 기능인 뒤로 탐색 예측을 사용하면 사용자가 뒤로 스와이프하면 이동할 위치를 미리 볼 수 있습니다. 뒤로 탐색 예측은 Compose와 원활하게 통합되어 앱의 탐색 환경을 개선합니다. 사용자는 앱 내에서 뒤로 탐색할 때 더 원활하고 직관적인 전환을 즐길 수 있습니다. 그림 1은 SociaLite 샘플 앱에서 이 기능이 작동하는 방식을 보여줍니다.

이 가이드에서는 뒤로 탐색 예측으로 다음 작업을 실행하는 방법을 설명합니다.

• 뒤로 탐색 예측 동작 선택
• 기본 시스템 애니메이션 사용 설정
• 탐색 Compose로 뒤로 탐색 예측 사용 설정
• 공유 요소 전환과 통합
• Material Compose 구성요소로 뒤로 탐색 예측 지원
• PredictiveBackHandler를 사용하여 진행 상황에 수동으로 액세스
• 뒤로 탐색 예측 동작 애니메이션 테스트

뒤로 탐색 예측 동작 선택

뒤로 탐색 예측 애니메이션을 사용 설정하려면 뒤로 탐색 예측 동작을 지원하도록 선택해야 합니다. 선택하려면 AndroidManifest.xml 파일 내 <application> 태그 또는 개별 <activity> 태그에 android:enableOnBackInvokedCallback="true를 추가합니다.

기본 시스템 애니메이션 사용 설정

홈으로 돌아가기, 교차 활동, 교차 작업 시스템 애니메이션은 지원되는 뒤로 탐색 처리 API로 이전한 앱의 경우 Android 15 및 이후 버전 기기에서 사용할 수 있습니다.

• 홈으로 돌아가기: 사용자를 홈 화면으로 되돌립니다.
• 교차 활동: 앱 내 활동 간의 전환입니다.
• 교차 작업: 작업 간의 전환입니다.

이러한 애니메이션은 Android 15 이상에서 기본적으로 사용 설정됩니다. Android 13 또는 14를 실행하는 기기에서는 사용자가 개발자 옵션을 통해 이를 사용 설정할 수 있습니다.

시스템 애니메이션을 가져오려면 AndroidX Activity 종속 항목을 1.6.0 이상으로 업데이트합니다.

탐색 Compose로 뒤로 탐색 예측 사용 설정

Navigation Compose에서 뒤로 탐색 예측을 사용하려면 navigation-compose 2.8.0 라이브러리 이상을 사용해야 합니다.

탐색 Compose는 사용자가 뒤로 스와이프하면 화면 간에 자동으로 크로스페이드합니다.

탐색할 때 popEnterTransition 및 popExitTransition를 사용하여 맞춤 전환을 만들 수 있습니다. 이러한 수정자를 NavHost에 적용하면 화면 진입 및 종료 애니메이션을 정의할 수 있습니다. 이를 사용하여 크기 조절, 페이드, 슬라이딩과 같은 다양한 효과를 만들 수 있습니다.

이 예에서는 scaleOut가 popExitTransition 내에서 사용되어 사용자가 뒤로 탐색할 때 종료 화면을 축소합니다. 또한 transformOrigin 매개변수는 크기 조정 애니메이션이 발생하는 지점을 결정합니다. 기본값은 화면 중앙 (0.5f, 0.5f)입니다. 이 값을 조정하여 다른 지점에서 크기 조절이 시작되도록 할 수 있습니다.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

이 코드는 다음과 같은 결과를 생성합니다.

popEnterTransition 및 popExitTransition는 특히 뒤로 동작으로 백 스택을 팝할 때 애니메이션을 제어합니다. enterTransition 및 exitTransition를 사용하여 뒤로 탐색 예측뿐만 아니라 일반적으로 컴포저블 진입 및 종료 애니메이션을 정의할 수도 있습니다. enterTransition 및 exitTransition만 설정하면 일반 탐색과 백 스택 팝 모두에 사용됩니다. 하지만 popEnterTransition 및 popExitTransition를 사용하면 뒤로 탐색을 위한 고유한 애니메이션을 만들 수 있습니다.

공유 요소 전환과 통합

공유 요소 전환은 공유 콘텐츠가 있는 컴포저블 간에 원활한 시각적 연결을 제공하며 탐색에 자주 사용됩니다.

탐색 Compose에서 공유 요소를 사용하려면 공유 요소를 사용한 뒤로 탐색 예측을 참고하세요.

Material Compose 구성요소로 뒤로 탐색 예측 지원

Material Compose 라이브러리의 많은 구성요소는 뒤로 탐색 예측 동작과 원활하게 작동하도록 설계되었습니다. 이러한 구성요소에서 뒤로 탐색 예측 애니메이션을 사용 설정하려면 프로젝트에 최신 Material3 종속 항목 (androidx.compose.material3:material3-*:1.3.0 이상)을 포함하세요.

뒤로 탐색 예측 애니메이션을 지원하는 Material 구성요소는 다음과 같습니다.

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar 및 ModalBottomSheet는 뒤로 탐색 예측 동작으로 자동으로 애니메이션됩니다. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet, DismissibleNavigationDrawer는 drawerState을 각 시트 콘텐츠 컴포저블에 전달해야 합니다.

PredictiveBackHandler를 사용하여 진행 상황에 수동으로 액세스

Jetpack Compose의 PredictiveBackHandler[5] 컴포저블을 사용하면 뒤로 동작을 가로채고 진행 상황에 액세스할 수 있습니다. 사용자의 뒤로 동작에 실시간으로 반응하여 사용자가 스와이프한 거리에 따라 맞춤 애니메이션이나 동작을 만들 수 있습니다.

PredictiveBackHandler를 사용하려면 androidx.activity:activity:1.6.0 이상을 사용해야 합니다.

PredictiveBackHandler는 뒤로 동작의 진행률을 나타내는 이벤트를 내보내는 Flow<BackEventCompat>를 제공합니다. 각 이벤트에는 다음과 같은 정보가 포함됩니다.

• progress: 뒤로 동작의 진행률을 나타내는 0과 1 사이의 부동 소수점 값입니다 (0 = 동작 시작, 1 = 동작 완료).
• touchX 및 touchY: 터치 이벤트의 X 및 Y 좌표입니다.

다음 스니펫은 PredictiveBackHandler의 기본 사용법을 보여줍니다.

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

예: 탐색 창과 통합

이 예에서는 PredictiveBackHandler를 사용하여 맞춤 인앱 애니메이션을 구현하여 JetLagged에서 뒤로 동작에 대한 응답으로 탐색 창과 원활하게 상호작용하는 방법을 보여줍니다.

이 예에서 PredictiveBackHandler는 다음과 같은 용도로 사용됩니다.

• 뒤로 동작의 진행 상황을 추적합니다.
• 동작 진행률에 따라 드로어의 translationX를 업데이트합니다.
• velocityTracker를 사용하여 동작이 완료되거나 취소될 때 동작 속도에 따라 서랍을 부드럽게 열거나 닫습니다.

뒤로 탐색 예측 동작 애니메이션 테스트

아직 Android 13 또는 Android 14를 사용하는 경우 홈으로 돌아가기 애니메이션을 테스트할 수 있습니다.

이 애니메이션을 테스트하려면 다음 단계를 따르세요.

1. 기기에서 설정 > 시스템 > 개발자 옵션으로 이동합니다.
2. 뒤로 탐색 예측 애니메이션을 선택합니다.
3. 업데이트된 앱을 실행하고, 뒤로 동작을 사용하여 실제 작동하는 모습을 확인합니다.

Android 15 이상에서는 이 기능이 기본적으로 사용 설정되어 있습니다.

추가 리소스

• 뒤로 탐색 예측 애니메이션 추가 Codelab
• Compose 동영상의 고급 레이아웃 애니메이션