뒤로 탐색 예측 설정

뒤로 탐색 예측 애니메이션을 사용 설정하려면 뒤로 탐색 예측 동작을 지원하도록 선택해야 합니다. 선택하려면 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는 사용자가 뒤로 스와이프하면 화면 간에 자동으로 크로스페이드합니다.

그림 2. SociaLite의 기본 크로스페이드 인앱 애니메이션

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

이 예에서는 scaleOutpopExitTransition 내에서 사용되어 사용자가 뒤로 탐색할 때 종료 화면을 축소합니다. 또한 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,
)

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

그림 3. SociaLite의 맞춤 인앱 애니메이션

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

공유 요소 전환과 통합

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

그림 4. 탐색 Compose의 뒤로 탐색 예측을 사용한 공유 요소 전환

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

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

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

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

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

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

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

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

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

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

추가 리소스