Aplicación Multilenguaje en Xamarin.Forms

Hola a todos, desde hace tiempo quería mostrarles esta manera de traducir sus textos y les platicaré cuando hacerlo, sus ventajas y desventas, 

Bueno les comento rápidamente, hace tiempo en la empresa donde trabajo se necesitaba una App con los lenguajes de Inglés / Español y desgraciadamente usar un plugin para cambiar el texto no funcionaba ya que una gran parte de las palabras eran definiciones del sector energético/petrolero que en español tenían un significado y en inglés otro.

Así que de antemano les digo que es una alternativa más a las que existen hoy en día y espero que a alguien les sea de utilidad así que veamos cuando implementarlo y cuando no.

Si hacerlo cuando y sus ventajas

• Queremos traducir un texto especifico/personalizado para cada idioma
• Cuando las definiciones podrían
• Cuando no queremos descargar NuGet’s de traducción

No hacerlo cuando

• Cuando son muchas vistas las que se afectarán
• Cuando conocemos mejores alternativas
• Cuando son muchos idiomas

Ahora si comencemos con el post… si es el primer blog que lees, anteriormente se realizó un tutorial de Hamburger Menú, y este ejemplo lo haremos con esta práctica.

Este es el resultado que esperamos al finalizar este post:

Funcionando en iOS

Funcionando en Android

Bueno si ya tenemos descargado el proyecto podemos comenzar añadiendo un ContentPage y la llamamos PrincipalLogin, que será donde nos aparecerá la opción donde decidiremos el lenguaje que queremos.

En la clase App.xaml.cs no olvidemos que será una NavigationPage ya que sin esto no nos permitirá navegar entre paginas y también definir la página de inicio del proyecto

Y modificaremos este código que nos aparece por default

Agregaremos el siguiente código que básicamente son dos botones con las opciones que necesitamos, para este caso Inglés, Español

En el Code behind agregamos el código de los botones,

Declaramos  numIdioma que será quien controlará el idioma que necesitamos

Si hacemos Clic en btnEn será idioma Inglés o si hacemos clic en btnEs  será Español, Si hacemos clic en alguno de esos dos botones

• numIdioma cambiará su valor
• Guardará el valor en el teléfono para que se quede guardado el idioma incluso si el usuario cierra la app
• Navega dentro de la aplicación

Una vez hecho estos pasos agregamos una clase llamada MultiLanguajeClassMultiLanguajeClass, dentro del proyecto compartido

Esta clase servirá como controlador de lenguaje aunque básicamente sólo contendrá un método.

Ahora le comento como funciona esta clase…

1. Se creó una variable que se llama IdiomaLo con valor 0
2.  en el constructor de esta clase se tiene como parametro num
3. dentro del constructor revisamos la variable de sesión que se guardó en un principio con los botones y asignamos a IdiomaLo el valor de esta variable
4. cuando se manda a llamar a el método Languaje(), usamos a IdiomaLo para ver que idioma será, y tendremos una cadena string con todo el vocabulario de la aplicación separando las palabras necesarias por una coma (,)
5. Por último retornamos el vocabulario del idioma correspondiente

Dentro del HamburgerMenu.cs

1. Se agrega una variable llamada idiom
2. una cadena llamada idiomassss (No sabía como ponerle)
3. Instanciamos la clase MultiLanguajeClass en la variable idi
4. un Char que será el delimitador (Lo que separa nuestro vocabulario en el paso anterior)
5. un arreglo no definido hasta este punto

Dentro del metodo MyMenu

1. la variable idiomassss le pasamos lo que retorna el método Languaje de la clase MultilanguajeClass
2. Establecemos el Chardelimiter como coma (,)
3. Por último agregamos todas las palabras dentro de el arreglo de String’s Lang
4. En la propiedad Menutitle establecemos a Lang(el arregle de palabras) en la posición que deseamos

Así que como lo acomodamos en la clase será la posición que tendrá en el arreglo

Nota: No olvidar que un arreglo comienza en 0 y aumenta en uno

[0,1,2,3…n]

Así que al dar clic en cualquier botón del inicio y depuramos la solución podemos ver que val contiene el número 2 que se refiere al idioma Español y lo compara dentro del método.

en la ContentPage de Feed.xaml, remplazaremos el contenido actual por el siguiente código que es solamente un control de imagen que nos indicará el lenguaje actual

<ContentPage.Content>
<Image x:Name=»idiImage»/>
</ContentPage.Content>

Seguido de modificar el Xaml de Feed, escribimos el método OnAppearin que es para cada vez que aparece la pantalla Feed se ejecute su contenido.

Dentro del mismo método se valida la variable del lenguaje y hacemos una pequeña validación y decimos que si IdiomaLo == 1 mostrar el logo de la bandera de USA que representa el idioma inglés, Si IdiomaLo es 2 mostrar el logo de la bandera de España que representa el idioma Español.

Y con este bloque de código terminaríamos el proyecto y listo para ejecutar el proyecto en dispositivos, emuladores o simuladores

Resultado Final en las plataformas iOS y Android

 

Ejemplo de como implementar la funcionalidad de Multilenguaje de la manera que hoy lo hicimos.

Esta fue la Aplicación que les comenté en un principio acerca de la aplicación multilenguaje que se

Con esto terminamos este pequeño blog, espero que te haya sido de utilidad y sobretodo ¡espero que hayas aprendido algo nuevo este día!

Visita el código del proyecto en GitHub

Luis David De La Cruz Bautista