Cambio Dinámico del Icono de tu App con setAlternateIconName

Hay muchas cosas que podemos cambiar de forma dinámica una vez que el usuario ha instalado nuestra app, pero hasta hace un par de años el icono que tenía nuestra app no podía modificarse salvo que lanzáramos otra versión.

En este articulo veremos la forma que nos da Apple para poder cambiar el icono que tienen nuestras apps en los dispositivos de nuestros usuarios.

Pasos a seguir

Para dar la oportunidad a nuestros usuarios de cambiar el icono tendremos que desarrollar tres tareas

  1. Modificar el Info.plist de nuestro proyecto
  2. Añadir los recursos de los nuevos iconos
  3. Hacer uso del API para cambiar el icono

Vamos a ver en detalle estos tres pasos.

Modificar Info.plist

Tenemos que añadir una nueva entrada al archivo de definición de nuestro proyecto, concretamente la denominada como Icon Files (iOS 5) y anidado en ella una entrada de tipo CFBundleAlternateIcons de manera que nuestro Info.plis quedé así

Como se puede apreciar el nodo CFBundleAlternateIcons es un diccionario que contiene entradas para los diferentes iconos alternativos que vamos a proporcionar en la app.

Cada entrada tiene por nombre el identificador del icono, y contiene dos entradas, una llamada CFBundleIconFiles que es un array con el nombre de la imagen del icono al que representa y otra denominada UIPrerenderedIcon de tipo storing cuyo valor será NO

Si prefieres añadir los iconos en forma de código en lugar de usar el editor será algo como esto

Iconos Alternativos

Ahora vamos a añadir las imágenes de los iconos alternativos que hemos definido en el archivo info.plist del paso anterior.

Nuestros iconos deben cumplir con las siguientes reglas

  1. Estar contenidos en una carpeta o en el raíz de nuestro proyecto. A día de hoy no podemos incluirlos en un archivo assets.
  2. Debemos añadir dos imágenes por cada icono que cumplan con la convención de nomenclatura @2x @3x para que iOS sepa que icono de usar.
  3. El tamaño para las imágenes @2x es de 120×120 y el de las @3x de 180×180
  4. La base del nombre del icono alternativo debe coincidir con el que hemos establecido en el CFBundleIconFiles.

Una vez añadidas las imágenes nuestro proyecto debe parecerse a esto…

Y ahora a por el último paso, el que cambiará el icono de la app.

Usando el API

Lo primero que tenemos que hacer es comprobar si el sistema soporta el cambio de icono de la app. Esto lo hacemos con la función supportsAlternateIcons

Si tenemos luz verde para el cambio usaremos la función setAlternateIconName

La función recibe como parámetro el nombre del nuevo icono sin el sufijo @2x o @3x ni la extensión png.

Si queremos volver al icono original basta con pasar nil a la función setAlternateIconName

Ahora todo junto

Al final nuestro usuario verá algo como esto…