¿Qué es una imagen NinePatch

Una imagen NinePatch es una imagen PNG especial que permite al sistema Android cambiar automáticamente el tamaño de las imágenes según el contenido sin distorsión ni estiramiento. Esto permite a los desarrolladores crear elementos de interfaz de usuario escalables como botones, barras de progreso e imágenes de fondo, que no tienen múltiples conjuntos de recursos para diferentes tamaños de pantalla.

Creación de una imagen NinePatch

Draw 9-patch es una herramienta dentro de Android Studio para crear y editar imágenes NinePatch. Permite a los desarrolladores dibujar intuitivamente líneas de píxeles negros a lo largo de los bordes y obtener una vista previa de cómo se ve la imagen en diferentes tamaños. Hay muchos recursos y aplicaciones en línea disponibles para hacer imágenes NinePatch además de las herramientas que vienen con Android Studio, como 9 Patch Editor.

Uso de imágenes NinePatch

El uso de imágenes NinePatch en las aplicaciones de Android es sencillo: las agrega a la carpeta res/drawable del proyecto y luego las referencia usando android:background en su archivo de diseño XML. Por ejemplo:

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="¡Texto muuuuuy grande!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

Tenga cuidado, layout_width y layout_height deben ser wrap_content para mostrar los botones de forma ordenada con texto.

Lo siguiente muestra dos botones renderizados a través de XML e imágenes NinePatch. Como en la figura anterior, observe cómo el ancho y el alto de los botones cambian con el texto, mientras que la imagen de fondo se estira para ajustarse a la pantalla.

Imagen de botones pequeños y
de tamaño normal

Escenarios de NinePatch

Fondos de botón: Este es el caso de aplicación más común para Drawables. Dado que la longitud del texto puede variar con diferentes botones, NinePatch se asegura de que la imagen de fondo se pueda cubrir por completo y no se salga del límite ni se deforme con el botón desde la posición del texto interior. Por ejemplo, si tenemos un fondo de botón de esquina redondeada, usaremos NinePatch y, sea cual sea la longitud del texto del botón, las esquinas redondeadas permanecerán sin cambios.
Fondos de barra de progreso: Estira la imagen de fondo a través de la distancia de la unidad fija con la barra de progreso donde las distancias de la unidad son diferentes y varían con la carga de un sistema a otro. NinePatch se asegurará de que el estilo de la imagen de fondo no se distorsione al estirar.
Fondo para el elemento de lista: En la vista de lista, los fondos de estos elementos de lista deben ser diferentes según la longitud del contenido que se coloque en la vista. NinePatch asegura que las imágenes de fondo se estiren muy bien sin distorsionarse.
Fondos de la jaula de diálogo: En tales casos, el tamaño del diálogo cambia del contenido. NinePatch asegura que las imágenes de fondo se estiren de manera consistente con el mismo estilo.
Divisor escalable: Con NinePatch, un usuario puede diseñar un divisor estirable horizontal o vertical, que se adapte a varios tamaños de pantalla y adaptabilidades de diseño.
Fondos de formas definidas por el usuario: NinePatch construye una variedad de fondos de formas definidas por el usuario, como esquinas redondeadas, sombreadas, etc. con diferentes efectos especiales sin cambios en estos efectos al estirar.

Ventajas de NinePatch

Escalabilidad: Esta es la mayor ventaja de NinePatch. Cambie el tamaño automáticamente según el contenido, eliminando así la necesidad de mantener múltiples conjuntos de recursos para diferentes tamaños de pantalla y longitudes de contenido.
Evite la distorsión: El control de coordenadas del área estirable evita que las imágenes se estiren. Las propiedades de nitidez y belleza se conservan la mayoría de las veces.
Mayor eficiencia: Menos archivos de recursos y, por lo tanto, mayor eficiencia en el desarrollo.
Disposición flexible: Puede crear fácilmente diferentes formas y tamaños de elementos de la interfaz de usuario para adaptarse a varios requisitos de diseño.

Funcionamiento de NinePatch

El sello distintivo de una imagen NinePatch es un borde completamente estrecho de un píxel. Ese borde define la escalabilidad y el área de los contenidos de la imagen. Dibujar líneas de píxeles negros en los bordes indica qué parte se va a estirar en la periferia, cuál verticalmente y cuál horizontalmente.

Image of stretchable area
and padding box

En particular, un borde de 1 píxel se divide en cuatro partes:

1. Borde izquierdo (línea de píxeles negros vertical):

Función: Controla el estiramiento vertical de la imagen. La línea de píxeles negros vertical en el borde izquierdo define qué áreas de la imagen se pueden estirar verticalmente.
Por ejemplo:
- Una línea sin píxeles negros: La altura de la imagen es fija; por lo tanto, no es capaz de estirarse verticalmente. Si se intenta colocar en un contenedor que sea más alto que la propia imagen, permanecerá como está y puede tener áreas en blanco o cortarse.
- Una línea de píxeles negros: La imagen se puede estirar verticalmente, pero luego se limita a las áreas especificadas por las líneas de píxeles negros. Por ejemplo, si se coloca una línea de píxeles negros en el medio de un borde izquierdo, significaría que la mitad superior y la mitad inferior no cambiarán, y el estiramiento vertical solo se permitirá en la parte central.
- Múltiples líneas de píxeles negros: Se puede definir mediante varias regiones de estiramiento vertical. Por ejemplo, habrá dos líneas de píxeles negros en un borde izquierdo, que dividen la imagen en tres partes en las partes centrales estirables, y las partes superior e inferior permanecen sin cambios.

2. Borde superior: (Líneas horizontales de píxeles negros de agua):

Función: Controla el estiramiento horizontal de la imagen. Una línea de píxeles negros horizontal en el borde superior define las partes estirables de la imagen en la dimensión horizontal.
Por ejemplo:
- Una línea sin píxeles negros: El ancho de la imagen es fijo y no se estira horizontalmente. De manera similar al caso sin línea de píxeles negros en el borde izquierdo, la imagen simplemente permanecerá igual, pero puede tener áreas en blanco o cortarse.
- Una línea de píxeles negros: La imagen puede estirarse horizontalmente, pero de nuevo, solo en el área especificada por la línea de píxeles negros. Por ejemplo, si la línea de píxeles negros está en el medio del borde superior, la mitad izquierda de la imagen no cambiará, ni la mitad derecha, lo que solo permitirá cierto estiramiento en el medio.
- Múltiples líneas de píxeles negros: Define varias regiones estirables laterales. Al igual que el caso del borde izquierdo con varias líneas de píxeles negros horizontales, divide la imagen en muchas partes, y cualquier sección así marcada puede estirarse horizontalmente.

3. Borde derecho (líneas de píxeles negros verticales):

Función: Define el relleno derecho del área de contenido. Las líneas de píxeles negros verticales en el margen derecho indican el límite derecho del área de contenido de la imagen. Durante el estiramiento, el lado derecho del área de contenido permanecerá en este límite.
Ejemplos:
- Sin líneas de píxeles negros: El área de contenido se extiende hasta el margen derecho de la imagen, sin flexionarse cuando el contenido se estira, dejando que el contenido de la imagen se extienda hasta el borde derecho.
- Una línea de píxeles negros: El borde derecho del área de contenido está determinado por la posición de la línea de píxeles negros. Cuando se estira, el lado derecho del área de contenido se mantendrá en su lugar en la línea de píxeles negros mientras que el espacio de la derecha se estira.

4. Límite inferior (la línea de píxeles negros horizontal):

Función: Define el margen inferior del área dentro de la cual está confinado el contenido. La línea de píxeles negros horizontal en la parte inferior define dónde termina el límite inferior del área de contenido de la imagen. Las extensiones de la parte inferior del área de contenido permanecerían en ese límite cuando se estiren.
Ejemplo:
- Sin línea de píxeles negros: el área de contenido se extiende hasta el borde inferior de la imagen. Cuando se estira, la totalidad del contenido de la imagen se estira hasta el borde inferior.
- Una línea de píxeles negros: el límite inferior del área de contenido se deriva de la posición de la línea de píxeles negros. Cuando se estira, la parte inferior del área de contenido permanecerá al nivel de la línea de píxeles negros y el espacio en blanco debajo se estirará.

Usando líneas de píxeles negros inteligentes en estos cuatro bordes, es posible que el programador controle con precisión cómo se muestra la imagen Nine Patch en diferentes tamaños, al tiempo que se asegura de que lo haga sin deformación o pérdida del área de contenido. Tenga en cuenta que esas líneas de píxeles son los límites de definición del área estirable del área de contenido, no los límites reales de la imagen. Las partes sin líneas de píxeles negros son componentes de tamaño fijo.

Notas

Una imagen NinePatch debe guardarse con un nombre de archivo que termine con .9.png.
Es necesaria una dimensión mínima de 2x2 píxeles en el área estirable para que la imagen no desaparezca al escalar.
Un espacio de seguridad adicional en los bordes del área estirable puede eliminar los cambios de color que se producen al escalar.
Asegúrese de verificar muy bien las regiones estirables y de contenido de la imagen para que la imagen se muestre correctamente en varias dimensiones.
No abuse de las imágenes NinePatch, especialmente en interfaces animadas o aquellas que cambian con frecuencia, ya que disminuyen el rendimiento.

Resumen

Las imágenes NinePatch son las herramientas más poderosas para aprovechar la eficiencia en el diseño de la interfaz de usuario y mejorar la experiencia del usuario en las aplicaciones de Android. Sin embargo, esto no significa que los desarrolladores no tengan que equilibrar las ventajas y las limitaciones, ya que la elección del tipo de imagen depende del requisito. Por ejemplo, incluso si las imágenes NinePatch son la elección correcta para fondos escalables o elementos de la interfaz de usuario que necesitan aceptar diferentes longitudes de texto, las imágenes PNG normales estarán bien para imágenes de fondo estáticas: su simplicidad es la clave. Al usar NinePatch, se debe tener el máximo cuidado en el diseño y las pruebas para garantizar que funcione de manera excelente en una variedad de dispositivos y tamaños de pantalla.