Ticker

6/recent/ticker-posts

Xamarin.Forms - Crear Menú Hamburguesa

Hadsonpar marzo 28, 2020

En este post elaboraremos un ejemplo práctico acerca del desplazamiento que se realiza después de autentificarse el ingreso a una aplicación móvil, es decir se implementará el menú principal para determinar las opciones de nuestra aplicación móvil.

Sin mayores detalles, como se describe en el titulo de este post se creará el  menú hamburguesa 🍔 (no me gusta ese nombre 😂), con relación a la aplicación móvil que se viene desarrollando. Como se menciono en los anteriores ejemplos prácticos, será diseñada y desarrollada en Xamarin.Forms con almacenamiento de datos en SQLite. 


Te puede interesar 👀 las anteriores 😃 secuencias:


Recordemos que todas las pruebas se viene realizando en un equipo móvil físico con Sistema Operativo Android, esto no restringe el uso de emuladores.

Requisitos:
Microsoft Visual Studio Community 2019.
Xamarin.Froms - XAML.
SQLite - Gestión de datos local.

Comencemos:
En el directorio Views del proyecto AppDIAbetes agregamos una nueva Pagina de Contenido:
Clic en agrear nuevo elemento desde el directorio Views, seleccionar la opción Página de Contenido, asignar nombre y clic en agregar.
En el directorio Models del proyecto AppDIAbetes agregamos una nueva Clase:
Clic en agrear nuevo elemento desde el directorio Models, seleccionar la opción Clase, asignar nombre y clic en agregar.
Recordemos que también se puede realizar haciendo uso de la creación de una Página de maestro y detalles, sin embargo esto al crearse adicionaran otras páginas y una clase que complementa para la implementación de la opción. Si desea puedes revisar en nuevo proyecto y adicionar al nuevo proyecto el elemento en mención.
Clic en agrear nuevo elemento desde el proyecto creado, seleccionar la opción
Página de maestro y detalles, asignar nombre y clic en agregar.
Archivos .xaml agregados y el .cs que corresponde a los atributos
Ahora bien, con los 2 nuevos componente (Pagina de Contenido y Clase) agregados en nuestro proyecto se iniciará con la elaboración y ejecución de la parte de diseño de interfaz.

Diseño de Interfaz:
Abrimos los archivos PageMain.xaml y PageMain.xaml.cs (no equivocarse con la MainPage.xaml ) y cambiamos el ContentPage por MasterDetailPage.

Es decir el PageMain.xaml debe quedar por ahora de la siguiente manera:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppDIAbetes.Views.PageMain">
    <MasterDetailPage.Master>
        <ContentPage>
            <StackLayout>
                <Label Text="Welcome to Xamarin.Forms!"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand" />
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>

</MasterDetailPage>

Y el PageMain.xaml.cs debe quedar por ahora del siguiente modo:

    public partial class PageMain : MasterDetailPage
    {
        public PageMain()
        {
            InitializeComponent();
        }
    }

Con los cambios realizados, implementaremos las lista de opciones a mostrar en el PageMain.xaml, para la cual agregaremos un ContentPage e insertamos un Grid y su Grid.RowDefinitions, dos secciones con StackLayout, de las cuales uno determinará la cabecera del menu (donde estará el logo y fondo) y por ultimo la otra sección determinara la lista de opciones por intermedio de un ListView.

La propiedad ImageCell del ListView contendrá valor con valores de tipo Binding para la asignación a la entidad de datos:

<ImageCell TextColor="#3399ff" DetailColor="#AED6FF"
           Text="{Binding title}"
           Detail="{Binding detail}"
           ImageSource="{Binding image}">
</ImageCell>

El XAML completo del archivo PageMain.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppDIAbetes.Views.PageMain">
    <MasterDetailPage.Master>
        <ContentPage Title="masterPage">
            <Grid BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Image Source="fondoDIAbetes.jpg" Aspect="AspectFill" WidthRequest="200" />
                    <StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
                        <Image Source="DIAbetes.gif"></Image>
                        <Label Text="Buen día Hadson" TextColor="Black" FontSize="Small" HorizontalTextAlignment="Center" />
                    </StackLayout>
                </Grid>
                <StackLayout Margin="0,0,0,0" Grid.Row="1" Spacing="0">
                    <ListView x:Name="listPageMain" ItemSelected="OnListItemSelected" BackgroundColor="White" SeparatorColor="Gray">
                        <ListView.ItemTemplate>
                            <DataTemplate>                               
                                <ImageCell TextColor="#3399ff" DetailColor="#AED6FF"
                                            Text="{Binding title}"
                                            Detail="{Binding detail}"
                                            ImageSource="{Binding image}">
                                </ImageCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Grid>           
        </ContentPage>
    </MasterDetailPage.Master>
</MasterDetailPage>

Luego agregaremos los siguiente atributos en la clase Option que fue creado inicialmente:

using Xamarin.Forms;

namespace AppDIAbetes.Models
{
    public class Option
    {
        public string title { get; set; }
        public string detail { get; set; }
        public ImageSource image { get; set; }
        public Page page { get; set; }
    }
}

Después de realizar el diseño de Interfaz y CodeBehind, nuestro Menú Hamburguesa quedara de la siguiente manera:


Desarrollo en el CodeBehind:
En CodeBehind del archivo PageMain.xaml.cs crearemos 2 métodos para logra el desplazamiento en el menú:

El método myPageMain es el encargado de listar y almacenar los datos de cada atributo de la entidad Options para alimentar a al ListView, y por ultimo el segundo método OnListItemSelected se encarga de seleccionar la página de acuerdo a los atributos de cada página carga en el ListView:

using AppDIAbetes.Views.Options;
using AppDIAbetes.Models;
using System.Collections.Generic;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace AppDIAbetes.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PageMain : MasterDetailPage
    {
        public PageMain()
        {
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);
            myPageMain();
        }

        public void myPageMain() {
            Detail = new NavigationPage(new PageHome());

            List<Option> options = new List<Option>
            {
                new Option{ page=new PageHome(),title="Inicio", detail="Inicio", image = "ic_ac_home.png" },
                new Option{ page=new PageControl(),title="Monitoreo y Control", detail="Programación de control", image = "ic_ac_control.png" },
                new Option{ page=new PageReport(),title="Mis Reportes", detail="Reportes seamanales", image = "ic_ac_report.png" },
                new Option{ page=new PageRegistry(),title="Ingreso Manual", detail="Ingresa tu monitoreo", image = "ic_ac_registry.png" },
                new Option{ page=new PageAbout(),title="Acerca de", detail="App DIAbetes", image = "ic_ac_about.png" },
                new Option{ page=null,title="Cerrar Sesión", detail="Abandonar App", image = "ic_ac_signoff.png" }
            };
            listPageMain.ItemsSource = options;
        }
        private async void OnListItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var option = e.SelectedItem as Option;
            if (option.page != null)
            {
                IsPresented = false;
                Detail = new NavigationPage(option.page);
            }
            else if (option.page == null || option.title == "Cerrar Sesión") {

                var result = await DisplayAlert("Confirmar", "Estas seguro de cerrar sesión", "SI", "NO");
                if (result)
                {
                    await Navigation.PushAsync(new MainPage());
                }
                else
                {
                    return;
                }
            }
        }
    }
}

Antes de implementar el método myPageMain se debe crear un sub directorio de nombre Options en el directorio Views y agregar las siguientes Paginas de Contenido:
👉 PageHome.xaml
👉 PageControl.xaml
👉 PageReport.xaml
👉 PageRegistry.xaml
👉 PageAbout.xaml

Así mismo, debe agregar las imágenes en sub directorio drawable que se encuentra en el directorio Resources del proyecto de AppDIAbetes.Android:


 Para finalizar comparto el vídeo 📹 acerca de lo desarrollado de acuerdo a la descripción de este post publicado, todas las pruebas fueron validados en plataforma 📱 para Android.
Nuevamente gratitud a Dios 😊y gracias a todos ustedes por la acogida de este nuevo post, éxitos y bendiciones 🙏 y un gran abrazo a todos ✌...!!!
Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios