SwiftUI #12: Color

#swift #swiftui #ios

Se define un color en SwiftUI con la vista Color:

init(colorSpace:red:green:blue:opacity:). colorSpace, de tipo Color.RGBColorSpace define el sistema de color para interpretar los valores. red, green, blue son los valores desde 0.0 hasta 1.1 de cada uno d elos colores. opacity es el nivel de opacidad desde 0.0 (transparente) hasta 1.0 (opaco).
init(_:white:opacity:). Crea un color en escala de grises. white puede tomar valores desde 0.0 (negro) hasta 1.0 (blanco). opacity es la opacidad.
init(hue:saturation:brightness:opacity:): Color hecho con tono (hue), saturación y brillo.

Colores predefinidos

Color tiene un conjunto de colores predefinidos que se adapta al modo de interfaz (claro u obscuro). A continuación se listan unos cuantos.

Colores semánticos

Ejemplo

struct ContentView: View {
  var body: some View {
    Color(red: 0.5, green: 0.2, blue: 0.1)
      .frame(maxWidth: .infinity, maxHeight: 100)
      .padding()
  }
}

Definición de colores personalizados

En el "Asset Catalog", se puede agregar un nuevo color con la opción "New Color Set". Aparecerán dos cuadrados con etiquetas "Any Appearance" y "Dark". El nombre del "Color set" se usa como referencia desde el código.

En el contenido del color debo asegurarme de elegir "Display P3" en lugar de "sRGB", y en "Input Method" debo elegir "8-bit Hexadecimal".

Después de definir el "Color set", se puede referenciar desde la vista con el nombre.

sRGB y Display P3 son espacios de color, pero no equivalentes: sRGB es el estándar histórico de la web y de la mayoría de pantallas, con una gama de colores más limitada que garantiza que un mismo color se vea prácticamente igual en cualquier dispositivo, mientras que Display P3 es un espacio más moderno con una gama mucho más amplia —especialmente en rojos, verdes y amarillos— usado por pantallas actuales como iPhone, iPad y Mac modernos, permitiendo colores más intensos y realistas; el problema es que cuando defines un color en P3, los dispositivos que no lo soportan lo convierten automáticamente a sRGB, lo que puede producir variaciones visibles, por lo que sRGB es más seguro para consistencia y P3 es mejor cuando controlas el entorno y buscas máxima fidelidad visual.

Modificadores comunes:

A continuación se listan algunos modificadores que cambian el color de algunas vistas:

foregroundStyle(_:): Asigna el color al contenido de la vista
border(_:width:)
background(alignment:content:): Asigna una vista como el fondo de otra.
overlay(alignment:content:): Pone una vista encima de otra.
mix(with:by:in:): Mezcla un color con otro.

Ejemplos

struct ContentView: View {
  var body: some View {
    VStack {
      Rectangle()
        .frame(width: 100, height: 100)
        .foregroundStyle(Color.red)
        .border(Color.blue, width: 5.0)
        .background(alignment: .bottom) {
          Rectangle()
            .frame(width: 120, height: 120)
            .foregroundStyle(Color.yellow)
        }
      Text("Hola")
        .foregroundStyle(Color.blue)
        .padding(20)
        .background(Color.blue.mix(with: Color.red, by: 0.5))
        .border(Color.yellow, width: 10)
        .overlay(alignment: .center) {
          Color(red: 1, green: 0.2, blue: 1, opacity: 0.2)
            .frame(width: 20, height: 20)
        }
    }
  }
}

DEV Community