Cómo añadir idiomas en tus app con SwiftUI
Aprende a traducir tus app en SwiftUI en Español

Añade traducciones a tus apps con SwiftUI - Localización y LocalizedStringKey en Español

Añadir traducciones en tu app en SwiftUI es muy sencillo. La localización en SwiftUI es necesaria para poder dar una mejor experiencia de usuario añadiendo idiomas de varias regiones. Si quieres soportar distintos idiomas en tu app en SwiftUI no puedes perderte este post.

SwiftBeta
Aprende a añadir idiomas a tus apps en SwiftUI

Hoy en SwiftBeta vamos a aprender a como añadir diferentes traducciones a nuestra app. En concreto, nuestra app soportará Inglés y Español y añadir un nuevo idioma será el mismo proceso.
En muchas ocasiones tener traducciones de varios lenguajes es un tema trivial, el problema viene cuando queremos usar el sistema local del device y mostrar la divisa correcta o el formato de fecha correcto dependiendo de la region. Pero hoy nos centraremos solo en cómo añadir diferentes traducciones a nuestra app.

Para poder usar diferentes lenguajes en nuestra app, hay vistas en SwiftUI que tienen un inicilizador que acepta un parámetro de tipo LocalizedStringKey, esta key escogerá la traducción de un idioma o otro dependiendo de en qué idioma esté el device. Lo hará todo automáticamente. Nosotros solo deberemos usar estas keys en todas las vistas y generar varios ficheros con las traducciones. Vamos a verlo todo más claro.

Añadir vista en SwiftUI

Lo primero de todo que vamos hacer es crear un proyecto de cero en Xcode. Y vamos a crear la siguiente vista con un TabView y un Form en SwiftUI. Hemos creado este código de ejemplo, que es bastante simple para simplificar el video.

La vista será la siguiente:

import SwiftUI

struct ContentView: View {
    @State var textFieldName: String = ""
    @State var textFieldPhone: String = ""
    
    var body: some View {
        TabView {
            Form {
                Section {
                    TextField("Name", text: $textFieldName)
                    TextField("User's Phone", text: $textFieldPhone)
                        .keyboardType(.namePhonePad)
                    HStack {
                        Spacer()
                        Button("Accept") {
                            print("Save information...")
                        }
                        .buttonStyle(.bordered)
                        .tint(.blue)
                    }
                } header: {
                    Text("Contact form")
                } footer: {
                    Text("* All the information will be kept confidential.")
                }
            }
            .tabItem {
                Label("Home", systemImage: "house.fill")
            }
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person.crop.circle.fill")
                }
        }
    }
}
View en SwiftUI que soportará dos idiomas

Al tener esta vista, vemos que ya tenemos un idioma por defecto que es el Inglés. Lo hemos añadido en cada vista. Pero, ¿qué pasaría si quisieramos añadir más idiomas? ¿cuál es el proceso a seguir?

Creamos fichero Strings File en Xcode

Para hacerlo vamos a crear un nuevo fichero. Pulsamos CMD + N y seleccionamos el fichero de tipo Strings File y le ponemos el nombre de Localizable

Seleccionamos el nuevo tipo de fichero en Xcode que es "Strings File"
Seleccionamos el nuevo tipo de fichero que es "Strings File"

En este fichero, que está completamente vacío, creamos todas nuestras keys y su correspondiente traducción al Inglés (estás keys luego las usaremos en nuestras vistas). Vamos a añadir nuestra primera key, la vamos a llamar form-name-key y va a tener el valor de Name

"form-name-key" = "Name";
Creamos nuestra primera key en nuestro fichero de traducciones

Fácil ¿verdad? ahora nos vamos a la vista ContentView y donde teníamos el texto Name vamos a poner la nueva key "form-name-key". Es decir, pasamos de:

TextField("Name", text: $textFieldName)
Valor de un TextField con el idioma en concreto

a esto:

TextField("form-name-key", text: $textFieldName)
Valor de un TextField con LocalizedStringKey

Si compilamos la app, vemos que no estamos viendo el texto form-name-key en el placeholder del TextField, lo que estamos viendo es el texto Name. Eso es por que al ejecutar nuestra app, la vista TextField ha visto que teníamos un LocalizedStringKey con esa key y ha cogido su traducción directamente.

Muchas vistas aceptan como parámetro LocalizedStringKey es por eso que ha sido bastante transparente para nosotros todo este proceso.

Interpolación en traducciones

Antes de añadir otro idioma, vamos a ver lo que hemos visto hasta ahora. Hemos añadido una traducción que es estática en nuestra vista. Pero estas traducciones pueden ser dinámicas, es decir, pueden aceptar parámetros como texto, números, fechas, etc.

En el siguiente ejemplo, vamos a ver como la key de nuestro fichero de traducciones puede aceptar un parámetro (o varios). Vamos a crear la traducción para el siguiente campo del formulario y vamos a pasar de esto:

TextField("User's Phone", text: $textFieldPhone)
Valor de un TextField con el placeholder en un idioma en concreto

a:

TextField("form-phone-user \(textFieldName)", text: $textFieldPhone)
Valor de un TextField con LocalizedStringKey que acepta un parámetro

Fíjate que hemos añadido una nueva key (que ahora añadiremos al fichero de traducciones) y hemos pasado el nombre del user introducido en el primer campo.

El siguiente paso es añadir esta key con su traducción en el fichero Localizable:

"form-name-key" = "Name";
"form-phone-user %@" = "User Phone %@ Mobile";
Añadimos la nueva key al fichero de traducciones

En la nueva traducción hemos añadido la key y el símbolo %@ para especificar que se recibirá un parámetro dinámico. Y en la traducción podemos poner ese parámetro en el lugar que queramos, en mi caso lo he puesto en medio de la traducción "User Phone %@ Mobile"

Si vamos al live preview del Canvas y escribimos el nombre en el primer campo, vemos como el placeholder del segundo muestra la traducción dinámica que acabamos de añadir.

Quería mostraros que las traducciones pueden recibir parámetros dinámicos y no siempre son estáticos.

Ahora lo que vamos hacer es añadir el idioma Español.

Añadimos el idioma Español

Para añadir un nuevo idioma, en este caso el español, primero nos vamos al fichero Localizable que hemos creado y desplegamos el inspector de atributos.

Xcode mostrando el fichero Localizable que acabamos de crear
Xcode mostrando el fichero Localizable que acabamos de crear

Allí vemos que hay un botón que pone Localize, si lo pulsamos vemos que aparecerá English seleccionado.

En nuestro fichero de traducciones, abrimos el inspector de atributos de Xcode y pulsamos el button que aparece en la sección Localizations
En nuestro fichero de traducciones, abrimos el inspector de atributos de Xcode y pulsamos el button que aparece en la sección Localizations

A continuación, lo que debemos hacer es irnos al proyecto en Xcode y en la pestaña Info vemos la siguiente información, debemos prestar especial atención a la última sección Localizations.

A continuación, vamos a nuestro Proyecto y observamos que hay una sección llamada Localizations
A continuación, vamos a nuestro Proyecto y observamos que hay una sección llamada Localizations

En esta sección aparece un único idioma, el Inglés. Si quisieramos añadir un nuevo idioma,  pulsamos al + y nos aparecerá un desplegable para que seleccionemos el nuevo idioma que queremos soportar en nuestra app.

En la sección Localizations añadimos el nuevo idioma, en nuestro caso será Español
En la sección Localizations añadimos el nuevo idioma, en nuestro caso será Español

Seleccionamos Spanish y vemos como aparece la siguiente pantalla:

Una vez añadido nos aparece una ventana, le damos a Finish para añadir el idioma que hemos seleccionado en el paso previo
Una vez añadido nos aparece una ventana, le damos a Finish para añadir el idioma que hemos seleccionado en el paso previo

En este paso Xcode nos está preguntando si queremos usar este fichero para crear nuestras traducciones de Español, en nuestro caso dejamos la única opción que aparece marcada y le damos a Finish.

Ahora nuestro fichero de Localizable aparece con una flecha:

Al añadir más de un idioma vemos que en nuestro listado de ficheros en Xcode aparece una flechita al lado de nuestro fichero de traducciones
Al añadir más de un idioma vemos que en nuestro listado de ficheros en Xcode aparece una flechita al lado de nuestro fichero de traducciones

Si la desplegamos nos aparecen dos ficheros distintos, uno donde alojaremos las keys para la traducción en Inglés y otro fichero donde alojaremos las mismas keys pero con la traducción en Español.

Si expandimos la flechita que aparece al lado de nuestro fichero de traducciones vemos como aparecen los dos idiomas (Inglés y Español)
Si expandimos la flechita que aparece al lado de nuestro fichero de traducciones vemos como aparecen los dos idiomas (Inglés y Español)

Ahora, nos vamos al fichero de traducciones de Español y vemos que tenemos las mismas keys que teníamos en el fichero en Inglés, lo único que tenemos que hacer es crear sus traducciones, vamos a ello:

"form-name-key" = "Nombre";
"form-phone-user %@" = "Teléfono del User %@";
Añadimos la nuevo key que acepta un parámetro en nuestro fichero de traducciones
Un pequeño detalle es que ahora el nombre del user lo he puesto al final de la traducción.

Si ahora compilamos la app ¿qué pasa? en mi caso se muestra la traducción en Inglés, ya que el device está en Inglés, vamos a cambiar su idioma en ajustes del sistema. Para hacerlo nos vamos al simulador y abrimos la app de Settings:

Settings -> General -> Language & Region

Una vez estamos aquí dentro debemos ver algo parecido a lo que os muestro en la siguiente imagen:

Cómo cambiar el idioma del device en el simulador de Xcode
Cómo cambiar el idioma del device en el simulador de Xcode

Vamos a poner que el Preferred Language Order sea Español en lugar de English. Al hacerlo nos aparecerá una pantalla indicando que se están aplicando los cambios, y después de unos segundos volvemos a nuestra app. Una vez dentro vemos como la traducción a Español ha funcionado 👏.

Probamos que al añadir texto en el primer campo se ve el cambio en la traducción del segundo TextField
Probamos que al añadir texto en el primer campo se ve el cambio en la traducción del segundo TextField

Lo que hemos visto hasta aquí ha sido a que nuestra app soporte 2 idiomas distintos. Vamos a añadir más keys para cubrir toda esta pantalla:

  • Creamos keys y su traducción para las TabBar
  • Creamos keys y su traducción para el Form: Header, Footer y Texto del Button

La vista con las nuevas keys nos quedaría de la siguiente manera:

import SwiftUI

struct ContentView: View {
    @State var textFieldName: String = ""
    @State var textFieldPhone: String = ""
    
    var body: some View {
        TabView {
            Form {
                Section {
                    TextField("form-name-key", text: $textFieldName)
                    TextField("form-phone-user \(textFieldName)", text: $textFieldPhone)
                        .keyboardType(.namePhonePad)
                    HStack {
                        Spacer()
                        Button("form-button-key") {
                            print("Save information...")
                        }
                        .buttonStyle(.bordered)
                        .tint(.blue)
                    }
                } header: {
                    Text("form-header-key")
                } footer: {
                    Text("form-footer-key")
                }
            }
            .tabItem {
                Label("tabview-home-key", systemImage: "house.fill")
            }
            Text("tabview-profile-key")
                .tabItem {
                    Label("tabview-profile-key", systemImage: "person.crop.circle.fill")
                }
        }
    }
}
Añadimos todas las keys de LocalizedStringKey que faltan en la vista

El fichero de traducción en Inglés sería:

"form-name-key" = "Name";
"form-phone-user %@" = "User Phone %@ Mobile";
"form-header-key" = "Contact form";
"form-footer-key" = "* All the information will be kept confidential.";
"form-button-key" = "Accept";

"tabview-home-key" = "Home";
"tabview-profile-key" = "Profile";
Añadimos las nuevas keys en el fichero de traducciones de Inglés

y el fichero de traducciones en Español quedaría:

"form-name-key" = "Nombre";
"form-phone-user %@" = "Teléfono del User %@";
"form-header-key" = "Formulario de Contacto";
"form-footer-key" = "* Toda la información será confidencial.";
"form-button-key" = "Aceptar";

"tabview-home-key" = "Inicio";
"tabview-profile-key" = "Perfil";
Añadimos las nuevas keys en el fichero de traducciones de Español

Si ahora compilamos la app, y cambiamos de un idioma a otro vemos que nuestra app soporta dos idiomas ✌️.

Ahora te toca añadir otro idioma, si tienes alguna pregunta no dudes en añadirlo en el comentario del video.

Conclusión

Hoy hemos aprendido a cómo soportar diferentes idiomas en nuestras apps. Es algo realmente útil ya que cuando lanzamos nuestra app en el AppStore normalmente las abrimos en todos los países. Al añadir diferentes idiomas a nuestra app hacemos que los users tengan una mejor experiencia.

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI Intermedio