Cómo usar imágenes NinePatch en iOS y macOS

Las imágenes NinePatch son imágenes PNG especializadas que te permiten estirar el centro pero dejar los bordes intactos, de forma muy similar a la propia imagen. Son ideales para botones escalables, fondos y otros elementos de la interfaz de usuario. Este artículo hablará sobre cómo usar la biblioteca NinePatchKit para implementar imágenes NinePatch en aplicaciones de iOS y macOS.

Uso de una imagen NinePatch en iOS y macOS

1. Crear la imagen NinePatch

Ahora, tienes que crear una imagen NinePatch. Recomiendo usar la herramienta 9 Patch Editor para generar tu imagen. El proceso es el siguiente:

Ve al sitio de 9 Patch Editor.
Sube la imagen PNG que deseas convertir a NinePatch.
Define los límites (puedes hacerlo arrastrando los bordes) y obtén una vista previa del resultado.
Descarga la imagen NinePatch resultante. En las opciones de descarga, asegúrate de marcar la opción "Guardar como imagen compilada", ya que esto asegurará que tu imagen contenga todos los metadatos necesarios para que pueda ser analizada correctamente por NinePatchKit.

2. Incluir las imágenes NinePatch en el proyecto

Puedes incorporar imágenes NinePatch en tu bundle, Data Set o en cualquier lugar que desees, pero nunca las añadas a Image Set. Durante la compilación, todos los PNG alojados en Image Set se optimizarán mediante la incrustación de fragmentos CgBI y sin los fragmentos adicionales, por lo que las imágenes NinePatch guardadas en Image Set ya no funcionarán correctamente al analizar el formato debido a las modificaciones que sufren.

3. Importar NinePatchKit

A continuación, necesitarás utilizar la biblioteca NinePatchKit para crear y renderizar imágenes NinePatch. Esta biblioteca de código abierto proporciona una API muy simple para imágenes NinePatch, simplificando su uso dentro de aplicaciones en iOS y macOS. Puedes vincularla a tu proyecto a través de CocoaPods o añadir manualmente el código dentro de tu proyecto.

Usando CocoaPods: Añade esta línea a tu Podfile:
```
pod 'NinePatchKit'
```
Luego ejecuta pod install.
Integración manual: Descarga la biblioteca NinePatchKit y añade la carpeta NinePatchUtils a tu proyecto.

4. Usar una imagen NinePatch en el código

Ahora, puedes usar NinePatchKit para cargar y renderizar tus imágenes NinePatch. Este es un ejemplo sencillo para mostrar cómo puedes usarlas en NinePatchImageView:

#import <NinePatchKit/NinePatchKit.h>
...
NSString * path = [[NSBundle mainBundle] pathForResource:@"YourNinePatchImageName" ofType:@"png"];
NinePatchImageView * imageView = [[NinePatchImageView alloc] init];
imageView.showImage = [NinePatchUtils imageWithContentsOfFile:path];

[imageView.contentView addSubview:CustomView]; // añade una subvista a contentView

Reemplaza "YourNinePatchImageName" con el nombre de tu imagen NinePatch (sin extensión). Este fragmento de código crea una NinePatchImageView y, utilizando NinePatchUtils, carga tu imagen NinePatch. La NinePatchImageView es similar a UITableViewCell: puede tener subvistas adicionales añadidas a su contentView para un diseño más complejo.

5. Resumen

Ahora podrás usarlo fácilmente con aplicaciones de iOS y macOS utilizando gráficos NinePatch. Al usar la biblioteca NinePatchKit, puedes renderizar fácilmente imágenes estirables de alta calidad para mejorar la experiencia de tu interfaz.

Nota

Formato de imagen: Asegúrate de que tu imagen esté en el formato PNG correcto e incluya todos los metadatos NinePatch necesarios.
Ubicación de la imagen: Incluye la NinePatch en el paquete de recursos de tu proyecto y cárgala con la ruta correcta. No coloques la NinePatch en un Image Set porque puede corromper el formato de la imagen.