Replicando la aplicación Exotic Fruits en Xamarin Forms
Hola!! 💁♀ ¡Continuo haciendo lo que amo! 😍 En este caso vamos a replicar la App Exotic Fruits obtenida de Dribble. ¡Puede verla aquí!
⚠ Antes de comenzar: Para aprovechar al máximo la publicación te dejaré algunas notas instructivas para que tengas una mejor experiencia reproduciendo la interfaz de usuario.
➖ Al principio verás una imagen con la interfaz de usuario original donde estará dividida por bloques tal cual y como la estaremos trabajaremos.
➖ Cada bloque presenta la imagen con el diseño explícito con el que estaremos trabajaremos (Se resaltan en un cuadro de color)
➖ En cada uno de los bloques de código podrás ver un comentario que dice: “Here add the code that is being explained in the next block”. Para mantenerte lo más enfocad@ posible, en esta parte se indica que la siguiente explicación del código va justo donde se agrega esta línea en comentarios.
➖No estaré utilizando estilos para que se puedan ver y comprender más rápido las propiedades agregadas a los difernetes componentes en el proceso de explicación.
¡Empecemos!
¡Dividiendo el diseño original en bloques!
Para comprender mejor, he dividido el diseño original en bloques, los cuales se enumeran en el orden de prioridad con el que vamos a reproducir cada uno:
¡Empecemos! En esta sección trabajaremos con el bloque “Market body”. Como podemos ver en la imagen tenemos una división amarilla con bordes redondeados y la parte restante está en blanco. Para lograr los bordes redondeados utilicé PanCakeView. 🥰
En la parte blanca es donde crearemos los bloques Header, Fruit list y Market list, es por esta razón que creé la estructura principal completa donde agregaremos los otros bloques de nuestro diseño, en este caso usé un Grid dentro de un ScrollView.
En esta sección trabajaremos con el bloque “Header” y para replicarlo necesitamos agregar las siguientes partes:
➖ Título
➖ Descripción
➖ Botón hamburguesa
Continuemos con nuestro próximo bloque llamado Fruit List. Aquí usaremos un CollectionView. Es importante que el proyecto se adhiera al patrón de diseño MVVM. Es por eso que utilicé las propiedades de texto Bindeadas.
Para replicar este bloque necesitamos agregar las siguientes partes:
➖ Foto de la fruta
➖ Nombre
.➖ Precio
➖ Botón para agregar (+)
Para este último bloque utilicé BindableLayout. Si no conoces este excelente recurso puedes leer sobre el aquí.
¿Recuerdas la explicación del bloque Market body? ¡Si! 💪 Okey .. En elc ódigo de este bloque definí la estructura de diseño completa en la que estará contenida la App, ahora localiza el comentario que dice: “Here add the code that is being explained in the “Market bar” block“ y agrega el siguiente código:
.
¡Y nuestro diseño de la aplicación Exotic Fruits está listo! 😎.
Gracias por leer mi artículo! 💚💕
Para ver la estructura completa del código puedes ingresar a mi repositorio de Github!
Artículo en inglés: https://askxammy.com/replicating-exotic-fruits-app-in-xamarin-forms/
