Crea una app con Múltiples Iconos a escoger en SwiftUI

Hoy en SwiftBeta vamos a ver a cómo crear una app con diferentes iconos. Seguro que has visto que hay aplicaciones dentro del App Store, que una vez instaladas en tu dispositivo tienes la oportunidad de cambiar el icono (normalmente esta opción aparece en la sección de Ajustes de la app) y esta opción solo está disponible si el desarrollador ha añadido Iconos Alternativos y preparado la app para ello. Y es justo lo que te voy a enseñar en el video de hoy, vas a ver que con muy pocas líneas de código, podemos añadir varios iconos a nuestra app y así dejar a un user que escoja entre el que más le guste o se sienta identificado.

Al escoger un nuevo icono, este pasa a ser el que verás en el menu home del iPhone hasta que te canses y quieras cambiar el icono.

Antes de continuar, si quieres apoyar el contenido que subo cada semana, suscríbete. De esta manera seguiré publicando contenido completamente grautito en Youtube.

Creamos proyecto en Xcode

Lo primero de todo que vamos hacer es crear el proyecto en Xcode, en mi caso estoy usando Xcode 15 beta, pero todo lo que vamos a ver en el video de hoy está disponible en anteriores versiones de Xcode, así que no te preocupes.

Al crear el proyecto, muy importante selecciona SwiftUI como Interfaz. Y una vez creado nos vamos a la sección de Assets.

Añadimos los Assets (los iconos)

Dentro de esta sección vamos a copiar y pegar 4 veces el Asset que tiene de nombre AppIcon. Y una vez creado, vamos a asignar a cada icono una imagen de las que aparecen a continuación. Las imágenes tienen el nombre de AppIcon, AppIcon 1, AppIcon 2, AppIcon 3 y AppIcon 4.

El tamaño de cada imagen es de 1024x1024, los puedes descargar y arrastrar al proyecto de Xcode. Fíjate que Xcode desde hace varias versiones solo tiene un único tamaño de icono de app, ya no hace falta transformarlo para varias resoluciones o dispositivos (un avance muy importante la verdad).

Lo siguiente que vamos hacer es volver a arrastrar las imágenes, esta vez ya no serán iconos sino que serán imágenes que podemos usar en nuestra app. En este caso, estamos usando las mismas, pero una buena práctica es optimizar el tamaño de las imágenes.

Fíjate que en este caso, al añadir los mismos iconos en la carpeta Images, hemos usado valores del 0 al 4.

Ahora que ya tenemos los Assets, vamos a crear la vista.

Mostramos todos los iconos en ContentView

Vamos a crear una vista muy sencilla, un Form con un ForEach, y dentro de cada celda vamos a mostrar un Button con la imagen y el nombre del asset:

let myIcons = ["0",
               "1",
               "2",
               "3",
               "4"]

var body: some View {
    Form {
        Section("Change AppIcon") {
            ForEach(myIcons, id: \.self) { iconName in
                Button(action: {
                    // TODO:
                }, label: {
                    HStack {
                        Image(iconName)
                            .resizable()
                            .scaledToFit()
                            .frame(width: 100)
                        Text(iconName)
                            .bold()
                    }
                })

            }
        }
    }
}

Cuando pulsemo cualquier button de nuestro Form, queremos actualizar el icono de nuestra app. Para hacerlo vamos a crear un método llamado:

func updateIcon(name: String)

Y vamos a crear la implementación:

func updateIcon(name: String) {
    var iconName = name
    if name == "0" {
        iconName = "AppIcon"
    } else {
        iconName = "AppIcon " + name
    }
    
    print(iconName)
    UIApplication.shared.setAlternateIconName(iconName) { error in
        guard let error = error else {
            return
        }
        print("Error \(error.localizedDescription)")
    }
}

Ahora solo debemos llamarlo cada vez que se pulse el Button:

Button(action: {
    updateIcon(name: iconName)
}

Vamos a compilar a ver qué ocurre. Spoiler, no va a funcionar. Al compilar y pulsar en alguno de los Buttons obtenemos este error por consola:

Error The file doesn’t exist.

Build Settings de Xcode

Antes de que funcione, debemos de especificar en los Build Settings de Xcode que tenemos varios iconos disponibles para nuestra app. Para hacerlo, vamos a Xcode, y vamos a nuestro Target SwiftBetaAlternateIcon, allí seleccionamos Build Settings y buscamos Icon (también marcamos All).

Al hacerlo vemos que aparece una sección llamada Asset Catalog Compiler Options, aquí vamos a seguir 2 pasos:

• En Include All App Icon Assets, seleccionamos Yes
• En Alternate App Icon Sets, añadimos uno por uno el nombre de los iconos de nuestra app. Es muy importante que añadamos el nombre que aparece en los Assets.

Si ahora compilamos y volvemos a pulsar en cualquier de los Buttons, vemos que esta vez aparece un Popup indicando que el icono de nuestra app ha sido modificado. Podemos pulsar COMMAND+H y ver que efectivamente se ha modificado.

Pero que ocurre si queremos volver al icono original? obtenemos un error y no se actualiza, para arreglarlo, debemos enviar nil. Así que modificamos el método updateIcon de la siguiente manera:

func updateIcon(name: String) {
    var iconName: String? = name
    if name == "0" {
        iconName = nil
    } else {
        iconName = "AppIcon " + name
    }
...
}

Conclusión

Hoy hemos aprendido a cómo añadir varios iconos a nuestra app, dejando que un usuario pueda alternar. En este caso el diseño que hemos usado es muy simple, pero podrías customizarlos para épocas del año, eventos, etc. Dejando que cada user se sienta identificado con diferentes iconos de tu aplicación.