SwiftUI continúa mejorando la forma en que los desarrolladores crean aplicaciones nativas para los dispositivos Apple. Con iOS 27.2, Apple introduce toolbarTitleAlignment, un nuevo modificador de vista que ofrece a los desarrolladores un mayor control sobre la posición de los títulos de la barra de navegación.
En este tutorial, veremos cómo utilizar toolbarTitleAlignment, conoceremos las opciones de alineación disponibles e implementaremos ejemplos prácticos utilizando Swift, SwiftUI y Xcode 27.
Tanto si eres un iOS Developer experimentado como si estás empezando en el ecosistema de desarrollo de Apple, este nuevo modificador facilita la personalización de las barras de navegación.
¿Qué es toolbarTitleAlignment en SwiftUI?
El modificador toolbarTitleAlignment(_:) permite especificar la alineación preferida del título de una barra de navegación.
Anteriormente, los desarrolladores tenían que recurrir en muchas ocasiones a elementos personalizados de la barra de herramientas, especialmente a ToolbarItem(placement: .principal), para conseguir una posición específica del título. Aunque este método sigue siendo útil para personalizar el contenido de la barra de navegación, el nuevo modificador ofrece una solución mucho más sencilla cuando únicamente queremos controlar la alineación del título.
Esta API está diseñada para trabajar con los contenedores de navegación de SwiftUI, como NavigationStack, y se integra con la configuración existente de los títulos de navegación.
Su principal ventaja es la simplicidad: puedes cambiar la alineación del título directamente mediante un modificador específico, sin necesidad de crear componentes adicionales para la barra de herramientas.
Requisitos: iOS 27.2 y Xcode 27
Para utilizar toolbarTitleAlignment, necesitarás:
- Xcode 27 con el SDK correspondiente de iOS 27.2.
- Una aplicación compatible con iOS 27.2 o posterior para utilizar la API sin comprobaciones de disponibilidad.
- Un proyecto de SwiftUI que utilice un contenedor de navegación como
NavigationStack.
El nuevo modificador está disponible a partir de iOS 27.2, por lo que las aplicaciones que también sean compatibles con versiones anteriores deberán considerar el uso de comprobaciones de disponibilidad o implementaciones alternativas.
Cómo utilizar toolbarTitleAlignment
Vamos a comenzar con un ejemplo básico.
Primero, creamos un NavigationStack y configuramos el título de navegación. A continuación, aplicamos el nuevo modificador a la vista.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Welcome to my app")
.navigationTitle("My Title")
.toolbarTitleDisplayMode(.inline)
.toolbarTitleAlignment(.center)
}
}
}
En este ejemplo, la barra de navegación muestra el título “My Title” centrado.
La línea más importante es:
.toolbarTitleAlignment(.center)
Esta instrucción indica a SwiftUI que debe utilizar una alineación centrada para el título de navegación.
Observa que también utilizamos .toolbarTitleDisplayMode(.inline). Este modificador controla cómo se muestra el título de navegación, mientras que toolbarTitleAlignment controla su alineación preferida. Son dos funcionalidades diferentes que pueden combinarse.
Opciones disponibles de toolbarTitleAlignment
La nueva API proporciona tres opciones de alineación que permiten adaptar la barra de navegación al diseño de tu aplicación.
1. Alineación centrada
.toolbarTitleAlignment(.center)
La opción .center coloca el título de navegación en el centro de la barra.
Resulta especialmente útil para aplicaciones que utilizan títulos centrados tradicionales o que buscan una interfaz visualmente equilibrada.
2. Alineación a la izquierda
.toolbarTitleAlignment(.leading)
La opción .leading coloca el título hacia el extremo inicial de la barra de navegación.
En idiomas que se escriben de izquierda a derecha, esto generalmente significa alinear el título a la izquierda. En idiomas que se escriben de derecha a izquierda, el extremo inicial se adapta a la dirección de escritura del sistema.
Esta opción resulta interesante para aplicaciones que prefieren un diseño de navegación más editorial o centrado en el contenido.
3. Alineación automática
.toolbarTitleAlignment(.automatic)
La opción .automatic permite que el sistema determine la alineación preferida del título según el contexto de navegación y la configuración de la barra de herramientas.
Es la opción predeterminada cuando queremos mantener el comportamiento de navegación estándar de la plataforma.
Ejemplo completo con el título alineado a la izquierda
Veamos otra implementación práctica que utiliza un título alineado al inicio y un botón en la barra de navegación.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
VStack(spacing: 20) {
Text("Explore the latest features")
.font(.title2)
Text("Customize your navigation experience.")
.foregroundStyle(.secondary)
}
.padding()
.navigationTitle("Discover")
.toolbarTitleDisplayMode(.inline)
.toolbarTitleAlignment(.leading)
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button("Edit") {
print("Edit tapped")
}
}
}
}
}
}
Este ejemplo crea una barra de navegación con el título alineado a la izquierda y un botón Edit en el extremo derecho.
¿Es mejor toolbarTitleAlignment que ToolbarItem principal?
Para controlar simplemente la alineación del título, toolbarTitleAlignment es la alternativa más sencilla.
Seguir utilizando ToolbarItem(placement: .principal) resulta interesante cuando necesitamos sustituir el título estándar por contenido personalizado, como un logotipo, un campo de búsqueda o una vista más compleja.
El nuevo modificador se centra específicamente en la alineación, permitiendo mantener un código de navegación más limpio y fácil de mantener.
Conclusión
La incorporación de toolbarTitleAlignment en iOS 27.2 supone una mejora interesante para los desarrolladores de SwiftUI. Proporciona una forma nativa y cómoda de controlar la posición de los títulos de navegación mediante .automatic, .center y .leading.
Para cualquier iOS Developer que trabaje con Swift, Xcode 27 y aplicaciones modernas de SwiftUI, esta pequeña incorporación a la API ofrece una herramienta adicional para crear experiencias de navegación más cuidadas, coherentes y con menos código.
