Color Picker en SwiftUI

Como iOS Developer, una de las tareas más comunes a las que te enfrentarás es la creación de interfaces de usuario interactivas y altamente personalizables. Permitir que el usuario elija sus propios colores para temas, etiquetas o dibujos es una funcionalidad premium que añade muchísimo valor a cualquier aplicación.

En este extenso tutorial, vamos a profundizar en qué es exactamente un color picker en SwiftUI, cómo utilizar la solución nativa que nos proporciona Apple, y, lo más importante, cómo crear nuestro propio selector de colores personalizado desde cero utilizando la programación Swift. Además, nos aseguraremos de que nuestro código sea compatible con el ecosistema completo: iOS, macOS y el siempre desafiante watchOS, todo desde un único proyecto en Xcode.

Si quieres dominar SwiftUI y llevar tus habilidades de Swift al siguiente nivel, acompáñame en esta guía paso a paso.

1. ¿Qué es un Color Picker en SwiftUI?

Un color picker en SwiftUI (o selector de color) es un control de interfaz de usuario que permite a los usuarios seleccionar un color de una paleta, un espectro o introduciendo valores hexadecimales o RGB.

Apple introdujo la vista nativa ColorPicker en iOS 14 y macOS 11. Esta vista invoca el selector de color del sistema, proporcionando una experiencia de usuario familiar y potente. Con una simple línea de código en Xcode, los desarrolladores pueden integrar una herramienta que maneja opacidad, selección de espectro completo y guardado de colores favoritos.

Sin embargo, hay un detalle crítico que todo iOS Developer debe conocer: el ColorPicker nativo no está disponible en watchOS ni en tvOS. Por lo tanto, si estamos construyendo una aplicación verdaderamente universal, necesitaremos entender cómo crear nuestra propia interfaz utilizando los fundamentos de la programación Swift.

2. Preparando el Entorno en Xcode

Antes de escribir nuestro código, necesitamos configurar nuestro entorno de trabajo.

1. Abre Xcode y selecciona Create a new Xcode project.
2. En la pestaña Multiplatform, elige la plantilla App.
3. Nombra tu proyecto (por ejemplo, UniversalColorPicker).
4. Asegúrate de que la interfaz seleccionada sea SwiftUI y el lenguaje sea Swift.

Al crear un proyecto multiplataforma, Xcode nos proporciona una estructura de carpetas compartida. Escribiremos nuestro código de manera que se adapte automáticamente al dispositivo en el que se está ejecutando.

3. Implementación del ColorPicker Nativo (iOS y macOS)

Empecemos explorando la solución nativa. Es rápida, eficiente y perfecta si tu aplicación solo está destinada a dispositivos iOS o Mac.

Abre el archivo ContentView.swift y modifica el código para incluir la vista ColorPicker. En SwiftUI, los controles que modifican un valor necesitan un estado (@State) para almacenar y reaccionar a ese cambio.

import SwiftUI

struct StandardPickerView: View {
    // 1. Definimos el estado para almacenar el color seleccionado
    @State private var colorSeleccionado: Color = .blue
    
    var body: some View {
        VStack(spacing: 30) {
            // Un rectángulo para previsualizar el color
            RoundedRectangle(cornerRadius: 15)
                .fill(colorSeleccionado)
                .frame(width: 200, height: 150)
                .shadow(radius: 10)
            
            // 2. El Color Picker nativo
            ColorPicker("Selecciona tu color favorito", selection: $colorSeleccionado)
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
        }
        .padding()
    }
}

Comprendiendo el código Swift:

• @State: Esta propiedad envuelve nuestro color. Cada vez que el usuario elige un nuevo color, SwiftUI redibuja automáticamente la vista (en este caso, actualizando el color del RoundedRectangle).
• ColorPicker: Toma un título (que puede ser ocultado usando .labelsHidden()) y un Binding (indicado por el símbolo $) a nuestra variable de estado.

Desactivar la opacidad (Canal Alfa)

A veces, no queremos que el usuario elija un color semitransparente, ya que podría arruinar el contraste de nuestra UI. La programación Swift nos permite desactivar esto fácilmente añadiendo el parámetro supportsOpacity:

ColorPicker("Color sin transparencia", 
            selection: $colorSeleccionado, 
            supportsOpacity: false)

4. El Desafío: Soporte para watchOS

Si intentas compilar el código anterior para un destino de Apple Watch en Xcode, obtendrás un error de compilación. Como mencionamos, la API nativa de ColorPicker no existe en el reloj inteligente de Apple.

Para un iOS Developer senior, esto no es un bloqueo, sino una oportunidad. Vamos a crear un color picker en SwiftUI completamente personalizado que funcione en todas las plataformas. Diseñaremos una cuadrícula de colores predefinidos de la cual el usuario podrá seleccionar uno.

5. Creando un Color Picker Personalizado (Multiplataforma)

Nuestro objetivo es crear un componente reutilizable. Utilizaremos un LazyVGrid para iOS y macOS (que tienen pantallas más grandes) y un sistema adaptativo que también luzca genial en la pequeña pantalla de un Apple Watch.

Paso 5.1: Definir la Paleta de Colores

Primero, vamos a crear un array con los colores que queremos ofrecer a nuestros usuarios.

import SwiftUI

struct ColorPalette {
    static let colors: [Color] = [
        .red, .orange, .yellow, .green, .mint,
        .teal, .cyan, .blue, .indigo, .purple,
        .pink, .brown, .gray, .black
    ]
}

Paso 5.2: Construir la Vista del Picker Personalizado

Crea un nuevo archivo de Swift llamado CustomColorPicker.swift. Aquí definiremos nuestro componente.

import SwiftUI

struct CustomColorPicker: View {
    // Binding para que la vista padre conozca el color seleccionado
    @Binding var selection: Color
    
    // Configuración del grid adaptativo
    let columns = [
        GridItem(.adaptive(minimum: 44, maximum: 60))
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 15) {
                ForEach(ColorPalette.colors, id: \.self) { color in
                    Circle()
                        .fill(color)
                        .frame(width: 44, height: 44)
                        // Añadimos un borde dinámico si el color está seleccionado
                        .overlay(
                            Circle()
                                .stroke(Color.primary, lineWidth: selection == color ? 3 : 0)
                        )
                        // Efecto de escala al seleccionar
                        .scaleEffect(selection == color ? 1.1 : 1.0)
                        .animation(.spring(), value: selection)
                        .onTapGesture {
                            // Actualizamos el estado cuando el usuario toca un color
                            selection = color
                        }
                        // Accesibilidad para VoiceOver
                        .accessibilityLabel("Color \(color.description)")
                        .accessibilityAddTraits(selection == color ? .isSelected : .isButton)
                }
            }
            .padding()
        }
    }
}

Este código es el núcleo de un buen color picker en SwiftUI. Al utilizar LazyVGrid con GridItem(.adaptive(...)), instruimos a SwiftUI para que acomode tantos círculos de color como sea posible en una fila antes de pasar a la siguiente. Esto es magia pura de Swift: el mismo código se adaptará a la pantalla gigante de un Mac y a la pantalla vertical de un iPhone.

Paso 5.3: Integración Condicional en ContentView

Ahora que tenemos ambas opciones (nativa y personalizada), vamos a integrarlas de forma inteligente. Si estamos en iOS o macOS, usaremos el nativo (o el personalizado si el usuario lo prefiere). Si estamos en watchOS, forzaremos el uso de nuestro picker personalizado.

La programación Swift nos ofrece las directivas de compilador (#if os(...)) para manejar estas diferencias de plataforma directamente en Xcode.

Vuelve a tu ContentView.swift:

import SwiftUI

struct ContentView: View {
    @State private var userColor: Color = .mint
    @State private var showCustomPicker: Bool = false
    
    var body: some View {
        NavigationView {
            VStack(spacing: 20) {
                
                // Previsualización de la interfaz
                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .fill(userColor.gradient) // Usamos el nuevo sistema de gradientes de Swift 4+
                        .frame(height: 200)
                        .shadow(color: userColor.opacity(0.5), radius: 10, x: 0, y: 5)
                    
                    Text("¡Hola, SwiftUI!")
                        .font(.largeTitle)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                }
                .padding()
                
                #if os(watchOS)
                // En watchOS, mostramos directamente nuestro picker personalizado
                CustomColorPicker(selection: $userColor)
                #else
                // En iOS y macOS, ofrecemos el selector nativo
                Form {
                    Section(header: Text("Ajustes de Tema")) {
                        ColorPicker("Selecciona un color del sistema", selection: $userColor)
                        
                        Toggle("Usar paleta personalizada", isOn: $showCustomPicker)
                    }
                }
                .cornerRadius(15)
                .padding(.horizontal)
                #endif
                
                Spacer()
            }
            .navigationTitle("Temas")
            // Presentamos la paleta personalizada como un modal en iOS/macOS
            .sheet(isPresented: $showCustomPicker) {
                NavigationView {
                    CustomColorPicker(selection: $userColor)
                        .navigationTitle("Paleta Exclusiva")
                        #if os(iOS)
                        .navigationBarTitleDisplayMode(.inline)
                        .toolbar {
                            ToolbarItem(placement: .navigationBarTrailing) {
                                Button("Cerrar") {
                                    showCustomPicker = false
                                }
                            }
                        }
                        #endif
                }
            }
        }
    }
}

6. Buenas Prácticas y Accesibilidad en tu Color Picker

Como iOS Developer, escribir código que funcione es solo la mitad del trabajo. La otra mitad es asegurarse de que el código sea mantenible, eficiente y accesible para todos los usuarios.

Accesibilidad (VoiceOver)

En el código de nuestro CustomColorPicker, añadimos modificadores de accesibilidad:

.accessibilityLabel("Color \(color.description)")
.accessibilityAddTraits(selection == color ? .isSelected : .isButton)

Esto es crucial. Si un usuario invidente utiliza VoiceOver, el sistema leerá el nombre del color en lugar de decir simplemente “botón”. Además, le informará de si ese color es el que está seleccionado actualmente. En la programación Swift, la accesibilidad es un ciudadano de primera clase, y nunca debemos olvidarla.

Rendimiento (Performance)

El uso de LazyVGrid en lugar de una combinación de VStack y HStack regulares asegura que, si en el futuro decides añadir 100 colores a tu paleta, la aplicación no consumirá toda la memoria del dispositivo. Las vistas “Lazy” (perezosas) en SwiftUI solo renderizan los elementos que están actualmente visibles en la pantalla, mejorando drásticamente el rendimiento, un detalle vital especialmente para watchOS.

7. Truco Avanzado: Extrayendo Hexadecimales en Swift

A menudo, al trabajar con un color picker en SwiftUI, el equipo de diseño o una API backend te pedirá que envíes el color seleccionado en formato hexadecimal (por ejemplo, #FF5733). El tipo Color en SwiftUI no tiene una forma directa de extraer esto por defecto en todas las versiones, pero podemos solucionarlo usando las capacidades de extensión de la programación Swift y bajando al nivel de UIColor (en iOS/watchOS) o NSColor (en macOS).

Añade esta extensión a tu proyecto de Xcode para convertir tu selección a Hex:

#if canImport(UIKit)
import UIKit
typealias PlatformColor = UIColor
#elseif canImport(AppKit)
import AppKit
typealias PlatformColor = NSColor
#endif

extension Color {
    func toHex() -> String? {
        let platformColor = PlatformColor(self)
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        
        platformColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        
        let rgb: Int = (Int)(red*255)<<16 | (Int)(green*255)<<8 | (Int)(blue*255)<<0
        
        return String(format: "#%06x", rgb)
    }
}

Ahora, podrías añadir un texto debajo de tu previsualización que muestre el código exacto:
Text("Código Hex: \(userColor.toHex() ?? "Desconocido")")

Conclusión

Integrar un color picker en SwiftUI es una excelente manera de añadir personalización a tu aplicación. Como hemos visto, el ColorPicker nativo provisto por Apple es extremadamente potente para iOS y macOS. Sin embargo, para convertirte en un iOS Developer completo, saber cómo construir tus propios controles personalizados te permite superar las limitaciones de plataformas como watchOS.

A través de la programación Swift, hemos creado una interfaz adaptativa, fluida y accesible. Has aprendido a manejar estados (@State y @Binding), a estructurar vistas en rejilla y a utilizar directivas de compilador en Xcode para compilar código diferente según el sistema operativo.