Volta preditiva no Compose

A volta preditiva, um recurso de navegação por gestos, permite que os usuários tenham uma prévia de onde o deslize para voltar os leva. A volta preditiva é integrada perfeitamente ao Compose para melhorar a experiência de navegação do app. Os usuários têm transições mais suaves e intuitivas ao voltar para o app. A Figura 1 mostra como isso funciona no app de exemplo SociaLite.

Figura 1. A animação de volta à página inicial no app de exemplo do SociaLite.

Neste guia, descrevemos como fazer o seguinte com a volta preditiva:

  • Ativar o gesto de volta preditivo
  • Ativar animações padrão do sistema
  • Ativar a volta preditiva com a Navigation Compose
  • Integrar com transições de elementos compartilhados
  • Suporte à volta preditiva com componentes do Material Compose
  • Acessar o progresso manualmente com PredictiveBackHandler
  • Testar a animação do gesto de volta preditivo

Ativar o gesto de volta preditivo

Para ativar as animações de volta preditiva, você precisa ativar o gesto de volta preditivo. Para ativar, adicione android:enableOnBackInvokedCallback="true à tag <application> ou às tags <activity> individuais no arquivo AndroidManifest.xml.

Ativar animações padrão do sistema

As animações de volta à tela inicial, entre atividades e tarefas estão disponíveis no Android 15 e em versões mais recentes para apps que migraram para as APIs de processamento de volta com suporte.

  • Voltar para a tela inicial: retorna o usuário para a tela inicial.
  • Entre atividades: transições entre atividades no app.
  • Entre tarefas: transições entre tarefas.

Essas animações são ativadas por padrão no Android 15 e versões mais recentes. Em dispositivos com o Android 13 ou 14, os usuários podem ativar essas opções nas Opções do desenvolvedor.

Para receber as animações do sistema, atualize a dependência Activity do AndroidX para 1.6.0 ou mais recente.

Ativar a volta preditiva com o Navigation Compose

Para usar a volta preditiva no Navigation Compose, verifique se você está usando a biblioteca navigation-compose 2.8.0 ou mais recente.

O Compose de navegação faz transições entre telas automaticamente quando o usuário desliza para voltar:

Figura 2. A animação de crossfade padrão no app SociaLite.

Ao navegar, é possível criar transições personalizadas com popEnterTransition e popExitTransition. Quando aplicados ao NavHost, esses modificadores permitem definir como as telas de entrada e saída são animadas. Eles podem ser usados para criar vários efeitos, como dimensionamento, desvanecimento ou deslizamento.

Neste exemplo, scaleOut é usado em popExitTransition para reduzir a tela de saída quando o usuário navega de volta. Além disso, o parâmetro transformOrigin determina o ponto em torno do qual a animação de escalonamento ocorre. Por padrão, é o centro da tela (0.5f, 0.5f). É possível ajustar esse valor para que a escalação se origine de um ponto diferente.

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

Esse código produz o seguinte resultado:

Figura 3. Uma animação personalizada no app SociaLite.

popEnterTransition e popExitTransition controlam especificamente animações ao abrir a backstack, com um gesto de volta, por exemplo. Também é possível usar enterTransition e exitTransition para definir animações para entrar e sair de elementos combináveis em geral, não apenas para a volta preditiva. Se você definir apenas enterTransition e exitTransition, eles serão usados para a navegação normal e para abrir a backstack. No entanto, o uso de popEnterTransition e popExitTransition permite criar animações distintas para a navegação de volta.

Integrar com transições de elementos compartilhados

As transições de elementos compartilhados fornecem uma conexão visual suave entre combináveis com conteúdo compartilhado, geralmente usados para navegação.

Figura 4. Transição de elemento compartilhado com volta preditiva no Navigation Compose.

Para usar elementos compartilhados com o Navigation Compose, consulte Volta preditiva com elementos compartilhados.

Suporte à volta preditiva com componentes do Material Compose

Muitos componentes na biblioteca do Material Compose foram projetados para funcionar perfeitamente com gestos de volta preditiva. Para ativar animações de volta preditiva nesses componentes, inclua a dependência mais recente do Material3 (androidx.compose.material3:material3-*:1.3.0 ou mais recente) no projeto.

Os componentes do Material que oferecem suporte a animações de volta preditiva incluem:

SearchBar e ModalBottomSheet são animados automaticamente com gestos "Voltar" preditivos. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet e DismissibleNavigationDrawer exigem que você transmita o drawerState para os elementos combináveis de conteúdo da respectiva página.

Acessar o progresso manualmente com PredictiveBackHandler

O elemento combinável PredictiveBackHandler[5] no Jetpack Compose permite interceptar o gesto de voltar e acessar o progresso dele. É possível reagir ao gesto de voltar do usuário em tempo real, criando animações ou comportamentos personalizados com base na distância da gestuação do usuário.

Para usar o PredictiveBackHandler, verifique se você está usando androidx.activity:activity:1.6.0 ou mais recente.

PredictiveBackHandler fornece um Flow<BackEventCompat> que emite eventos representando o progresso do gesto de volta. Cada evento contém informações como:

  • progress: um valor flutuante entre 0 e 1, indicando o progresso do gesto de volta (0 = gesto iniciado, 1 = gesto concluído).
  • touchX e touchY: as coordenadas X e Y do evento de toque.

O snippet a seguir mostra o uso básico de 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

Exemplo: integrar com uma gaveta de navegação

Este exemplo demonstra como implementar uma animação personalizada no app usando PredictiveBackHandler para criar uma interação suave com uma gaveta de navegação em resposta a gestos de volta no JetLagged:

Figura 5. Gaveta de navegação com suporte à volta preditiva.

Neste exemplo, PredictiveBackHandler é usado para:

  • Acompanhe o progresso do gesto de volta.
  • Atualize o translationX da gaveta com base no progresso do gesto.
  • Use um velocityTracker para abrir ou fechar a gaveta com base na velocidade do gesto quando ele for concluído ou cancelado.

Testar a animação do gesto de volta preditivo

Se você ainda usa o Android 13 ou o Android 14, teste a animação de volta para a tela inicial.

Para testar a animação, siga estas etapas:

  1. No dispositivo, acesse Configurações > Sistema > Opções do desenvolvedor.
  2. Selecione Animações de gestos "Voltar" preditivos.
  3. Inicie o app atualizado e use o gesto "Voltar" para testar o recurso.

No Android 15 e mais recentes, esse recurso é ativado por padrão.

Outros recursos