• laurent@lioncoding.com

WhatsApp UI dans Xamarin.Forms (Partie 4)


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

Dans cette quatriè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 Calls;
  • [x] Produire une source de données pour alimenter l’UI CALLS;
  • [x] Concevoir l’UI des appels.

Le Model Call

namespace WhatsApp.Models
{
    /// <summary>
    /// WhatsApp call class.
    /// </summary>
    public class Call
    {
        public int CallID { get; set; }
        public Contact Contact { get; set; }
        public string CallDate { get; set; }
        public bool OutCall { get; set; }
        public bool InCall { get; set; }
        public bool IsMissedCall { get; set; }
    }
}

Le service des appels

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

namespace WhatsApp.Services
{
    public class CallService
    {
        public static List<Call> GetCallHistory()
        {
            List<Call> CallHistory = new List<Call>
            {
                new Call
                {
                    CallID = 1,
                    CallDate = "Just now",
                    OutCall = true,
                    InCall = false,
                    IsMissedCall = false,
                    Contact = new Contact
                    {
                        ContactID = 12,
                        Name = "Natalie",
                        PhoneNumber = "+228999999",
                        ProfileImage = "Natalie.jpg"
                    }
                },
                new Call
                {
                    CallID = 2,
                    CallDate = "2 minutes ago",
                    OutCall = false,
                    InCall = true,
                    IsMissedCall = true,
                    Contact = new Contact
                    {
                        ContactID = 11,
                        Name = "Centia",
                        PhoneNumber = "+228999999",
                        ProfileImage = "Centia.jpg"
                    }
                }
            };

            return CallHistory;
        }
    }

}

Le lien vers le code source complet de ce service.

L’UI des calls

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

    <ContentPage.BindingContext>
        <viewModel:CallsViewModel />
    </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>
                    <ListView
                        CachingStrategy="RecycleElement"
                        HasUnevenRows="False"
                        ItemsSource="{Binding CallHistory}"
                        RowHeight="75"
                        SelectionMode="Single"
                        SeparatorColor="Gray"
                        SeparatorVisibility="None">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <!-- TEMPLATE -->
                                    <template:CallsViewTemplate />
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </ContentView>
            <!-- FLOAT ACTION BUTTON -->
            <controls:FloatingActionButton
                x:Name="FAB"
                Margin="0,0,5,5"
                ButtonColor="#2ECC71"
                Clicked="Button_Clicked"
                Image="call.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.CallsViewTemplate"
    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"
            HeightRequest="45"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="Fill">
            <StackLayout
                Margin="0,0,0,0"
                Padding="0,0,0,0"
                Orientation="Horizontal"
                VerticalOptions="Center">
                <!--  last status image  -->
                <StackLayout
                    HorizontalOptions="Center"
                    Orientation="Vertical"
                    VerticalOptions="Center">
                    <ff:CachedImage
                        Margin="0,0,0,5"
                        HeightRequest="55"
                        HorizontalOptions="StartAndExpand"
                        Source="{Binding Contact.ProfileImage}"
                        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 HorizontalOptions="FillAndExpand">
                    <StackLayout
                        Margin="0,0,0,0"
                        HorizontalOptions="FillAndExpand"
                        Orientation="Horizontal"
                        VerticalOptions="Center">
                        <StackLayout
                            Margin="0,0,5,0"
                            HorizontalOptions="Start"
                            Orientation="Vertical"
                            VerticalOptions="Center">
                            <Label
                                FontSize="17"
                                HorizontalOptions="Start"
                                Text="{Binding Contact.Name}"
                                TextColor="#000000"
                                XAlign="Start" />
                            <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand">
                                <Image
                                    HeightRequest="15"
                                    HorizontalOptions="Start"
                                    IsVisible="{Binding IsMissedCall}"
                                    Source="missecall.png" />
                                <Image
                                    HeightRequest="15"
                                    HorizontalOptions="Start"
                                    IsVisible="{Binding OutCall}"
                                    Source="outcall.png" />
                                <Label
                                    FontSize="14"
                                    Text="{Binding CallDate}"
                                    TextColor="Gray" />
                            </StackLayout>
                        </StackLayout>
                        <StackLayout
                            HorizontalOptions="EndAndExpand"
                            Orientation="Horizontal"
                            VerticalOptions="Center">
                            <Image
                                HeightRequest="30"
                                Source="voicecall.png"
                                WidthRequest="25" />
                        </StackLayout>
                    </StackLayout>
                    <BoxView
                        HeightRequest="0.3"
                        HorizontalOptions="FillAndExpand"
                        Color="LightGray" />
                </StackLayout>
            </StackLayout>
        </Frame>
    </ContentView.Content>
</ContentView>

Nous voici arrivé à la fin des trois principaux UI. il reste maintenant à les mettre dans un TabbedPage.

Dans l’article suivant, je vous montrerai comment y procéder et spécifier le focus sur la vue de chat.

Ressources

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


Commentaires