👉 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:
- Mettre en place le Model des Statuts;
- Produire une source de données pour alimenter l’UI STATUS ;
- 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