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