IMÁGENES en SWIFTUI en Español

Hoy lo que vamos a ver en SwiftBeta es otra vista que nos ofrece SwiftUI. Vamos hablar de Image, la vista Image nos sirve para mostrar una imagen. Antes de usarlo vamos a importar una imagen a nuestro proyecto

Importar imágenes y pdfs en Xcode

Vamos a coger este icono de Youtube en formato PDF. Lo podéis descargar de la siguente url (de uno de mis repositorios de Github).

Una manera de añadir recursos (en este caso una imagen) es arrastrar la imagen a la carpeta de Assets que tenemos dentro de Xcode.

Una vez arrastrado veréis lo siguiente:

Como ves hay 3 casillas, estas 3 casillas representan 3 tamaños para tu imagen en distintas resoluciones, pero como la que estamos añadiendo es vectorizada no hace falta tener 3 tamaños de pantalla ya que Xcode lo hará por nosotros cuando compile la app.

Universal Assets

Para poner un solo tamaño, vamos al panel de la derecha, y en el inspector de atribudos seleccionamos la opción de Scales y escogemos Single Scale.

De esta manera pasamos a tener una sola casilla y evitamos tiempo y complejidad para importar los 3 tamaños.

Usar el asset en nuestra código

Al realizar estos pasos ya podemos acceder a nuestra imagen (es un PDF) cuando creemos nuestras vistas con SwiftUI. Volvemos a nuestro ContentView.swift y sustituimos el código por:

struct ContentView: View {
    var body: some View {
        Image("youtube")
    }
}

Con este cambio podemos ver que en el centro del canvas aparece la imagen de Youtube.

Si te fijas, la vista Image que muestra la imagen de Youtube tiene el mismo tamaño que la imagen original (en este caso 48x34). Pero podemos modificar este tamaño usando el modificador frame.

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .frame(width: 96, height: 68)
    }
}

Al aumentar el frame x2 respecto a su tamaño original no estamos viendo ningún cambio en el tamaño de la imagen, no se ha hecho más grande, ¿por qué? porque no estamos modificando el tamaño de la imagen sino el del componente Image.

Para comprobarlo vamos a poner dos bordes, uno nos ayudará a ver el tamaño del componente Image (negro), y el otro nos ayudará a ver el tamaño de ContentView (azul).

Vamos a modificar el código par añadir los bordes:

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .border(Color.black)
            .frame(width: 96, height: 68)
            .border(Color.blue)
    }
}

y el resultado es el siguiente:

Como puedes ver el modificador frame no está haciendo más grande la imagen.

Debug View Hierarchy

También los puedes ver compilando la aplicación en el simulador y pulsando al botón Debug View Hierarchy

De esta manera Xcode nos muestra todas las capas que tenemos en nuestra aplicación.

Si te fijas en el listado de vistas de la izquierda tenemos ContentView y Image.

Lo que está pasando es:
- Añadimos un modificador Overlay (borde azul)
- Creamos un frame del tamaño 96x68
- Añadimos un modificador Overlay (borde negro) alrededor de Image

Modificadores de Image

resizable y scaledToFit

Para modificar el tamaño de Image necesitamos llamar a otro modificador llamado resizable. Al hacerlo, Image ocupará todo el tamaño disponible en la pantalla y la imagen se distorsionará.

Vamos a modificar nuestro código y poner solo el modificador resizable

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .resizable()
    }
}

Y este es el resultado, la imagen intenta ocupar todo el tamaño que ocupa Image que es prácticamente toda la pantalla.

Para arreglar el aspect ratio de Image, solo tenemos que añadir otro modificador, llamado scaledToFit

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .resizable()
            .scaledToFit()
    }
}

Al hacerlo la imagen se ajusta para que no quede distorsionada

Ahora si queremos reducir el tamaño del componte Image, podemos usar el modificador frame.

frame

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .resizable()
            .scaledToFit()
            .frame(width: 96, height: 68)
    }
}

En este caso, vemos que el cambio se aplica correctamente, hemos modificado el tamaño de la imagen x2:

renderingMode

Antes de acabar, me gustaría comentar el modificador renderingMode por defecto su durante este tutorial ha sido .original, es decir hemos usado la imagen tal y como es. Pero podemos cambiarlo a .template para modificar el color de la imagen.
Para que te hagas una idea, podemos cambiar el color del icono de Youtube solo usando dos modificadores.

.renderingMode(.template)
.foregroundColor(.green)

Aquí está el código completo

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .renderingMode(.template)
            .resizable()
            .scaledToFit()
            .frame(width: 96, height: 68)
            .foregroundColor(.green)
    }
}

Sobretodo es muy útil para modificar el color de los iconos de tu app, es decir, si tu app tiene un branding con un color específico puedes aplicar ese color fácilmente a tus iconos usando este modificador.

BONUS: Cómo crear un patrón con resizable

Ahora te voy a explicar como puedes crear un patrón solo modificando un parámetro en el modificador resizable. Si quieres crear patrones lo único que tienes que hacer es usar resizable(resizingMode: .tile)

struct ContentView: View {
    var body: some View {
        Image("youtube")
            .resizable(resizingMode: .tile)
    }
}

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter