[SU] Gradientes

#swift #swiftui #ios

Se puede crear un gradiente con cualquiera de las siguientes estructuras:

Para crear un gradiente, se requieren las siguientes estructuras de apoyo:

Gradient.init(colors:)
UnitPoint.init(x:y:): Este es un punto en 2D normalizado en el espacio de coordenadas de una vista. Por ejemplo, para representar el centro de una vista se usa let unitPoint = UnitPoint(x: 0.5, y: 0.5).

struct ContentView: View {
  var body: some View {
    let gradient = Gradient(colors: [.blue, .red, .green])

    HStack {
      RoundedRectangle(cornerRadius: 10)
        .fill(
          LinearGradient(gradient: gradient, startPoint: .leading, endPoint: .trailing)
        )
        .frame(width: 50, height: 50)

      RoundedRectangle(cornerRadius: 10)
        .fill(
          LinearGradient(gradient: gradient, startPoint: .top, endPoint: .bottom)
        )
        .frame(width: 50, height: 50)

      RoundedRectangle(cornerRadius: 10)
        .fill(
          LinearGradient(gradient: gradient, startPoint: .topLeading, endPoint: .bottomTrailing)
        )
        .frame(width: 50, height: 50)

      RoundedRectangle(cornerRadius: 10)
        .fill(
          LinearGradient(gradient: gradient, startPoint: .bottomLeading, endPoint: .topTrailing)
        )
        .frame(width: 50, height: 50)
    }
    .padding()
  }
}

Fijar posición a los colores

Cuando se crea un gradiente por defecto los colores se distribuyen de forma uniforme en el área ocupada por el gradiente. Con la estructura Gradient.Stop se puede definir la posición de un color.

Gradient.Stop.init(color:location:)

struct ContentView: View {
  var body: some View {
    let stops = Gradient(stops: [
      .init(color: .blue, location: 0.0),
      .init(color: .red, location: 0.2),
      .init(color: .green, location: 0.4),
    ])

    HStack {
      RoundedRectangle(cornerRadius: 10)
        .fill(
          LinearGradient(gradient: stops, startPoint: .leading, endPoint: .trailing)
        )
        .frame(width: 50, height: 50)
    }
    .padding()
  }
}

Gradientes con formas

Radial

Se puede usar RadianGradient.init(gradient:center:startRadius:endRadius:) para crear un grandiente radial con centro en center, radio inicial startradius y radio final endradius. Notar en el siguiente ejemplo que el gradiente empieza a la izquierda (.leading) y tiene radio de 200, por lo que solo se puede ver la mitad derecha del gradiente radial dentro de un frame 200x200.

struct ContentView: View {
  var body: some View {
    let gradient = Gradient(colors: [
      .blue, .red, .green
    ])

    RoundedRectangle(cornerRadius: 10)
      .fill(
        RadialGradient(gradient: gradient, center: .leading, startRadius: 0, endRadius: 200)
      )
      .frame(width: 200, height: 200)
      .padding()
  }
}

Cónico

AngularGradient.conicGradient(_:center:angle:) sirve para construir un gradiente, que simula ser un cono visto desde arriba. Para definir el ángulo de offset se puede usar degrees(_:) o radians(_:).

struct ContentView: View {
  var body: some View {
    let gradient = Gradient(colors: [
      .blue, .red, .green
    ])

    RoundedRectangle(cornerRadius: 10)
      .fill(AngularGradient
        .conicGradient(gradient, center: .center, angle: .degrees(45)))
      .frame(width: 200, height: 200)
      .padding()
  }
}