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

Testar o Compose

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

AnimationContent →

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 quiser, por exemplo, para esmaecer as visualizações ou mudar o tamanho delas, e o framework de transição determina como será a animação do layout inicial ao final.

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

• Animações em nível de grupo:aplique 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 ver 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 geralmente é determinada de forma automática a partir do layout atual.
2. Crie um objeto Transition para definir o tipo de animação que você quer.
3. Chame TransitionManager.go() para o sistema 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. O framework de transições pode executar animações entre uma cena inicial e uma final.

Você pode criar as cenas com base em um arquivo de recurso de layout ou em um grupo de visualizações no código. No entanto, a cena inicial da transição geralmente é determinada automaticamente a partir da 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 depois da transição para uma cena.

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 usando 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 de Scene usando um arquivo de recurso de layout, extraia 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 do recurso do arquivo de layout que contém a hierarquia de visualização da cena.

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 uma relação entre eles.

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 diferentes.

O exemplo foi projetado para que toda a animação ocorra no 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 um FrameLayout filho para a raiz da cena. O layout da primeira cena é incluído no arquivo de layout principal. Isso permite que o app a exiba como parte da interface do usuário inicial e a 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 extrair uma cena para cada um deles. Isso permite a transição entre as duas configurações da interface. Para conseguir uma cena, você precisa de uma referência à raiz dela e ao ID de recurso de layout.

O snippet de código a seguir mostra como acessar uma referência à raiz da cena e criar dois objetos Scene usando os 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 baseados nas hierarquias de visualização. As duas cenas usam a raiz da cena definida pelo elemento FrameLayout em res/layout/activity_main.xml.

Criar uma cena no código

Você também pode criar uma instância Scene no seu código a partir de um objeto ViewGroup. Use essa técnica ao modificar as hierarquias de visualização diretamente no código ou ao gerá-las de maneira dinâmica.

Para criar uma cena com base em uma hierarquia de visualização no seu 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 a seguir demonstra como criar uma instância Scene usando o elemento raiz da cena e a hierarquia de visualização da 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 definir ações de cena personalizadas que o sistema executa ao entrar ou sair de uma cena. Em muitos casos, a definição de ações de cena personalizadas é desnecessária, 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.
• Para animar 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 fornecer ações de cena personalizadas, defina suas ações como objetos Runnable e faça a transmissão delas 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, após 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, execute a animação entre as cenas transmitindo a Scene final e a 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 a 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 de transição complexas 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 abaixo 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 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 enquanto aplica uma transição que esmaece o botão de pesquisa e os resultados da pesquisa.

Para fazer uma mudança de cena ao aplicar uma transição em resposta a um evento na sua atividade, chame a função de classe TransitionManager.go() com a cena final e a instância de transição a 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 pela 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 com base no 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 apenas 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 gerar o maior impacto de uma animação, faça a correspondência dela 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 esmaecimento 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 pontos diferentes da tela, é recomendável animar o movimento para que os usuários percebam o novo local das visualizações.

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

Para definir um conjunto de transições em uma coleção de transições em XML, crie um arquivo de recurso no diretório res/transitions/ e liste as transições no elemento TransitionSet. Por exemplo, o snippet abaixo mostra como especificar um conjunto de transições que tem o mesmo comportamento da 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. Assim, é possível usá-la com um gerenciador de transição, assim como qualquer outra instância do Transition.

Aplicar uma transição sem cenas

Mudar as hierarquias de visualização não é a única maneira de modificar sua interface do usuário. Você também pode fazer mudanças adicionando, modificando e removendo visualizações filhas na hierarquia atual.

Por exemplo, você pode implementar uma interação de pesquisa com um único layout. Comece com um layout que mostre um campo de entrada de pesquisa e um ícone de pesquisa. Se quiser 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 da pesquisa chamando a função ViewGroup.addView().

Você pode usar 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 precisará 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 mudanças feitas nas visualizações e aplica uma transição que anima as mudanças quando o sistema redesenha 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 mudanças 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 de 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 o término 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 não é inflada até que a transição seja concluída. Em vez disso, é necessário armazenar o valor em uma variável e copiá-lo na hierarquia de visualização final quando o framework concluir a transição. Para receber uma notificação quando a transição for concluída, implemente a função TransitionListener.onTransitionEnd() na sua 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 uma 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. Portanto, as atualizações podem ficar fora de sincronia com as animações de outras visualizações.
• Alguns tipos específicos de transição podem não produzir o efeito de animação desejado 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 uma TextView com uma animação, o texto aparecerá em um novo local antes do objeto ser completamente redimensionado. Para evitar esse problema, não anime o redimensionamento de visualizações que contenham texto.