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 hallar 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 cual te gustaría crear una imagen de NinePatch.

  1. En Android Studio, haz clic con el botón secundario en la imagen PNG a partir de la cual desearías 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, luego, haz clic en OK. Tu imagen se creará con la extensión de archivo .9.png.
  3. Haz doble clic sobre tu nuevo archivo de NinePatch para abrirlo en Android Studio. Se abrirá tu espacio de trabajo.

    El subpanel izquierdo es el área de trazado, en la que puedes editar las líneas de los parches expansibles y el área de contenido. El subpanel derecho es el área de vista previa, donde 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 expansibles y el área de contenido (opcional). Haz clic con el botón secundario (en Mac, mantén presionada la tecla Mayús y haz clic) para borrar las líneas trazadas anteriormente.
  5. Cuando hayas terminado, haz clic en File > Save para guardar tus cambios.

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

Para asegurarte de que el tamaño de tus gráficos de NinePatch se reduzca correctamente, verifica que las regiones extensibles tengan un tamaño de al menos 2 x 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 cual 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), 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), 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, como se muestra en la figura 2. Se mantendrá la coherencia visual de la imagen extensible si eliminas todos los parches incorrectos.