Replicando UI de entrega de pedidos de Uber en .NET MAUI

¡Hola! 💁‍♀️ Estoy emocionada de compartir mi artículo para el calendario de Julio de 2023 de .NET MAUI UI creado por Matt Goldman, el cual consiste en que durante todo el mes de Julio este calendario publicará diferentes contribuciones educativas creadas por expertos de la industria sobre .NET MAUI . ¡En este artículo, te guiaré paso a paso en el desarrollo de la pantalla de entregas de pedidos de Uber de una manera muy simple! ¡Empecemos! 💚

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 diferentes 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:

¡Primero, definamos el layout principal que usaremos!

En este caso, usaremos un Grid para estructurar la pantalla, como puedes ver en el siguiente bloque de código:

Comencemos con el bloque “Main image”, para mejor comprensión de la explicación, desarrollaremos cada elemento de este bloque individualmente, estos son los siguientes:

➖ Imagen: Comenzaremos incorporando la imagen de la comida con un fondo de color el cual esta directamente asignado al mismo control Image, como se muestra en los pasos a continuación.

➖ Botón Cerrar: Sobre la imagen que agregamos anteriormente, en la esquina superior izquierda, insertaremos un botón. Este incluye una característica muy importante, es circular.

Es posible lograr una forma circular configurando las propiedades WidthRequest y HeightRequest en el mismo valor, y luego configurando la propiedad CornerRadius en la mitad de ese valor. Para mas detalles de como redondear botones te recomiendo leer el articulo “Manera fácil de crear un botón circular”.

Continuamos con el bloque “Delivery Information”, este se compone de los siguientes elementos:

➖Título y descripción de la entrega:

➖Imagen de perfil: Esta es una imagen redondeada, lograda usando AvatarView del .NET MAUI Community Toolkit. Para obtener más detalles sobre cómo implementarlo, consulte este artículo.

➖ Instrucciones de entrega:

➖ Botón de llamada: Usa la misma técnica explicada en el botón redondeado anterior.

➖ Línea separadora: En este caso, yo utilicé un BoxView para crear la línea, pero también puede usar la forma de línea .NET MAUI.

Finalmente, solo necesitamos agregar dos elementos para completar este bloque: una línea divisoria y un botón para calificar el pedido. Puedes implementar esto como se muestra a continuación: