Oscurecer una imagen en una aplicación desarrollada con SwiftUI es una técnica muy útil para mejorar la legibilidad del texto, crear interfaces modernas y destacar elementos visuales. Gracias a los modificadores overlay y opacity, podemos aplicar una capa de color negro sobre una fotografía y controlar su intensidad sin modificar el archivo original.
En este tutorial aprenderás cómo oscurecer una imagen usando Overlay en Swift, cómo configurar Color.black y cómo ajustar la transparencia con .opacity. También descubrirás por qué esta técnica resulta tan útil para cualquier iOS Developer que trabaje con Xcode y SwiftUI.
¿Por qué oscurecer una imagen en una app SwiftUI?
Oscurecer imágenes es un recurso habitual en el diseño de aplicaciones móviles. Por ejemplo, una aplicación puede mostrar una fotografía de fondo con un título en blanco, un botón de acción o una descripción.
Cuando la imagen tiene zonas demasiado claras, el texto puede resultar difícil de leer. Aplicar una capa oscura crea contraste y permite que los elementos de la interfaz destaquen.
Esta técnica también se utiliza para crear pantallas de bienvenida, tarjetas de contenido, encabezados, galerías fotográficas y vistas de detalle.
Además, permite conservar la imagen original y adaptar su apariencia directamente desde el código de SwiftUI, sin tener que editarla previamente con otra herramienta.
Cómo mostrar una imagen en SwiftUI
Antes de oscurecer una fotografía, debemos mostrarla en pantalla. En este ejemplo, utilizaremos una imagen llamada mountains, que debes añadir a los recursos de imágenes de tu proyecto en Xcode.
import SwiftUI
struct ContentView: View {
var body: some View {
Image("mountains")
.resizable()
.scaledToFill()
.frame(height: 400)
.clipped()
}
}
El modificador resizable() permite adaptar la imagen al espacio disponible, mientras que scaledToFill() hace que ocupe el área definida conservando sus proporciones. Por su parte, frame(height: 400) establece una altura de 400 puntos y clipped() recorta el contenido que sobresale de sus límites.
Con esta estructura ya podemos aplicar una capa oscura.
El modifier overlay en SwiftUI
El modificador overlay permite colocar una vista encima de otra sin sustituir su contenido original. En este caso, lo utilizaremos para superponer un rectángulo negro sobre la imagen.
Image("mountains")
.resizable()
.scaledToFill()
.frame(height: 400)
.clipped()
.overlay {
Color.black
}
La instrucción overlay añade Color.black sobre la fotografía. Sin embargo, como el color negro es opaco por defecto, cubrirá completamente la imagen.
Para conseguir un resultado más atractivo, debemos controlar la transparencia de esa capa con el modificador opacity.
El modifier Color.black para crear una capa oscura
Color.black representa el color negro en SwiftUI. Al utilizarlo dentro de overlay, creamos una capa que oscurece visualmente todo lo que queda debajo.
Esta solución es sencilla y no requiere generar una nueva imagen ni modificar el archivo original.
Podemos pensar en Color.black como una lámina negra colocada sobre la fotografía. Cuanto más opaca sea la lámina, menos visible será la imagen de fondo.
No obstante, el color por sí solo no determina el nivel de oscurecimiento: para ello necesitamos .opacity.
El modifier opacity para controlar la intensidad
El modificador .opacity() permite establecer la opacidad de una vista mediante un valor entre 0.0 y 1.0.
0.0: la capa es completamente transparente.0.3: la capa tiene una opacidad del 30 %.0.5: la capa tiene una opacidad del 50 %.1.0: la capa es completamente opaca.
Por ejemplo, para oscurecer una fotografía sin ocultarla, podemos utilizar este código:
Image("mountains")
.resizable()
.scaledToFill()
.frame(height: 400)
.clipped()
.overlay {
Color.black.opacity(0.45)
}
En este caso, .opacity(0.45) aplica una capa negra con una opacidad del 45 %. El resultado es una imagen más oscura en la que todavía se aprecian los detalles del paisaje.
Puedes probar diferentes valores hasta encontrar el equilibrio adecuado para el diseño de tu aplicación.
Ejemplo completo: imagen oscurecida con texto blanco
Una de las aplicaciones más prácticas de esta técnica consiste en colocar un título blanco encima de una fotografía. El siguiente ejemplo combina overlay, Color.black y .opacity para crear una tarjeta visual.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomLeading) {
Image("mountains")
.resizable()
.scaledToFill()
.frame(height: 400)
.clipped()
.overlay {
Color.black.opacity(0.45)
}
Text("Discover New Horizons")
.font(.title.bold())
.foregroundStyle(.white)
.padding()
}
.frame(height: 400)
.clipShape(
RoundedRectangle(cornerRadius: 20)
)
.padding()
}
}
La imagen se oscurece mediante overlay, mientras que Color.black.opacity(0.45) determina la intensidad de la capa. El texto se coloca en la parte inferior izquierda mediante ZStack(alignment: .bottomLeading) y utiliza foregroundStyle(.white) para destacar sobre el fondo.
Conclusión
Aprender cómo oscurecer una imagen usando Overlay es una habilidad práctica para cualquier iOS Developer que desarrolle aplicaciones con Swift, Xcode y SwiftUI.
La combinación de overlay, Color.black y .opacity permite mejorar el contraste, facilitar la lectura y crear interfaces visualmente atractivas sin alterar las imágenes originales. Experimenta con diferentes niveles de opacidad para adaptar el resultado a las necesidades de tu aplicación.
