• laurent@lioncoding.com

WhatsApp UI dans Xamarin.Forms (Partie 3)


👉 https://github.com/egbakou/WhatsAppUI le lien vers le projet complet sur Github.

Dans cette troisième partie de la série d’articles “Concevoir les UI de WhatsApp dans Xamarin.Forms” il sera question de:

  • [x] Mettre en place le Model des Statuts;
  • [x] Produire une source de données pour alimenter l’UI STATUS ;
  • [x] Concevoir l’UI des statuts.

Le Model Statut

namespace WhatsApp.Models
{
    /// <summary>
    /// WhatsApp Status class.
    /// </summary>
    public class Status
    {
        public long StutusID { get; set; }
        public Contact Contact { get; set; }
        public string Image { get; set; }
        public string Description { get; set; }
        public string PushDate { get; set; }
    }
}

Le service qui nous fournit la liste des statuts

using System.Collections.Generic;
using WhatsApp.Models;

namespace WhatsApp.Services
{
    public class StatusService
    {
        public static Me GetMyInfo()
        {
            Me MyInfo = new Me
            {
                MeID = 1,
                Name = "Egbakou",
                PhoneNumber = "+22800000000",
                ProfileImage = "noimage.png",
                Status = new Status
                {
                    StutusID = 1,
                    Description = "Ready for sale",
                    Image = "hmo.png",
                    PushDate = "20 minutes ago"                                    
                }
            };

            return MyInfo;
        }



        public static List<Status> GetRecentUpdates()
        {
            List<Status> RecentUpdates = new List<Status>
            {
                new Status
                {
                    StutusID = 2,
                    Image = "hawei.png",
                    Description = "Chinese Phone",
                    PushDate = "2 minutes ago",                  
                    Contact = new Contact
                    {
                        ContactID = 3,
                        Name = "Flora",
                        PhoneNumber = "+228999999",
                        ProfileImage = "Flora.jpg"
                    }
                },
                new Status
                {
                     StutusID = 3,
                     Image = "MacBookPro.png",
                     Description = " For sale",
                     PushDate = "10 minutes ago",
                     Contact = new Contact
                     {
                        ContactID = 4,
                        Name = "Rita",
                        PhoneNumber = "+228999999",
                        ProfileImage = "Rita.jpg"                      
                     }
                }
            };

            return RecentUpdates;
        }
    }
}

Le lien vers le code source complet de ce service.

L’UI des statuts

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="WhatsApp.Views.StatusView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:WhatsApp.Controls"
    xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
    xmlns:template="clr-namespace:WhatsApp.Views.Templates"
    xmlns:viewModel="clr-namespace:WhatsApp.ViewModels"
    Title="{Binding Title}">

    <ContentPage.BindingContext>
        <viewModel:StatusViewModel />
    </ContentPage.BindingContext>


    <ContentPage.Content>
        <RelativeLayout>
            <ContentView RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
                <StackLayout>

                    <!--  MY STATUS  -->
                    <Frame
                        HasShadow="True"
                        HeightRequest="40"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="Fill">
                        <StackLayout
                            Margin="0,0,0,0"
                            Padding="0,0,0,0"
                            Orientation="Horizontal">
                            <!--  last status image  -->
                            <StackLayout
                                HorizontalOptions="Center"
                                Orientation="Vertical"
                                VerticalOptions="Center">
                                <ff:CachedImage
                                    Margin="0,0,0,5"
                                    HeightRequest="55"
                                    HorizontalOptions="StartAndExpand"
                                    Source="{Binding Me.Status.Image}"
                                    VerticalOptions="Center"
                                    WidthRequest="55">
                                    <ff:CachedImage.Transformations>
                                        <ffTransformations:RoundedTransformation Radius="240" />
                                    </ff:CachedImage.Transformations>
                                    <ff:CachedImage.GestureRecognizers>
                                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
                                    </ff:CachedImage.GestureRecognizers>
                                </ff:CachedImage>
                            </StackLayout>

                            <StackLayout
                                Margin="5,0,0,0"
                                HorizontalOptions="FillAndExpand"
                                Orientation="Horizontal"
                                VerticalOptions="Center">
                                <StackLayout
                                    Margin="0,0,10,0"
                                    HorizontalOptions="Start"
                                    Orientation="Vertical"
                                    VerticalOptions="Center">
                                    <!--  Contact  -->
                                    <Label
                                        FontSize="17"
                                        HorizontalOptions="Start"
                                        Text="My status"
                                        TextColor="#000000"
                                        XAlign="Start" />
                                    <!--  publish time ago  -->
                                    <Label
                                        FontSize="14"
                                        HorizontalOptions="EndAndExpand"
                                        Text="{Binding Me.Status.PushDate}"
                                        TextColor="Gray" />
                                </StackLayout>
                                <StackLayout
                                    HorizontalOptions="EndAndExpand"
                                    Orientation="Horizontal"
                                    VerticalOptions="Center">
                                    <Image Source="more.png" WidthRequest="20" />
                                </StackLayout>
                            </StackLayout>
                        </StackLayout>
                    </Frame>


                    <!--  RECENT UPDATES  -->
                    <StackLayout
                        Margin="0,0,0,0"
                        Padding="0,0,0,0"
                        BackgroundColor="#EEEEF2"
                        HeightRequest="20"
                        HorizontalOptions="FillAndExpand"
                        Orientation="Horizontal"
                        VerticalOptions="Center">
                        <Label
                            Margin="10,0,0,0"
                            FontSize="14"
                            HorizontalOptions="Start"
                            Text="Recent updates" />
                    </StackLayout>
                    <ListView
                        CachingStrategy="RecycleElement"
                        HasUnevenRows="False"
                        ItemTapped="ListView_ItemTapped"
                        ItemsSource="{Binding RecentUpdates}"
                        RowHeight="75"
                        SelectionMode="Single"
                        SeparatorColor="Gray"
                        SeparatorVisibility="None">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <!-- TEMPLATE -->
                                    <template:StatusViewTemplate />
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </ContentView>
            <!-- FLOAT ACTION BUTTON -->
            <controls:FloatingActionButton
                x:Name="FAB"
                Margin="0,0,5,5"
                ButtonColor="#2ECC71"
                Command="{Binding TakePhotoCommand}"
                Image="pick.png"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                  Property=Width,
                                                                  Factor=1,
                                                                  Constant=-90}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                  Property=Height,
                                                                  Factor=1,
                                                                  Constant=-90}" />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

Le template du ViewCell

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="WhatsApp.Views.Templates.StatusViewTemplate"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">
    <ContentView.Content>
        <Frame
            HasShadow="True"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="Fill">
            <StackLayout
                Margin="0,0,0,0"
                Padding="0,0,0,0"
                Orientation="Horizontal">
                <!--  last status image  -->
                <StackLayout
                    HorizontalOptions="Center"
                    Orientation="Vertical"
                    VerticalOptions="Center">
                    <ff:CachedImage
                        Margin="0,0,0,5"
                        HeightRequest="55"
                        HorizontalOptions="StartAndExpand"
                        Source="{Binding Image}"
                        VerticalOptions="Center"
                        WidthRequest="55">
                        <ff:CachedImage.Transformations>
                            <ffTransformations:RoundedTransformation Radius="240" />
                        </ff:CachedImage.Transformations>
                    </ff:CachedImage>
                </StackLayout>

                <StackLayout
                    Margin="5,0,0,0"
                    HorizontalOptions="FillAndExpand"
                    Orientation="Horizontal"
                    VerticalOptions="Center">
                    <StackLayout
                        Margin="0,0,10,0"
                        HorizontalOptions="FillAndExpand"
                        Orientation="Vertical"
                        VerticalOptions="Center">
                        <!--  Contact  -->
                        <Label
                            FontSize="17"
                            HorizontalOptions="Start"
                            Text="{Binding Contact.Name}"
                            TextColor="#000000"
                            XAlign="Start" />
                        <!--  publish time ago  -->
                        <Label
                            FontSize="14"
                            HorizontalOptions="StartAndExpand"
                            Text="{Binding PushDate}"
                            TextColor="Gray" />
                        <BoxView HorizontalOptions="FillAndExpand" Color="#e8edf4" />
                    </StackLayout>
                </StackLayout>
            </StackLayout>
        </Frame>
    </ContentView.Content>
</ContentView>

Page de détail des statuts

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="WhatsApp.Views.StatusDetailView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="Black">
    <ContentPage.Content>
        <StackLayout>
            <StackLayout VerticalOptions="CenterAndExpand">
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Image
                        HorizontalOptions="FillAndExpand"
                        Source="{Binding Status.Image}"
                        VerticalOptions="FillAndExpand" />
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

L’interface des CALLS fera l’objet de la partie suivante.

Ressources

👉 https://github.com/egbakou/WhatsAppUI le lien vers le projet complet sur Github.


Commentaires