Con la llegada de IOS 14 y el nuevo SDK, Apple presentó en su pasada WWDC 2020 un nuevo conjunto de componentes visuales para UIKit, y como no, para SwiftUI. 

Entre estos nuevos componentes visuales existe llamado <a href="https://developer.apple.com/documentation/swiftui/colorpicker" target="_blank" rel="noreferrer noopener">ColorPicker</a> , y que como el propio nombre indica, es un componente que nos proporciona una paleta de colores para mostrar a nuestro usuario y que este pueda seleccionar un color de la misma.

Si utilizamos UIKit para crear nuestras interfaces también existe un nuevo componente en la librerías de nombre <a href="https://developer.apple.com/documentation/uikit/uicolorwell" target="_blank" rel="noreferrer noopener">UIColorWell</a>.

Componentes como este existen muchos en librerías de código abierto, pero todo lo que integre el propio SDK siempre tendrá mejor rendimiento y nos liberará de depender de terceros.

El punto negativo de este nuevo componente, el ColorPicker en SwiftUI, es que solo es compatible con IOS 14 en adelante, no es retro compatible por lo que si queremos utilizarlo en nuestros desarrollos debemos de tenerlo en cuenta.

Integrando ColorPicker en un proyecto con SwiftUI

En las próximas líneas vamos a ver cómo añadir y utilizar ColorPicker en una aplicación de ejemplo. Es sumamente sencillo su utilización. 

Para mostrar el ColorPicker unicamente debemos de añadir una instancia del mismo, la cual requiere:

  • de una cadena de texto como título
  • selection: una variable donde el componente añadirá el valor del color seleccionado
  • supportsOpacity: por último decidir si deseamos que se incluya soporte para opacidad en los colores utilizados, por defecto es que sí.
ColorPicker("Seleccione un color",  selection: $selectedColor, supportsOpacity: true)

Dentro de un componente View podríamos tener lo siguiente:

struct ContentView: View {

  @State private var selectedColor = Color.black
  
  var body: some View {
    VStack(alignment: .center) {
      Text("Color Picker").foregroundColor(selectedColor).font(.largeTitle)
      ColorPicker(
        "Seleccione un color",
        selection: $selectedColor,
        supportsOpacity: true
      ).frame(width: 150, height: 150)
      Spacer()
    }.padding(.vertical, 70)
  }
}

Ya podemos ejecutar la aplicación y comprobar cómo se muestra nuestro ColorPicker. 

Realmente sencillo y rápido de implementar.

Todo el código lo tenéis disponible en Github.