Cómo crear mapas de bits de tamaño modificable (archivos 9-Patch)

La herramienta Draw 9-patch es un editor WYSIWYG incluido en Android Studio que te permite crear imágenes de mapas de bits cuyo tamaño se modifica automáticamente para adaptarse al contenido de la vista y al tamaño de la pantalla. Determinadas partes de la imagen se ajustan de manera horizontal o vertical según indicadores trazados dentro de ellas.

Para obtener una introducción a los gráficos de NinePatch y su funcionamiento, lee la sección sobre elementos de diseño de NinePatch en el documento Lienzo y elementos de diseño.

Figura 1: Imagen de NinePatch en la herramienta Draw 9-patch de Android Studio

A continuación, te presentamos una guía rápida para crear un gráfico de NinePatch usando la herramienta Draw 9-patch de Android Studio. Necesitarás la imagen PNG con la que te gustaría crear una imagen de NinePatch.

  1. En Android Studio, haz clic con el botón derecho en la imagen PNG a partir de la que te gustaría crear una imagen de NinePatch y, luego, haz clic en Create 9-patch file.
  2. Escribe un nombre de archivo para tu imagen de NinePatch y haz clic en OK. Se creará tu imagen con la extensión de archivo .9.png.
  3. Haz doble clic en el nuevo archivo de NinePatch para abrirlo en Android Studio. Se abrirá tu espacio de trabajo.

    El panel izquierdo es el área de trazado, en la que puedes editar las líneas de los parches expandibles y el área de contenido. El panel derecho es el área de previsualización, en la que puedes obtener una vista previa de tu gráfico cuando se expande.

  4. Haz clic dentro del perímetro de 1 píxel para trazar las líneas que definen los parches expandibles y el área de contenido (opcional). Haz clic con el botón derecho (en Mac, mantén presionada la tecla mayúscula y haz clic) para borrar las líneas trazadas anteriormente.
  5. Cuando hayas terminado, haz clic en File > Save para guardar los cambios.

Para abrir un archivo de NinePatch existente en Android Studio, haz doble clic en el archivo.

Para asegurarte de que se reduzca correctamente el tamaño de tus gráficos de NinePatch, verifica que las regiones extensibles tengan un tamaño de, al menos, 2 × 2 píxeles. De lo contrario, es posible que desaparezcan cuando se reduzca el tamaño. Además, proporciona un píxel de espacio seguro adicional en los gráficos antes y después de las regiones extensibles para evitar la interpolación durante el escalamiento, lo que podría cambiar el color de los límites.

Nota: Se cargará un archivo PNG normal (*.png) con un borde de un píxel vacío alrededor de la imagen, donde podrás trazar los parches extensibles y el área de contenido. Se cargará un archivo de NinePatch previamente guardado (*.9.png) como tal, sin agregar un área de trazado, porque ya existe.

Figura 2: Imagen de NinePatch que muestra contenido, parches y parches incorrectos

Entre los controles opcionales, se incluyen los siguientes:

  • Zoom: Ajusta el nivel de zoom del gráfico en el área de trazado.
  • Patch scale: Ajusta la escala de las imágenes en el área de vista previa.
  • Show lock: Permite visualizar el área del gráfico que no tiene elementos de diseño al pasar el mouse.
  • Show patches: Permite obtener una vista previa de los parches extensibles del área de trazado (el color rosa indica que es un parche extensible), tal como se muestra en la Figura 2 de arriba.
  • Show content: Destaca el área de contenido en las imágenes de vista previa (el color púrpura indica el área en la que se permite disponer contenido), tal como se muestra en la Figura 2.
  • Show bad patches: Se agrega un borde rojo alrededor de las áreas del parche que pueden producir artefactos en el gráfico cuando se expande, tal como se muestra en la Figura 2. Se mantendrá la coherencia visual de la imagen extendible si eliminas todos los parches incorrectos.