Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

Cómo administrar los recursos de IU de tu app con Resource Manager

Resource Manager es una ventana de herramientas que te permite importar, crear, administrar y usar recursos en tu app. Para abrir la ventana de herramientas, selecciona View > Tool Windows > Resource Manager en la barra de menú o Resource Manager en la barra lateral izquierda.

Figura 1: Resource Manager

  1. Haz clic en Add  para agregar un nuevo recurso a tu proyecto. Puedes agregar recursos vectoriales y de imágenes, fuentes, archivos y valores de recursos, o puedes importarlos en tu proyecto.
  2. El menú desplegable del módulo te permite ver los recursos específicos de un módulo.
  3. Usa la barra de búsqueda para buscar un recurso en todos los módulos del proyecto.
  4. Resource Manager agrupa tus recursos por tipo. Usa estas pestañas para alternar entre los tipos de recursos. Haz clic en el ícono de menú ampliado ícono de menú ampliado para mostrar tipos de recursos adicionales.
  5. El botón de filtro te permite ver recursos de módulos dependientes locales, bibliotecas externas y el marco de trabajo de Android. Además, puedes usar el filtro para mostrar los atributos de tema.
  6. En el área de contenido principal, se muestran vistas previas de tus recursos. Haz clic con el botón derecho en uno para ver un menú contextual en el que puedes renombrar el recurso y buscar en qué parte de tu app se usa, entre otras opciones.
  7. Haz clic en estos botones para ver los recursos como mosaicos o en una lista.
  8. Haz clic en estos botones para cambiar el tamaño de la vista previa de los recursos.

Además de las funciones mencionadas anteriormente, Resource Manager ofrece una manera simple de importar de forma masiva elementos de diseño en tu proyecto. Puedes arrastrar y soltar archivos de imagen (incluidos los archivos SVG) directamente en Resource Manager o usar el asistente de Import Drawables. Para obtener más información, consulta la sección Cómo importar recursos en tu proyecto a continuación.

Haz doble clic en un recurso para ver información más detallada en Resource Manager. Si tienes varias versiones de un recurso, en esta vista detallada se mostrará cada una junto con los calificadores asociados, como en la figura 2. Desde aquí, también puedes hacer doble clic en una versión específica para abrirla en una ventana del editor.

Figura 2: En Resource Manager, se muestran las versiones de un recurso de imagen para diferentes densidades de pantalla

Cómo importar elementos de diseño en tu proyecto

Para importar recursos de imagen, arrastra y suelta las carpetas o los archivos de recursos directamente en Resource Manager. Una vez que lo hagas, aparecerá el diálogo Import drawables en el que podrás ver un resumen de los recursos y agregar los calificadores necesarios antes de la importación.

Para importar recursos de imagen en tu proyecto, haz lo siguiente:

  1. Arrastra y suelta las imágenes directamente en la ventana Resource Manager en Android Studio. De manera alternativa, haz clic en el ícono del signo más (+), selecciona Import Drawables como se muestra en la figura 3 y, luego, selecciona los archivos y las carpetas que quieras importar.

    Figura 3: Selecciona Import Drawables en el menú desplegable

  2. Aparecerá el diálogo Import drawables. Como se muestra en la figura 4, en este diálogo, se enumeran los recursos para importar. Para cambiar el nombre de los recursos, haz clic en el cuadro de texto que aparece sobre la vista previa de cada recurso.

    Si proporcionas varias versiones del mismo recurso, asegúrate de agregar calificadores de configuración de dispositivos que describan la configuración específica que el recurso admite. Por ejemplo, si proporcionas varias versiones del mismo recurso para diferentes densidades de pantalla, puedes agregar un calificador Density en cada una. Ten en cuenta que si hay dos o más recursos con el mismo nombre y los mismos calificadores, solo se importará una versión. Para obtener más información sobre los calificadores de recursos, consulta Cómo proporcionar recursos alternativos.

    Figura 4: Diálogo Import Drawables

    Una vez que asignes un nombre a tus recursos y agregues los calificadores necesarios, haz clic en Next.

  3. En la siguiente pantalla, se muestra un resumen de los recursos que vas a importar. Cuando estés listo para importar, haz clic en Import.

En la ventana Resource Manager, se enumeran los recursos listos para usar en tu proyecto, como se muestra en la figura 5.

Figura 5: En Resource Manager, ahora se muestran las imágenes importadas

Cómo analizar automáticamente las densidades de los elementos de diseño

Cuando importas un archivo o una carpeta y su ruta de acceso contiene un calificador de densidad, Resource Manager aplica automáticamente el calificador de densidad como parte del proceso de importación. Resource Manager puede analizar tanto los calificadores de densidad de Android como los factores de escalamiento de iOS.

En esta tabla, se enumera cómo se representan las diferentes densidades compatibles con Android y iOS:

Densidad Calificador de densidad de Android Factor de escalamiento de iOS
Densidad baja (~120 dpi) ldpi no admitido
Densidad media (~160 dpi) mdpi escalamiento original
Densidad alta (~240 dpi) hdpi no admitido
Densidad muy alta (~320 dpi) xhdpi @2x
Densidad muy muy alta (~480 dpi) xxhdpi @3x
Densidad extremadamente alta (~640 dpi) xxxhdpi @4x

Estos son algunos ejemplos de cómo las rutas de acceso de las entradas se traducen en rutas de acceso de recursos luego de la importación:

Calificador de densidad de Android: hdpi
Ruta de acceso de la entrada: /UserFolder/icon1/hdpi/icon.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-hdpi/icon.png
Calificador de densidad de Android: xxhdpi
Ruta de acceso de la entrada: /UserFolder/icon1/abc-xxhdpi/icon.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xxhdpi/icon.png
Factor de escalamiento de iOS: @2x
Ruta de acceso de la entrada: /UserFolder/icon1/icon@2x.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon.png
Factor de escalamiento de iOS: @2x
Ruta de acceso de la entrada: /UserFolder/icon1/icon@2x_alternate.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon_alternate.png

Para obtener más información, consulta Cómo admitir diferentes densidades de píxeles.

Cómo arrastrar y soltar elementos en tu diseño

Puedes arrastrar y soltar elementos de diseño desde Resource Manager directamente en un diseño. Al hacerlo, en Resource Manager se crea un valor ImageView correspondiente para ese elemento de diseño, como se muestra en la animación 1:

Animación 1: Acción de arrastrar y soltar elementos de diseño en un diseño en la vista Design

También puedes arrastrar y soltar directamente en el XML del diseño, como se muestra en la animación 2:

Animación 2: Acción de arrastrar y soltar elementos de diseño en un diseño en la vista Text

Cuando sueltas un elemento de diseño en un diseño en la pestaña Text, el código que se genera difiere en función de dónde lo sueltas:

  • Si sueltas el elemento de diseño en un área en blanco, genera el valor ImageView correspondiente en Resource Manager.
  • Si sueltas el elemento de diseño sobre algún atributo en el XML de diseño, se reemplaza ese valor del atributo con una referencia al elemento de diseño en Resource Manager. Ten en cuenta que también puedes arrastrar cualquier tipo de recurso sobre un atributo XML para reemplazar el valor del atributo.
  • Si sueltas un elemento de diseño en un elemento ImageView existente, se reemplaza el atributo original correspondiente en Resource Manager.