Animar alterações de layout usando uma transição

Teste o Compose

O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a usar animações no Compose.

AnimatedContent →

O framework de transição do Android permite animar todos os tipos de movimento na interface, fornecendo os layouts inicial e final. Você pode selecionar o tipo de animação que quer, como fazer esmaecer visualizações ou mudar o tamanho delas, e o framework de transição determina como animar do layout inicial para o final.

O framework de transição inclui os seguintes recursos:

• Animações em nível de grupo:aplica efeitos de animação a todas as visualizações em uma hierarquia.
• Animações integradas:use animações predefinidas para efeitos comuns, como esmaecimento ou movimento.
• Suporte a arquivos de recursos:carregue hierarquias de visualização e animações integradas a partir de arquivos de recursos de layout.
• Callbacks do ciclo de vida:receba callbacks que oferecem controle sobre o processo de mudança de animação e hierarquia.

Para conferir um exemplo de código que executa a animação entre mudanças de layout, consulte BasicTransition (link em inglês).

O processo básico para animar entre dois layouts é o seguinte:

1. Crie um objeto Scene para os layouts inicial e final. No entanto, a cena do layout inicial costuma ser determinada automaticamente pelo layout atual.
2. Crie um objeto Transition para definir o tipo de animação que você quer.
3. Chame TransitionManager.go(), e o sistema vai executar a animação para trocar os layouts.

O diagrama na Figura 1 ilustra a relação entre seus layouts, as cenas, a transição e a animação final.

Figura 1. Ilustração básica de como o framework de transição cria uma animação.

Criar uma cena

As cenas armazenam o estado de uma hierarquia de visualização, incluindo todas as visualizações e os valores de propriedade delas. O framework de transições pode executar animações entre uma cena inicial e uma final.

Você pode criar suas cenas a partir de um arquivo de recurso de layout ou de um grupo de visualizações no código. No entanto, a cena inicial da transição costuma ser determinada automaticamente pela interface atual.

Uma cena também pode definir as próprias ações que são executadas quando você faz uma mudança de cena. Esse recurso é útil para limpar as configurações de visualização após a transição para um cenário.

Criar uma cena a partir de um recurso de layout

É possível criar uma instância de Scene diretamente de um arquivo de recurso de layout. Use essa técnica quando a hierarquia de visualização no arquivo for predominantemente estática. A cena resultante representa o estado da hierarquia de visualização no momento em que você criou a instância de Scene. Se você mudar a hierarquia de visualização, recrie a cena. O framework cria a cena a partir de toda a hierarquia de visualização no arquivo. Não é possível criar uma cena usando parte de um arquivo de layout.

Para criar uma instância Scene usando um arquivo de recurso de layout, recupere a raiz da cena do layout como um ViewGroup. Em seguida, chame a função Scene.getSceneForLayout() com a raiz da cena e o ID de recurso do arquivo de layout que contém a hierarquia de visualização do cenário.

Definir layouts para cenas

Os snippets de código no restante desta seção mostram como criar duas cenas diferentes com o mesmo elemento raiz da cena. Os snippets também demonstram que é possível carregar vários objetos Scene não relacionados sem implicar que eles estão relacionados entre si.

O exemplo consiste nas seguintes definições de layout:

• O layout principal de uma atividade com um rótulo de texto e uma FrameLayout filha.
• Um ConstraintLayout para a primeira cena com dois campos de texto.
• Um ConstraintLayout para a segunda cena com os mesmos dois campos de texto em ordem diferente.

O exemplo foi projetado para que toda a animação ocorra dentro do layout filho do layout principal da atividade. O rótulo de texto no layout principal permanece estático.

O layout principal da atividade é definido da seguinte forma:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

Essa definição de layout contém um campo de texto e uma FrameLayout filha para a raiz da cena. O layout da primeira cena é incluído no arquivo de layout principal. Isso permite que o app o mostre como parte da interface do usuário inicial e o carregue em uma cena, já que o framework só pode carregar um arquivo de layout inteiro em uma cena.

O layout da primeira cena é definido da seguinte maneira:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</androidx.constraintlayout.widget.ConstraintLayout>

O layout da segunda cena contém os mesmos dois campos de texto, com os mesmos IDs, colocados em uma ordem diferente. Ela é definida da seguinte maneira:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</androidx.constraintlayout.widget.ConstraintLayout>

Gerar cenas a partir de layouts

Depois de criar definições para os dois layouts de restrição, você pode conseguir uma cena para cada um deles. Isso permite fazer a transição entre as duas configurações da interface. Para conseguir um cenário, você precisa de uma referência à raiz dela e ao ID do recurso de layout.

O snippet de código abaixo mostra como acessar uma referência à raiz da cena e criar dois objetos Scene a partir dos arquivos de layout:

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

No app, agora há dois objetos Scene com base nas hierarquias de visualização. Ambas as cenas usam a raiz da cena definida pelo elemento FrameLayout em res/layout/activity_main.xml.

Criar uma cena no código

Também é possível criar uma instância Scene no código usando um objeto ViewGroup. Use essa técnica ao modificar as hierarquias de visualização diretamente no seu código ou gerar dinamicamente.

Para criar um cenário usando uma hierarquia de visualização no código, use o construtor Scene(sceneRoot, viewHierarchy). Chamar esse construtor é equivalente a chamar a função Scene.getSceneForLayout() quando você já inflou um arquivo de layout.

O snippet de código abaixo demonstra como criar uma instância de Scene usando o elemento raiz da cena e a hierarquia de visualização para a cena no seu código:

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

Criar ações de cena

O framework permite que você defina ações de cena personalizadas que o sistema executa ao entrar ou sair de uma cena. Em muitos casos, não é necessário definir ações de cena personalizadas, já que o framework anima a mudança entre as cenas automaticamente.

As ações de cena são úteis para lidar com estes casos:

• Para animar visualizações que não estão na mesma hierarquia. Você pode animar as visualizações das cenas inicial e final usando ações de cena de saída e entrada.
• Anima visualizações que o framework de transições não pode animar automaticamente, como objetos ListView. Para mais informações, consulte a seção sobre limitações.

Para oferecer ações de cena personalizadas, defina suas ações como objetos Runnable e as transmita para as funções Scene.setExitAction() ou Scene.setEnterAction(). O framework chama a função setExitAction() na cena inicial antes de executar a animação de transição e a função setEnterAction() na cena final depois de executar a animação de transição.

Aplicar uma transição

O framework de transição representa o estilo de animação entre as cenas com um objeto Transition. Você pode instanciar um Transition usando subclasses integradas, como AutoTransition e Fade, ou definir sua própria transição. Em seguida, você pode executar a animação entre as cenas transmitindo o Scene final e o Transition para TransitionManager.go().

O ciclo de vida da transição é semelhante ao da atividade e representa os estados de transição que o framework monitora entre o início e o conclusão de uma animação. Em estados importantes do ciclo de vida, o framework invoca funções de callback que podem ser implementadas para ajustar a interface do usuário em diferentes fases da transição.

Criar uma transição

A seção anterior mostra como criar cenas que representam o estado de diferentes hierarquias de visualização. Depois de definir as cenas inicial e final entre as quais você quer alternar, crie um objeto Transition que defina uma animação. O framework permite especificar uma transição integrada em um arquivo de recurso e inflá-la no código ou criar uma instância de uma transição integrada diretamente no código.

Tabela 1. Tipos de transição integrada.

Criar uma instância de transição a partir de um arquivo de recurso

Essa técnica permite modificar a definição de transição sem mudar o código da atividade. Essa técnica também é útil para separar definições complexas de transição do código do aplicativo, conforme mostrado na seção sobre como especificar várias transições.

Para especificar uma transição integrada em um arquivo de recurso, siga estas etapas:

• Adicione o diretório res/transition/ ao projeto.
• Crie um novo arquivo de recurso XML dentro desse diretório.
• Adicione um nó XML para uma das transições integradas.

Por exemplo, o seguinte arquivo de recurso especifica a transição Fade:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

O snippet de código a seguir mostra como inflar uma instância de Transition dentro da atividade usando um arquivo de recurso:

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

Criar uma instância de transição no seu código

Essa técnica é útil para criar objetos de transição dinamicamente, se você modificar a interface do usuário no seu código, e para criar instâncias de transição integradas e simples com poucos ou nenhum parâmetro.

Para criar uma instância de uma transição integrada, invoque um dos construtores públicos nas subclasses da classe Transition. Por exemplo, o snippet de código abaixo cria uma instância da transição Fade:

var fadeTransition: Transition = Fade()

Transition fadeTransition = new Fade();

Aplicar uma transição

Normalmente, você aplica uma transição para alternar entre diferentes hierarquias de visualização em resposta a um evento, como uma ação do usuário. Por exemplo, considere um app de pesquisa: quando o usuário insere um termo de pesquisa e toca no botão de pesquisa, o app muda para uma cena que representa o layout dos resultados ao aplicar uma transição que esmaece o botão de pesquisa e faz os resultados da pesquisa aparecerem.

Para fazer uma mudança de cena ao aplicar uma transição em resposta a um evento na atividade, chame a função de classe TransitionManager.go() com a cena final e a instância de transição que será usada na animação, conforme mostrado no snippet a seguir:

TransitionManager.go(endingScene, fadeTransition)

TransitionManager.go(endingScene, fadeTransition);

O framework muda a hierarquia de visualização dentro da raiz da cena com a hierarquia de visualização da cena final, enquanto executa a animação especificada pela instância de transição. A cena inicial é a cena final da última transição. Se não houver uma transição anterior, a cena inicial será determinada automaticamente a partir do estado atual da interface do usuário.

Se você não especificar uma instância de transição, o gerenciador de transição poderá aplicar uma transição automática que faça algo razoável para a maioria das situações. Para mais informações, consulte a referência da API para a classe TransitionManager.

Escolher visualizações de destino específicas

O framework aplica transições a todas as visualizações nas cenas inicial e final por padrão. Em alguns casos, você pode querer aplicar uma animação a um subconjunto de visualizações em uma cena. O framework permite selecionar visualizações específicas que você quer animar. Por exemplo, o framework não oferece suporte à animação de mudanças em objetos ListView. Portanto, não tente animá-los durante uma transição.

Cada visualização que a transição anima é chamada de destino. Só é possível selecionar destinos que fazem parte da hierarquia de visualização associada a uma cena.

Para remover uma ou mais visualizações da lista de destinos, chame o método removeTarget() antes de iniciar a transição. Para adicionar apenas as visualizações especificadas à lista de destinos, chame a função addTarget(). Para mais informações, consulte a referência da API para a classe Transition.

Especificar várias transições

Para ter o máximo de impacto em uma animação, combine-a com o tipo de mudança que ocorre entre as cenas. Por exemplo, se você estiver removendo algumas visualizações e adicionando outras entre as cenas, uma animação de esmaecimento ou exibição gradual fornece uma indicação perceptível de que algumas visualizações não estão mais disponíveis. Se você estiver movendo visualizações para diferentes pontos na tela, é melhor animar o movimento para que os usuários percebam o novo local das visualizações.

Não é necessário escolher apenas uma animação, já que o framework de transições permite combinar efeitos de animação em um conjunto que contém um grupo de transições individuais integradas ou personalizadas.

Para definir um conjunto de transições em uma coleção de transições em XML, crie um arquivo de recursos no diretório res/transitions/ e liste as transições no elemento TransitionSet. Por exemplo, o snippet a seguir mostra como especificar um conjunto de transições que tem o mesmo comportamento que a classe AutoTransition:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

Para inflar o conjunto de transições em um objeto TransitionSet no código, chame a função TransitionInflater.from() na atividade. A classe TransitionSet é estendida da classe Transition. Portanto, você pode usá-la com um gerenciador de transição como qualquer outra instância Transition.

Aplicar uma transição sem cenas

Alterar as hierarquias de visualização não é a única maneira de modificar a interface do usuário. Também é possível fazer mudanças adicionando, modificando e removendo visualizações filhas dentro da hierarquia atual.

Por exemplo, você pode implementar uma interação de pesquisa com um único layout. Comece com o layout que mostra um campo de entrada de pesquisa e um ícone de pesquisa. Para mudar a interface do usuário para mostrar os resultados, remova o botão de pesquisa quando o usuário tocar nele, chamando a função ViewGroup.removeView() e adicione os resultados chamando a função ViewGroup.addView().

Use essa abordagem se a alternativa for ter duas hierarquias quase idênticas. Em vez de criar e manter dois arquivos de layout separados para uma pequena diferença na interface do usuário, você pode ter um arquivo contendo uma hierarquia de visualização que pode ser modificada no código.

Se você fizer mudanças na hierarquia de visualização atual dessa maneira, não será necessário criar uma cena. Em vez disso, você pode criar e aplicar uma transição entre dois estados de uma hierarquia de visualização usando uma transição atrasada. Esse recurso do framework de transições começa com o estado atual da hierarquia de visualização, registra as mudanças feitas nas visualizações e aplica uma transição que anima as mudanças quando o sistema redesenhar a interface do usuário.

Para criar uma transição atrasada em uma única hierarquia de visualização, siga estas etapas:

1. Quando o evento que aciona a transição ocorrer, chame a função TransitionManager.beginDelayedTransition(), fornecendo a visualização mãe de todas as visualizações que você quer mudar e a transição a ser usada. O framework armazena o estado atual das visualizações filhas e os valores de propriedade delas.
2. Faça alterações nas visualizações filhas conforme necessário para seu caso de uso. O framework registra as alterações feitas nas visualizações filhas e nas propriedades delas.
3. Quando o sistema redesenha a interface do usuário de acordo com as mudanças, o framework anima as mudanças entre o estado original e o novo.

O exemplo abaixo mostra como animar a adição de uma visualização de texto a uma hierarquia de visualização usando uma transição atrasada. O primeiro snippet mostra o arquivo de definição do layout:

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

O próximo snippet mostra o código que anima o acréscimo da visualização de texto:

MainActivity

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

Definir callbacks do ciclo de vida da transição

O ciclo de vida da transição é semelhante ao da atividade. Ele representa os estados de transição que o framework monitora durante o período entre uma chamada para a função TransitionManager.go() e a conclusão da animação. Em estados importantes do ciclo de vida, o framework invoca callbacks definidos pela interface TransitionListener.

Os callbacks do ciclo de vida da transição são úteis, por exemplo, para copiar um valor de propriedade de visualização da hierarquia de visualização inicial para a final durante uma mudança de cena. Não é possível simplesmente copiar o valor da visualização inicial para a visualização na hierarquia final, porque essa hierarquia não é inflada até que a transição seja concluída. Em vez disso, você precisa armazenar o valor em uma variável e copiá-lo para a hierarquia de visualização final quando o framework terminar a transição. Para receber uma notificação quando a transição for concluída, implemente a função TransitionListener.onTransitionEnd() na atividade.

Para mais informações, consulte a referência da API para a classe TransitionListener.

Limitações

Esta seção lista algumas limitações conhecidas do framework de transições:

• As animações aplicadas a um SurfaceView podem não aparecer corretamente. As instâncias de SurfaceView são atualizadas em uma linha de execução que não é da interface, de modo que as atualizações podem estar fora de sincronia com as animações de outras visualizações.
• Alguns tipos específicos de transições podem não produzir o efeito de animação esperado quando aplicados a uma TextureView.
• As classes que estendem AdapterView, como ListView, gerenciam as visualizações filhas de maneiras incompatíveis com o framework de transições. Se você tentar animar uma visualização com base em AdapterView, a tela do dispositivo poderá parar de responder.
• Se você tentar redimensionar um TextView com uma animação, o texto aparecerá em um novo local antes que o objeto seja totalmente redimensionado. Para evitar esse problema, não anime o redimensionamento de visualizações que contêm texto.