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.
![](https://developer.android.com/static/studio/images/embedded-layout-inspector.png?hl=pt-br)
Começar
Para iniciar o Layout Inspector, execute o app, acesse a janela
Running Devices e clique em Toggle Layout Inspector .
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
.
- Para interagir com o app, desative Toggle Deep Inspect
.
- 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
e, em seguida, clique em Modo 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
. 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
, 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
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
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
, clique
no botão 3D Mode
na
janela do snapshot Inspector e gire arrastando o mouse.
![Layout Inspector: visualização em 3D](https://developer.android.com/static/studio/images/li-3d-mode.png?hl=pt-br)
![Layout Inspector: visualização de espaçamento da camada](https://developer.android.com/static/studio/images/debug/layout-inspector-layer-spacing.png?hl=pt-br)
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.
adb shell settings put global debug_view_attributes_application_package <processname>
Essa opção gera informações extras para inspeção do processo especificado.
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](https://developer.android.com/static/studio/images/debug/li-activity-restart.png?hl=pt-br)
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.