Gerenciar os recursos de IU do app com o Resource Manager

O Resource Manager é uma nova janela de ferramentas para importar, criar, gerenciar e usar recursos no app. Você pode abrir a janela de ferramentas selecionando View > Tool Windows > Resource Manager na barra de menus ou selecionando Resource Manager na barra lateral esquerda.

Figura 1: o Resource Manager

  1. Clique em Add para adicionar um novo recurso ao projeto. Você pode adicionar ativos de imagem, de vetor, recursos ou pode importar recursos para o projeto.
  2. A lista suspensa do módulo permite visualizar recursos específicos de um módulo.
  3. Use a barra de pesquisa para pesquisar o módulo selecionado para um recurso.
  4. O Resource Manager gerencia os drawables, as cores e os layouts do app. Use essas guias para alternar entre cada tipo de recurso.
  5. O botão de filtro permite mostrar recursos de bibliotecas externas.
  6. A área de conteúdo principal exibe visualizações dos recursos. Clique com o botão direito do mouse em um recurso para ver um menu de contexto em que, entre outras coisas, você pode renomear o recurso e pesquisar no app onde o recurso é usado.
  7. Clique nestes botões para visualizar os recursos como blocos ou listas.
  8. Clique nestes botões para alterar o tamanho da visualização dos recursos.

Além dos recursos mencionados acima, o Resource Manager oferece uma maneira simples de importar drawables em massa para o projeto. Você pode arrastar e soltar os arquivos de imagem, incluindo arquivos SVG, diretamente para o Resource Manager ou pode usar o assistente Import Drawables. Para mais informações, consulte a seção Importar recursos para o projeto abaixo.

Clique duas vezes em um recurso para que o Resource Manager exiba informações mais detalhadas. Se você tiver várias versões de um recurso, essa visualização detalhada exibirá cada versão junto com os qualificadores associados, conforme mostrado na figura 2. Você também pode clicar duas vezes em uma versão específica para abri-la em uma janela do editor.

Figura 2: o Resource Manager mostra versões de um recurso de imagem para diferentes densidades de tela.

Importar drawables para seu projeto

Você pode importar recursos de imagem arrastando e soltando os arquivos ou pastas de recursos diretamente para o Resource Manager. Depois de soltar os recursos no Resource Manager, a caixa de diálogo Import drawables aparecerá. Nela, você poderá ver o resumo dos recursos e adicionar os qualificadores necessários antes de importar.

Para importar recursos de imagem para seu projeto, faça o seguinte:

  1. Arraste e solte suas imagens diretamente na janela do Resource Manager no Android Studio. Como alternativa, você pode clicar no ícone de adição (+), escolher Import Drawables, conforme mostrado na figura 3, e selecionar os arquivos e pastas que quer importar.

    Figura 3: seleção de Import Drawables no menu suspenso.

  2. A caixa de diálogo Import drawables será exibida. Conforme mostrado na figura 4, essa caixa de diálogo exibe uma lista dos recursos que você está importando. Se você estiver fornecendo várias versões do mesmo recurso, precisará adicionar qualificadores de configuração de dispositivo que descrevam a configuração específica compatível com o recurso. Por exemplo, se você estiver fornecendo várias versões do mesmo recurso para diferentes densidades de tela, poderá adicionar um qualificador Density para cada versão. Observe que, se dois ou mais recursos tiverem o mesmo nome e qualificadores, apenas uma versão será importada. Para mais informações sobre qualificadores de recursos, consulte Fornecimento de recursos alternativos.

    Figura 4: a caixa de diálogo Import Drawables.

  3. Quando você achar que está tudo pronto para importar seus recursos, clique no botão Import.

Na janela do Resource Manager, os recursos agora estão prontos para serem usados no projeto, como mostrado na figura 5.

Figura 5: o Resource Manager agora mostra suas imagens importadas.

Analisar automaticamente densidades de drawables

Quando você importar um arquivo ou uma pasta e o caminho tiver um qualificador de densidade, o Resource Manager aplicará automaticamente esse qualificador como parte da importação. O Resource Manager pode analisar os qualificadores de densidade do Android e os fatores de escala do iOS.

Esta tabela lista como diferentes densidades compatíveis são representadas para Android e iOS:

Densidade Qualificador de densidade do Android Fator de escala do iOS
Baixa densidade (aproximadamente 120 dpi) ldpi não compatível
Média densidade (aproximadamente 160 dpi) mdpi escala original
Alta densidade (aproximadamente 240 dpi) hdpi não compatível
Densidade extra-alta (aproximadamente 320 dpi) xhdpi @2x
Densidade extra-extra-alta (aproximadamente 480 dpi) xxhdpi @3x
Densidade extra-extra-extra-alta (aproximadamente 640 dpi) xxxhdpi @4x

Veja alguns exemplos de como os caminhos de entrada se traduzem em caminhos de recursos após a importação:

Qualificador de densidade do Android: hdpi
Caminho de entrada: /UserFolder/icon1/hdpi/icon.png
Caminho de recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-hdpi/icon.png
Qualificador de densidade do Android: xxhdpi
Caminho de entrada: /UserFolder/icon1/abc-xxhdpi/icon.png
Caminho de recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xxhdpi/icon.png
Fator de escala do iOS: @2x
Caminho de entrada: /UserFolder/icon1/icon@2x.png
Caminho de recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon.png
Fator de escala do iOS: @2x
Caminho de entrada: /UserFolder/icon1/icon@2x_alternate.png
Caminho de recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon_alternate.png

Para mais informações sobre como oferecer compatibilidade com dispositivos com densidades de pixel diferentes, consulte Compatibilidade com densidades de pixel diferentes.

Arrastar e soltar drawables no layout

Você pode arrastar e soltar drawables do Resource Manager diretamente em um layout. Quando você solta um recurso em um layout, o Resource Manager cria uma ImageView correspondente para esse drawable, como mostrado na animação 1:

Animação 1: arrastar e soltar drawables em um layout na visualização Design.

Você também pode arrastar e soltar na visualização XML da guia Text, conforme mostrado na animação 2:

Animação 2: arrastar e soltar drawables em um layout da visualização Text.

Ao soltar um drawable em um layout na guia Text, o código gerado será diferente, dependendo de onde você soltar o layout:

  • Se você soltar um drawable em uma área em branco, o Resource Manager gerará uma ImageView correspondente.
  • Se você soltar um drawable em qualquer atributo, o Resource Manager substituirá esse valor de atributo por uma referência ao drawable.
  • Se você soltar um drawable em um elemento ImageView existente, o Resource Manager substituirá o atributo de origem correspondente.