Crea hermosas apps de Xamarin con eliteKit (versión Lite)
Esta publicación es parte del Calendario de Adviento Xamarin, una iniciativa liderada por Luis Beltrán. Revisa este enlace para conocer más artículos interesantes sobre Xamarin (y tecnologías afines) publicados por varios miembros de la comunidad.
La presentación que damos a nuestras aplicaciones móviles es importante, pues una interfaz atractiva siempre destacará y captará la atención del usuario. Para Xamarin existen diversas alternativas que ofrecen controles estilizados, visualmente llamativos y por supuesto, funcionales. Hoy les vengo a hablar de eliteKit, una nueva suite de elementos creados con SkiaSharp que te permitirá diseñar interfaces hermosas en tus apps móviles de Xamarin.
La propuesta de eliteKit contiene actualmente (versión 1.1) 21 elementos disponibles para ser incluidos en tu proyecto móvil:
Por supuesto, cada elemento tiene sus propiedades y eventos particulares (tienen una documentación concisa que puedes consultar aquí). En general hay 2 elementos siempre presentes: ColorPrimary, ColorSecondary (e IsGradient en algunos casos). El nombre de cada propiedad lo dice todo: puedes establecer un color principal para el elemento y un color auxiliar que será mostrado en forma de gradiente. Idealmente deberías establecer los valores de los colores en un diccionario de recursos si tu app tiene más de una página, más que nada para mantener la consistencia.
Otra cosa importante: eliteKit define 3 esquemas de licenciamiento para utilizar los controles:
- eliteKit Lite: La versión gratuita que te permite utilizar 10 elementos.
- eliteKit Pro: Con esta licencia tienes acceso a todos los 21 elementos que ofrece la suite, además de soporte incluido. Tiene un costo y puedes usar los controles en una sola app de Xamarin.Forms (todo tu equipo de desarrollo la puede utilizar).
- eliteKit Bundle: Es igual que la versión Pro pero puedes utilizar los controles en hasta 5 aplicaciones. También tiene costo e incluye un acceso PRO en la comunidad (todo tu equipo de desarrollo la puede utilizar) .
Más información aquí.
También cuentan con una comunidad en la que puedes resolver dudas, hacer sugerencias, o conocer las últimas novedades y actualizaciones de la plataforma aquí.
Vamos a darle un vistazo a la versión eliteKit LITE con el siguiente tutorial que hace uso de MVVM. Los 10 controles incluidos en esta versión se muestran a continuación:
El código fuente del proyecto que he generado está disponible en mi repositorio de GitHub. Lo único que NO incluye es la librería (dll) de eliteKit (por cuestiones de distribución, pero descuida, puedes agregarla a tu proyecto, solo sigue los pasos mostrados en el tutorial).
Paso 1. Accede a la página de eliteKit y da clic en el botón Start For Free.
Paso 2. Da clic en el botón Download it now!
Paso 3. (opcional pero recomendado) Si estás en Windows, accede a las propiedades del archivo zip descargado y elige Unblock (y luego Apply) para asegurar que no tengas conflictos de permisos más adelante:
Paso 4. Descomprime el archivo zip, obtendrás una dll que usaremos más adelante.
Paso 5. Crea un proyecto de Xamarin.Forms en Visual Studio. El nombre de mi proyecto es DemoEliteKit.
Paso 6. Una vez creada la solución, da clic derecho en las Dependencias del proyecto de código compartido DemoEliteKit y selecciona Agregar referencia:
Paso 7. Selecciona Browse y luego haz clic en el botón Browse…
Paso 8. Localiza la dll de eliteKit que descomprimiste en el Paso 4:
Paso 9. Agrégalo al proyecto haciendo clic en el checkbox y dando clic en OK:
Paso 10. Agrega el paquete Nuget SkiaSharp.Views.Forms en todos los proyectos de la solución:
Paso 11. En el archivo App.xaml vamos a definir un ResourceDictionary que contendrá los colores a utilizar en la app (para manejar la consistencia que decíamos anteriormente) y los estilos para los radio botones que reusaremos más adelante:
Paso 12. En el proyecto DemoEliteKit crea una carpeta llamada Converters y agrega la clase InverseBoolConverter con el siguiente código:
Paso 13. En el mismo proyecto DemoEliteKit agrega una carpeta llamada Images que contendrá la imagen box.png (descárgala del repositorio con el código fuente). Además, a este elemento debes asignarle Embedded resource en la acción de compilación y Copy always en Copiar a directorio de salida.
Paso 14. En el proyecto de Android agrega las imagenes monkey.png y xamarin.png en la carpeta drawable (dentro de Resources). Asegúrate que la acción de compilación está en AndroidResource y Copy always en Copiar a directorio de salida en ambos casos:
Paso 15. Regresando al proyecto de código compartido, agrega la carpeta ViewModels, en la que primero crearás el conocido BaseViewModel:
Paso 16. Agrega el paquete Nuget Acr.UserDialogs a todos los proyectos de la solución:
Paso 17. En el MainActivity (proyecto de Android) agrega la instrucción Acr.UserDialogs.UserDialogs.Init(this); antes de la llamada a Forms.Init
Paso 18. Regresa al proyecto de código compartido y agrega el ViewModel principal: ProductViewModel, el cual contiene:
- Las propiedades HeaderImage y FooterImage para desplegar un encabezado y pie de página respectivamente.
- Las propiedades ProductName, ProductStock y Discontinued propias de un producto.
- IsTechnology e IsFood son dos propiedades que indican la categoría del producto.
- SaveProgress simulará que se está guardando la información.
- IsValid detecta si la información del producto está completa.
- RegisterCommand “guarda” el producto (en realidad solo lo simula) con el método Register.
- ValidateCommand verifica si el producto tiene nombre con el método Validate.
- El método LoadData establece los valores iniciales de ciertas propiedades, simulando que la operación tarda 5 segundos.
El código es el siguiente:
Paso 19. Ahora viene lo bueno. Crea una carpeta Views en la que agregarás un ContentPage llamado ProductView.xaml. Describiremos paso a paso los elementos de esta vista:
a) En la sección de definiciones agrega referencias a eliteKit, Converters y ViewModels:
b) Crea una instancia de tu ViewModel y también agrega tu Converter en la sección Resources. Además, el elemento principal de contenido será un StackLayout.
c) Dentro del StackLayout agrega el elemento eliteHeader. Establece sus propiedades ColorPrimary y ColorSecondary con referencia a MainColor y AuxColor respectivamente (los cuales definimos en el diccionario de recursos de App.xaml). eliteHeader define un área de encabezado muy bonita, en la cual puedes agregar cualquier vista dentro de HeaderView. En este caso he agregado un Image, cuyo Source está enlazado a HeaderImage (definidio en el ViewModel).
Y así se ve cuando lo implementas:
d) De una vez colocamos el último elemento del StackLayout porque está relacionado con el anterior: un eliteFooter. Tiene las mismas propiedades que el eliteHeader, excepto que la vista que quieras mostrar va dentro de FooterView (nuevamente una imagen en este caso)
Y así se ve:
e) Debajo del eliteHeader define un eliteLoaderRadial, el cual lo usarás típicamente para indicar al usuario que la aplicación está realizando algún proceso (similar a un ActivityIndicator). El código siguiente:
Muestra el control de la siguiente forma al iniciar la app:
f) El resto de elementos los vamos a agregar dentro de un Grid que está contenido en un ScrollView, así que primero lo definimos (observa que el Grid no se muestra mientras la app esté ocupada -es decir, mientras se muestre el eliteLoaderRadial-):
g) Para el nombre del producto agregamos un Label y un Entry normales:
h) Ahora damos paso a un eliteSlider, que normalmente lo utilizarás para seleccionar un valor numérico de un rango. Las propiedades importantes aquí son:
- CurrentValue indica el valor actual del slider (lo enlazamos a ProductStock)
- MinValue y MaxValue indican el rango de valores posibles
- ColorSliderBar es el color del slider
- ColorSliderBarActive se usa para cubrir la parte desde MinValue hasta CurrentValue.
- ColorThumb es el color del indicador del valor actual (el círculo)
Observa el código:
Y su representación visual:
i) El siguiente elemento a mostrar es eliteBadge, que te permite acompañar una vista con un valor numérico establecido en la propiedad ContentBadge. En este caso, vamos a enlazarlo al valor seleccionado en el eliteSlider que acabas de crear, lo hacemos de la siguiente forma:
BadgeDirection indica la posición de este valor encima de la vista. Y la propiedad BadgeView define el elemento visual al que se adjuntará el valor numérico. No la colocamos en el código XAML sino en el método OnAppearing de la vista (code-behind) cargando una imagen: box.png que agregaste en el proyecto compartido de la siguiente forma:
Y así se ve el eliteBadge cuando cambias un valor en el eliteSlider:
j) ¿Qué sigue? Utilizar eliteRadiobutton para permitir al usuario elegir una opción de entre varias. La propiedad IsChecked enlaza/obtiene el estado de la selección (true o false). El resto de propiedades las tomamos de ek_rbStyle (definido en el diccionario de recursos de App.xaml comentado previamente) pero si checas su código (Paso 11), verás propiedades como:
- ColorUnchecked y ColorChecked el color de un radio botón no seleccionado y seleccionado, respectivamente
- ColorIcon el color de la X cuando se ha seleccionado la opción
Definimos otro eliteRadiobutton para una segunda categoría de producto.
Por cierto, en ambos casos definimos DataTriggers para que si por ejemplo se selecciona Technology, se deseleccione Food y viceversa, es decir, que solo pueda haber un elemento seleccionado a la vez.
El resultado de esta implementación se muestra a continuación:
k) A continuación viene un elemento similar: eliteCheckbox, que te permite seleccionar una o más opciones de entre varias presentadas. Las propiedades son las mismas que eliteRadioButton: ColorUnchecked, ColorChecked, ColorIcon…
Su representación visual es:
l) Y damos paso a los controles de acción. Primero eliteButtonOutline que en este caso voy a mostrar primero cómo se ve:
El código utilizado se muestra a continuación:
Observa que hay un gradiente en el borde (y el texto) del botón determinado por ColorPrimary y ColorSecondary. Si la propiedad IsGradient se pone en false, se utilizará ColorPrimary en el contorno del botón y se aplicará el valor de ColorText para el texto asignado en ButtonTitle.
m) Un elemento parecido es eliteButton:
El cual utiliza los colores definidos en ColorPrimary y ColorSecondary no solo para el contorno sino también para rellenar el botón. ColorText es usado para el texto determinado por ButtonTitle independientemebte del valor de IsGradient (a diferencia del eliteButtonOutline).
Notarás que he incluido un DataTrigger. Cuando el usuario da clic al botón de Validar y el producto tiene un nombre, modificaremos la apariencia del botón ajustando ColorPrimary y ColorSecondary:
n) El último elemento que vamos a mostrar es eliteProgressBar, que puedes utilizar para indicar el nivel de progreso de un proceso. La propiedad CurrentValue es un indicador visual que acepta valores entre 0 y 100 de una barra interna (de color ColorPrimary, y si IsGradient es true, entonces se incluye gradiente en combinación con ColorSecondary) y el espacio restante por cubrir de la barra de progreso es de color ColorBackground:
Como indicador adicional de la variación del progreso del proceso, he agregado un Label en la misma ubicación del eliteProgressBar que muestra el texto del progreso (y con un DataTrigger se oculta si está en cero).
El resultado lo ves a continuación:
El código completo de la vista se muestra a continuación:
Paso 20. Solo resta indicar en App.xaml.cs que nuestra página inicial es ProductView:
Paso 21. Compila y ejecuta. Verifica el correcto funcionamiento de la aplicación:
En resumen, eliteKit es una propuesta interesante a considerar para integrarla en tus proyectos con Xamarin. Revísala, verifica su diseño y funcionalidad y decide si es útil para tu proyecto. Por mi parte, puedo decir que se ve prometedor, incluso están trabajando en incluir nuevos elementos, tales como eliteAudio y eliteVideo para reproducir elementos multimedia, lo cual es sorprendente:
En próximos días escribiré una publicación en la que analizaré los controles disponibles en eliteKit PRO, así que mantente al pendiente 🙂
Espero que esta publicación te haya sido de utilidad, no olvides compartirla en tus redes sociales, tal vez le sirva a alguien más =)
Recuerda seguir el resto de las interesantes publicaciones del Calendario de Adviento Xamarin. También puedes seguir la conversación en Twitter con el hashtag #AdvientoXamarin y en la Comunidad Xamarin en Español en Facebook.
¡Gracias por la visita y hasta la próxima!
Luis
