Mejorar la experiencia de usuario es una de las misiones principales de todo iOS Developer. Cuando diseñamos interfaces que requieren la introducción de texto, el teclado en pantalla puede convertirse en un obstáculo si no se gestiona correctamente. Una de las mejores formas de optimizar la UX es aprender a añadir una barra de herramientas al teclado en SwiftUI.
En este tutorial de programación Swift, aprenderás a implementar esta funcionalidad utilizando Xcode y SwiftUI, asegurando que tu código sea limpio, moderno y compatible no solo con iOS, sino también con macOS y watchOS.
¿Por qué usar una barra de herramientas en el teclado?
El espacio en pantalla es sagrado, especialmente en dispositivos móviles y wearables. Al introducir datos en un formulario, los usuarios suelen necesitar acciones rápidas como saltar al siguiente campo, ocultar el teclado o insertar caracteres especiales.
Implementar esta característica con Swift solía requerir manipular inputAccessoryView en UIKit, un proceso tedioso que añadía boilerplate a nuestro proyecto. Hoy, gracias a SwiftUI, podemos lograrlo de forma declarativa con unas pocas líneas de código.
Configurando el entorno en Xcode
Para comenzar, abre Xcode y crea un nuevo proyecto de tipo App. Asegúrate de seleccionar SwiftUI como la interfaz y Swift como el lenguaje de programación. Si quieres que tu aplicación sea multiplataforma, marca la casilla Multiplatform al crear el proyecto.
Implementación Básica en iOS
Empecemos por el caso de uso más común: una aplicación para iPhone o iPad. En iOS, la barra de herramientas se ancla directamente sobre el teclado nativo.
El modificador clave que utilizaremos es .toolbar(), combinado con el componente ToolbarItemGroup(placement: .keyboard).
Aquí tienes un ejemplo práctico y detallado:
import SwiftUI
struct KeyboardToolbarView: View {
@State private var textInput: String = ""
@FocusState private var isInputActive: Bool
var body: some View {
NavigationStack {
VStack(spacing: 20) {
Text("Formulario de Registro")
.font(.title)
.bold()
TextField("Escribe algo aquí...", text: $textInput)
.textFieldStyle(.roundedBorder)
.padding()
.focused($isInputActive) // Controla el foco del teclado
Spacer()
}
.padding()
.navigationTitle("iOS Developer Tutorial")
.toolbar {
// Definimos que la barra de herramientas pertenece al teclado
ToolbarItemGroup(placement: .keyboard) {
Spacer() // Empuja el botón hacia la derecha
Button(action: {
isInputActive = false // Cierra el teclado
}) {
Text("Hecho")
.bold()
.foregroundColor(.blue)
}
}
}
}
}
}
#Preview {
KeyboardToolbarView()
}
Análisis del código:
@FocusState: Esta propiedad es fundamental en la programación Swift moderna. Nos permite rastrear y modificar programáticamente si un elemento de la interfaz (como unTextField) tiene el foco. Al cambiarisInputActiveafalse, el teclado se descarta automáticamente.ToolbarItemGroup(placement: .keyboard): Le indica a SwiftUI que los elementos dentro de este grupo no deben ir en la barra de navegación superior, sino en la zona accesoria del teclado.
Llevando la barra de herramientas a macOS y watchOS
Uno de los mayores atractivos de ser iOS Developer hoy en día es la capacidad de crear apps universales. Sin embargo, el comportamiento del teclado varía drásticamente entre plataformas:
- macOS: No existe un teclado virtual en pantalla (a menos que se active por accesibilidad). La barra de herramientas del teclado se suele omitir o se adapta a la barra de herramientas de la ventana.
- watchOS: La introducción de texto se realiza mediante dictado, garabatos (Scribble) o un teclado diminuto en los modelos más recientes.
Para lograr un código robusto que compile sin errores en todo el ecosistema de Apple, debemos utilizar la compilación condicional.
Adaptación del código multiplataforma
A continuación, actualizaremos nuestra vista para que responda de forma nativa e inteligente en cada sistema operativo:
import SwiftUI
struct MultiplatformKeyboardView: View {
@State private var username: String = ""
@FocusState private var isFieldFocused: Bool
var body: some View {
VStack {
TextField("Usuario", text: $username)
.textFieldStyle(.roundedBorder)
.focused($isFieldFocused)
.padding()
#if os(macOS)
Text("Presiona Enter para confirmar")
.font(.caption)
.foregroundColor(.gray)
#endif
}
.toolbar {
#if os(iOS)
// Barra específica para el teclado táctil de iOS
ToolbarItemGroup(placement: .keyboard) {
Button("Limpiar") {
username = ""
}
Spacer()
Button("Listo") {
isFieldFocused = false
}
}
#elseif os(watchOS)
// En watchOS, colocamos una acción en la barra de herramientas principal de la vista de entrada
ToolbarItem(placement: .primaryAction) {
Button("OK") {
isFieldFocused = false
}
}
#typealias
#endif
}
}
}
Comportamiento por plataforma en Xcode:
- En iOS: El usuario verá los botones “Limpiar” y “Listo” justo encima del teclado.
- En watchOS: Al invocar la entrada de texto, el botón contextual se integrará en la interfaz de entrada del Apple Watch, facilitando la validación del texto.
- En macOS: El modificador
.keyboardno surtirá efecto visual perjudicial, evitando que la aplicación se rompa y manteniendo la consistencia del flujo de trabajo.
Buenas prácticas de UX al añadir una barra de herramientas al teclado en SwiftUI
Modificar el teclado puede ser un arma de doble filo si no se siguen ciertas pautas de diseño:
- Mantén la simplicidad: No satures la barra accesoria con demasiados botones. Un máximo de dos o tres acciones (como Anterior, Siguiente y Hecho) es lo ideal.
- Usa iconos reconocibles: En lugar de texto plano, puedes utilizar
Image(systemName:)con SF Symbols (por ejemplo,chevron.upychevron.downpara navegar entre campos). - Gestiona el tipo de teclado: Asegúrate de combinar tu barra de herramientas con el tipo de teclado adecuado usando
.keyboardType(.numberPad)o.keyboardType(.emailAddress)según corresponda.
Ejemplo Avanzado: Navegación entre múltiples campos
En aplicaciones reales, rara vez tenemos un solo campo de texto. Vamos a crear un formulario complejo donde la barra de herramientas permita al usuario saltar de un campo a otro de forma fluida.
import SwiftUI
enum FormField {
case name, email, phone
}
struct AdvancedFormView: View {
@State private var name = ""
@State private var email = ""
@State private var phone = ""
@FocusState private var focusedField: FormField?
var body: some View {
Form {
Section(header: Text("Datos Personales")) {
TextField("Nombre", text: $name)
.focused($focusedField, equals: .name)
.submitLabel(.next)
TextField("Correo Electrónico", text: $email)
.focused($focusedField, equals: .email)
.keyboardType(.emailAddress)
.submitLabel(.next)
TextField("Teléfono", text: $phone)
.focused($focusedField, equals: .phone)
.keyboardType(.phonePad)
.submitLabel(.done)
}
}
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
// Botones de navegación
HStack {
Button(action: goToPreviousField) {
Image(systemName: "chevron.up")
}
.disabled(focusedField == .name)
Button(action: goToNextField) {
Image(systemName: "chevron.down")
}
.disabled(focusedField == .phone)
Spacer()
Button("Ocultar") {
focusedField = nil
}
}
}
}
}
private func goToPreviousField() {
switch focusedField {
case .email: focusedField = .name
case .phone: focusedField = .email
default: break
}
}
private func goToNextField() {
switch focusedField {
case .name: focusedField = .email
case .email: focusedField = .phone
default: break
}
}
}
Este patrón eleva exponencialmente la calidad de tu software, demostrando un dominio sólido de la programación Swift aplicada a la accesibilidad y usabilidad.
Conclusión
Añadir una barra de herramientas al teclado en SwiftUI es un proceso intuitivo gracias al diseño declarativo del framework de Apple. Como hemos visto, dominar herramientas como @FocusState y ToolbarItemGroup te permite, como iOS Developer, construir interfaces altamente interactivas y eficientes en Xcode.
