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