Depurar seu layout com o Layout Inspector

O Layout Inspector no Android Studio permite depurar o layout do app mostrando uma hierarquia de visualização em que é possível inspecionar as propriedades de cada visualização. Com o Layout Inspector, você pode comparar o layout do app com modelos de design, mostrar uma visualização ampliada ou 3D do app e examinar detalhes do layout durante a execução. Isso é especialmente útil quando seu layout é criado durante a execução, e não totalmente em XML, e quando ele está se comportando de forma inesperada.

Figura 1. Layout Inspector incorporado ao app Jetchat.

Começar

Para iniciar o Layout Inspector, execute o app, acesse a janela Running Devices e clique em Toggle Layout Inspector Botão para ativar ou desativar o Layout Inspector incorporado. Se você alternar entre vários dispositivos ou projetos, o Layout Inspector se conectará automaticamente aos processos depuráveis em execução em primeiro plano no dispositivo conectado.

Veja como realizar algumas tarefas comuns:

  • Para conferir a hierarquia e inspecionar as propriedades de cada visualização, use as janelas de ferramentas Component Tree e Attributes. O Layout Inspector pode exigir uma reinicialização da atividade para acessar os atributos. Para saber mais, consulte Evitar reinicializações de atividades.
  • Para selecionar visualizações clicando uma vez diretamente nelas ou navegar até o código clicando duas vezes, ative Toggle Deep Inspect Botão para ativar ou desativar a inspeção profunda.
  • Para interagir com o app, desative Toggle Deep Inspect Botão para ativar ou desativar a inspeção profunda.
  • Para inspecionar dispositivos físicos, ative o espelhamento de dispositivos.
  • Para ativar as atualizações em tempo real conforme você atualiza a interface do app, verifique se a Edição em tempo real está ativada.
  • Para usar o modo 3D, tire um snapshot do Layout Inspector Snapshot do Layout Inspector e, em seguida, clique em Modo 3D Botão 3D.

Selecionar ou isolar uma visualização

Uma visualização geralmente mostra itens que aparecem para o usuário e com que ele pode interagir. A Component Tree mostra a hierarquia do app em tempo real com cada componente de visualização. Isso ajuda a depurar o layout do app, porque é possível visualizar os elementos no app e os valores associados a eles.

Para selecionar uma visualização, clique em Component Tree ou em Layout Display. Todos os atributos do layout para a visualização selecionada são mostrados no painel Attributes.

Se o layout incluir visualizações sobrepostas, você poderá conferir todas as visualizações em uma região ao clicar com o botão direito do mouse no modo Deep Inspect Botão para ativar ou desativar a inspeção profunda. Para selecionar uma visualização que não está por cima, clique nela na Component Tree ou gire o layout.

Para trabalhar com layouts complexos, é possível isolar visualizações individuais para que apenas um subconjunto do layout seja mostrado na Component Tree e renderizado em Layout Display. Para isolar uma visualização, tire um snapshot Snapshot do Layout Inspector, clique com o botão direito na visualização em Component Tree e selecione Show Only Subtree ou Show Only Parents. Para retornar à visualização completa, clique com o botão direito do mouse na visualização e selecione Show All. É necessário tirar um snapshot antes de isolar uma visualização.

Ocultar bordas do layout e visualizar rótulos

Para ocultar a caixa delimitadora ou visualizar os rótulos de um elemento de layout, clique em View Options Botão "View Options" na parte de cima do Layout Display e alterne Show borders ou Show View Label.

Registrar snapshots da hierarquia de layout

O Layout Inspector permite salvar snapshots da hierarquia de layout do app em execução para que você possa compartilhá-los com outras pessoas ou consultá-las mais tarde.

Os snapshots capturam os dados que você normalmente veria ao usar o Layout Inspector, incluindo uma renderização 3D detalhada do layout, a árvore de componentes do layout da visualização, do Compose ou híbrido, além de atributos detalhados para cada componente da IU. Para salvar um snapshot, clique em Exportação/importação de snapshot Exportação/importação de snapshots e em Exportar snapshot.

Carregue um snapshot do Layout Inspector salvo anteriormente clicando em Import Snapshot.

Modo 3D

O Layout Display apresenta uma visualização 3D avançada da hierarquia de visualização do app durante a execução. Para usar esse recurso, tire um snapshot Exportação/importação de snapshots, clique no botão 3D Mode Botão 3D na janela do snapshot Inspector e gire arrastando o mouse.

Layout Inspector: visualização em 3D
Figura 2. Visualização 3D rotacionada de um layout.
Layout Inspector: visualização de espaçamento da camada
Figura 3. Para expandir ou reduzir as camadas do layout, use o controle deslizante Layout Spacing.

Comparar o layout do app a uma sobreposição de imagem de referência

Para comparar o layout do seu app a uma imagem de referência, como um modelo de IU, carregue uma sobreposição de imagem de bitmap no Layout Inspector.

  • Para carregar uma sobreposição, selecione a opção Load Overlay na barra de ferramentas do Layout Inspector. A sobreposição é dimensionada para se ajustar ao layout.
  • Para ajustar a transparência da sobreposição, use o controle deslizante Overlay Alpha.
  • Para remover a sobreposição, clique em Clear Overlay.

Inspecionar o Compose

O Layout Inspector permite inspecionar um layout do Compose dentro de um app em execução em um emulador ou dispositivo físico. Você pode usar o Layout Inspector para verificar com que frequência um elemento combinável é recomposto ou ignorado, o que pode ajudar a identificar problemas com o app. Por exemplo, alguns erros de programação podem forçar a recomposição excessiva da interface, o que pode prejudicar o desempenho. Alguns erros de programação podem impedir que a interface seja recomposta, por exemplo, fazendo com que as mudanças não apareçam na tela.

Saiba mais sobre o Layout Inspector para Compose

Evitar reinicializações de atividades

O Layout Inspector exige uma das configurações globais abaixo para funcionar corretamente. Se você não especificar uma configuração global, o Layout Inspector vai definir uma automaticamente.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Essa opção gera informações extras para inspeção do processo especificado.

  2. adb shell settings put global debug_view_attributes 1

    Essa opção gera informações extras para inspeção em todos os processos no dispositivo.

A mudança de uma configuração global pode causar a reinicialização da atividade. Para evitar que uma atividade seja reiniciada, você pode mudar as configurações no Android Studio ou as Opções do desenvolvedor nas configurações do dispositivo.

Para ativar a atualização automática no Android Studio, abra Run/Debug Configurations selecionando Run > Edit Configurations no menu. Em seguida, navegue até a guia Miscellaneous e marque a caixa Connect to Layout Inspector without restarting activity em Layout Inspector Options.

Opção de reinicialização da atividade nas configurações de execução
Figura 4. Ative a atualização automática na caixa de diálogo Run/Debug Configurations.

Se preferir, ative as Opções do desenvolvedor do dispositivo e configure a inspeção de atributo de visualização nas configurações do desenvolvedor do dispositivo.

Layout Inspector independente

Para um desempenho ideal, recomendamos usar o Layout Inspector no modo incorporado padrão. Se você quiser desfazer a incorporação do Layout Inspector, acesse File (Android Studio no macOS)> Settings > Tools > Layout Inspector e desmarque a caixa de seleção Enableembedded Layout Inspector.

No modo autônomo, ative as atualizações em tempo real clicando na opção Live Updates na barra de ferramentas do Layout Inspector.