Crear un Material Outlined Text Field con Xamarin.Forms
If you prefer to read this article in English, please follow this link
Hace algún tiempo, el equipo de Xamarin lanzó oficialmente Material Visual, una característica que nos permite cambiar los controles de la UI de nuestra aplicación con el fin de seguir las reglas de diseño de Material propuestas por Google.
Esta es una característica increíble, como se puede comprobar en los documentos oficiales y algunos otros posts relacionados con el tema. Los mismos están construidos de forma nativa en cada plataforma y tienen un gran rendimiento, pero… (siempre hay un pero), sólo añaden los elementos estándar de la UI de Material, dejando de lado algunos otros elementos, como el outlined text field.
Por esa razón, hoy vamos a crear un Material outlined text field completamente en Xamarin.Forms !!!
Como dije anteriormente, la función Material Visual creada por Xamarin es completamente nativa, por esa razón tiene mejor rendimiento. En nuestro caso, vamos a tener que sacrificar un poco de rendimiento (casi imperceptible para el ojo inexperto) para poder escribir este control, practicamente, sin tener que lidiar con código nativo en cada plataforma.
Antes de comenzar, hagamos una lista de lo que debería tener nuestro control:
- Bordes redondeados
- Los bordes deben cambiar de color
- Animación de placeholder
- Contador de caracteres
- Iconos al comienzo y al final
- Iconos interactivos para contraseñas
- Textos de ayuda y de error
- Icono de error
Para ver con qué estamos lidiando, simplemente creamos nuestra aplicación con una eEntry común y corriente y uno del tipo material.
Vamos a enfocarnos en el Entry común:
- En UWP tiene un marco del que tendremos que deshacernos.
- iOS a su vez tiene un marco que debe ser eliminado.
- En Android tendremos que eliminar ese subrayado molesto.
Así que vamos a crear algunos efectos para ello:
¡Muy bien! Ahora necesitaremos hacer de nuestro outlined text field una solución reutilizable, por lo que debemos crear un componente de ella.
Para ello utilizaremos:
- Un Grid que contenga todo el contenido y especialmente por su propiedad de superposición de controles, que nos ayudará con la animación del placeholder.
- Un Frame para envolver el entry con bordes redondeados y de colores.
- Los otras Labels para los textos de ayuda, contador y error.
- Imágenes para los iconos.
¡Creemos nuestro componente reutilizable!
Y ahora, en nuestro code behind, definiremos las bindable properties, los event handlers, las animaciones y los métodos.
Vamos a probarlo
Simplemente añadiremos el nuevo componente en una página de Xamarin.Forms para ver los resultados:
Ahora veremos cómo se ejecuta en las tres plataformas disponibles!
Eso es todo por hoy amigos!
Espero que esto los ayude a crear nuevos componentes geniales y a explorar la potencia de los controles de Xamarin.Forms.
También puede ver mi repositorio de ejemplo completo para esta publicación en GitHub.
Gracias por leer y a seguir codeando! 😁
Edit: también funciona a grandes rasgos en macOS, pero necesita algunos cambios y ajustes, revisen el repositorio de muestra.
