Botones en SwiftUI: Segunda Parte – Técnicas Intermedias

¿Qué aprenderás en este tutorial?

• Responder a gestos avanzados
• Animar botones al interactuar
• Crear botones con estados personalizados (toggle, loading)
• Personalizar botones con imágenes propias
• Accesibilidad en botones
• Componer botones reutilizables

1. Respondiendo a Gestos Avanzados

¿Sabías que los botones no solo responden a un simple toque? Puedes detectar gestos como un doble toque para ofrecer más opciones al usuario.

Doble toque (Double Tap)

Aunque no existe un modificador directo para doble toque en Button, puedes envolver el botón en un onTapGesture(count:):

SWIFT
  Button("Doble Toca Aquí") {
      print("¡Toque detectado!")
  }
  .padding()
  .background(Color.orange)
  .cornerRadius(10)
  .onTapGesture(count: 2) {
      print("¡Doble toque detectado!")
  }

Botón que responde a doble toque

2. Animando Botones

Las animaciones hacen que tu app se sienta viva y moderna. Puedes animar cambios de color, escala o rotación cuando el usuario interactúa con un botón.

Animación de escala al pulsar

SWIFT
struct AnimatedButton: View {
    @State private var pressed = false

    var body: some View {
        Button("¡Anímame!") {
            // Acción normal
        }
        .scaleEffect(pressed ? 1.2 : 1.0)
        .animation(.spring(), value: pressed)
        .onLongPressGesture(minimumDuration: 0.1, pressing: { inProgress in
            pressed = inProgress
        }, perform: {})
    }
}

Botón creciendo al pulsar

3. Botones con Estado Personalizado

A veces, un botón necesita mostrar un estado, como "activo/inactivo" o "cargando".

Botón tipo Toggle

SWIFT
struct ToggleButton: View {
    @State private var isOn = false

    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Text(isOn ? "Activo" : "Inactivo")
                .foregroundColor(.white)
                .padding()
                .background(isOn ? Color.green : Color.gray)
                .cornerRadius(10)
        }
    }
}

Botón toggle cambiando de color y texto

Botón con estado de carga (Loading)

SWIFT
struct LoadingButton: View {
    @State private var isLoading = false

    var body: some View {
        Button(action: {
            isLoading = true
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                isLoading = false
            }
        }) {
            HStack {
                if isLoading {
                    ProgressView()
                }
                Text(isLoading ? "Cargando..." : "Enviar")
            }
            .padding()
            .background(isLoading ? Color.gray : Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .disabled(isLoading)
    }
}

Botón mostrando spinner de carga

4. Botones con Imágenes Personalizadas

No tienes que limitarte a los SF Symbols. Puedes usar tus propias imágenes en los botones.

SWIFT
Button(action: {
    print("¡Botón con imagen personalizada!")
}) {
    HStack {
        Image("tu_imagen") // Asegúrate de añadir la imagen a tus Assets
            .resizable()
            .frame(width: 24, height: 24)
        Text("Botón Personalizado")
    }
    .padding()
    .background(Color.secondary)
    .foregroundColor(.white)
    .cornerRadius(10)
}

Botón con imagen personalizada y texto

5. Accesibilidad en Botones

Haz que tus apps sean accesibles para todos. Puedes añadir descripciones de accesibilidad a tus botones:

SWIFT
Button("Comprar") {
    print("Compra realizada")
}
.accessibilityLabel("Comprar producto")
.accessibilityHint("Realiza la compra del producto seleccionado")

Captura del inspector de accesibilidad en Xcode

6. Botones Reutilizables con Componentes

Evita repetir código creando tu propio componente de botón reutilizable.

SWIFT
struct CustomButton: View {
    let title: String
    let color: Color
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
                .fontWeight(.bold)
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(color)
                .cornerRadius(12)
        }
    }
}

// Uso:
CustomButton(title: "Aceptar", color: .blue) {
    print("¡Aceptado!")
}

Varios botones reutilizables con diferentes colores y textos

Ejercicio Práctico: Selector de Reacciones

Crea un grupo de botones que permitan al usuario seleccionar una reacción (👍, ❤️, 😂, 😮). El botón seleccionado debe resaltarse.

SWIFT
struct ReactionSelector: View {
    @State private var selected: String? = nil
    let reactions = ["👍", "❤️", "😂", "😮"]

    var body: some View {
        HStack(spacing: 20) {
            ForEach(reactions, id: \.self) { reaction in
                Button(action: {
                    selected = reaction
                }) {
                    Text(reaction)
                        .font(.largeTitle)
                        .padding()
                        .background(selected == reaction ? Color.yellow : Color.gray.opacity(0.2))
                        .clipShape(Circle())
                }
            }
        }
    }
}

Selector de reacciones con una reacción resaltada

Conclusión

¡Ahora tienes un arsenal de técnicas intermedias para crear botones más potentes y atractivos en SwiftUI! Recuerda experimentar y combinar estas ideas para crear experiencias únicas en tus apps.

¿Qué sigue?

En la próxima entrega, exploraremos técnicas avanzadas como:

• Botones animados complejos
• Integración con gestos personalizados
• Botones contextuales y menús
• Botones flotantes (FAB)
• Acciones asincrónicas y feedback háptico

¿Tienes alguna idea o pregunta? ¡Déjala en los comentarios y la incluiremos en futuros tutoriales!

Ejercicios para practicar

• Crea un botón que muestre una animación de confeti al pulsarlo.
• Haz un botón que cambie de icono y color cada vez que lo pulses.
• Implementa un grupo de botones donde solo uno pueda estar activo a la vez (como un selector de opciones).
• Añade accesibilidad a todos los botones de tu app.

¡Nos vemos en el próximo tutorial y sigue creando apps increíbles con SwiftUI!