Xamarin.Forms incluyó en la versión 3.1.0 la propiedad ReturnType para el control Entry, la cual nos resulta realmente útil.
Esta propiedad nos sirve para definir el tipo de botón que nos aparecerá en el teclado del móvil cuando tengamos el foco en un Entry. Dispone de las siguientes posibilidades:
Así, si por ejemplo aplicamos la opción Search a un Entry, el resultado será el siguiente en iOS y en Android respectivamente:
Aunque nos ha encantado que hayan incluido esta opción, en nuestros desarrollos hemos echado en falta dos cosas más:
- En primer lugar, cuando estamos en un formulario, que el foco cambie automáticamente al siguiente Entry cuando se pulsa el botón de Siguiente en el teclado.
- Y, por otra, que si además dicho Entry es el último del formulario (en cuyo caso el botón tendría ReturnType=”Done”) se pueda ejecutar el comando de guardado del formulario cuando se pulse el botón del teclado.
Hoy vamos a ver cómo añadir esta funcionalidad a un Entry desarrollando un control personalizado con sus correspondientes Renderers de iOS y Android.
Comenzaremos creando nuestro CustomControl y añadiéndole una BindableProperty llamada NextEntryName, el cuál utilizaremos para indicar cuál el siguiente Entry al que debe desplazar el foco cuando el usuario pulse el botón Siguiente del teclado:
Además, crearemos un evento, con un método para poder invocarlo posteriormente desde los renderers de iOS y Android, así como la implementación del evento:
En la implementación, comprueba el tipo de botón que tiene el Entry. Si éste es de tipo ReturnType.Done, entonces ejecutará el comando del Entry ReturnCommand. Esto no lo necesitamos para iOS, ya que el comando se ejecuta en cuanto el evento Completed se alcanza. Sin embargo, en Android no ocurre lo mismo, así que tendremos que añadir estas líneas:
Si es de tipo ReturnType.Next, entonces pondrá el foco en el siguiente Entry obteniendo éste a través de nuestra propiedad NextEntryName.
Con esto, tenemos listo nuestro control.
Desarrollemos ahora el Renderer para iOS. Aquí simplemente necesitamos suscribirnos al evento ShouldReturn que es invocado cuando el usuario pulsa el botón en el teclado.
En Renderer de Android consiste en exactamente lo mismo:
Finalmente, sólo queda utilizarlo en nuestra vista:
Con x:Name asignamos un nombre a nuestro Entry, el cuál será asignado a la propiedad NextEntryName del anterior Entry. Con ese name, nuestro control podrá localizarlo y realizar el foco en él. Para finalizar, al último Entry le asignaremos el comando a ejecutar en la propiedad ReturnCommand.
Con esto ya tendremos nuestro control listo para utilizarlo en nuestros desarrollos.
