O Layout Inspector do Android Studio permite que você compare o layout do seu app com modelos de design, exiba uma visualização ampliada do seu app e examine detalhes do layout no ambiente de execução. Isso é útil quando seu layout é compilado no ambiente de execução em vez de totalmente em XML e quando o layout se comporta de forma inesperada.
Grande parte da funcionalidade do Layout Inspector era oferecida anteriormente pelas ferramentas obsoletas Hierarchy Viewer e Pixel Perfect.
Abrir o Layout Inspector
Para abrir o Layout Inspector, siga estas etapas:
- Execute seu app em um dispositivo conectado ou emulador.
- Clique em Tools > Layout Inspector.
Na caixa de diálogo Choose Process exibida, selecione o processo do app que você quer inspecionar e clique em OK.
Figura 1. A caixa de diálogo Choose Process
Por padrão, a caixa de diálogo Choose Process lista apenas os processos do projeto atualmente aberto no Android Studio e em execução no dispositivo ou emulador. Se quiser inspecionar outro app do dispositivo, marque Show all processes. Se estiver usando um dispositivo com acesso root ou um emulador que não tenha a Google Play Store, você verá todos os apps em execução. Caso contrário, você verá apenas os apps em execução que são depuráveis.
O Layout Inspector captura um snapshot, o salva como um arquivo .li e o abre.
Conforme é mostrado na Figura 2, o Layout Inspector exibe o seguinte:
- View Tree: a hierarquia de visualizações do layout.
- Barra de ferramentas do Layout Inspector: ferramentas para o Layout Inspector.
- Screenshot: captura de tela do layout do app no seu dispositivo, com limites de layout mostrados para cada visualização.
- Properties Table: as propriedades de layout da visualização selecionada.
Figura 2. Layout Inspector
Selecionar uma visualização
Para selecionar uma visualização, clique sobre ela em View Tree ou na captura de tela. Todos os atributos de layout para a visualização selecionada são exibidos na Properties Table.
Se seu layout incluir visualizações sobrepostas, somente a visualização que estiver por cima será clicável na captura de tela. Para selecionar uma visualização que não está por cima, clique sobre ela em View Tree.
Isolar uma visualização
Para trabalhar com layouts complexos, é possível isolar visualizações individuais para que apenas um subconjunto do layout seja mostrado na View Tree e renderizado na captura de tela.
Só é possível isolar uma visualização quando o dispositivo ainda está conectado. Para isolar uma visualização, o dispositivo precisa renderizar o layout para que o Layout Inspector faça outra captura de tela.
Para isolar uma visualização, siga um destes procedimentos:
- Clique duas vezes sobre a visualização na captura de tela.
- Clique com o botão direito do mouse sobre a visualização em View Tree e selecione Render Subtree Preview.
Para voltar à visualização de conteúdo, clique na seta no canto superior esquerdo da View Tree.
Ocultar limites de layout
Para ocultar a caixa delimitadora de um elemento de layout, clique com o botão direito sobre o elemento na View Tree e desmarque Show Layout Bounds.
Um elemento de layout com a opção Show Layout Bounds desmarcada não pode ser selecionado por cliques na captura de tela.
Aumentar zoom e usar uma grade de referência para inspecionar detalhes de layout
É possível controlar a sobreposição de grade e o nível de zoom da captura de tela com os botões da barra de ferramentas do Layout Editor.
- Para aumentar o zoom na captura de tela, clique em Zoom In
. - Para diminuir o zoom na captura de tela, clique em Zoom Out
. - Para ver o layout numa ampliação em que um pixel na captura de tela corresponda a um pixel no dispositivo, clique em Actual Size
. - Para sobrepor uma grade de pixels, clique em Grid
.
A grade só está disponível em altos níveis de zoom.
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, clique em Load Overlay
na parte superior do Layout Inspector. A sobreposição será dimensionada para se ajustar ao layout. - Para ajustar a transparência da sobreposição, use o controle deslizante Alpha.
- Para remover a sobreposição, clique em Clear Overlay
.
Tirar uma nova captura de tela para capturar as alterações de layout
Se o layout do dispositivo for mudado, o Layout Inspector não será atualizado automaticamente. Para capturar alterações de layout, crie uma nova captura de tela clicando mais uma vez em Tools > Layout Inspector.
Cada captura de tela é salva em um arquivo .li separado em project-name/captures/ e aberta em uma nova guia.
Figura 3. Capturas de tela do Layout Inspector (arquivos .li) na janela Project
É possível recarregar uma captura de tela anterior clicando duas vezes no arquivo .li em project-name/captures/.