UI for Xamarin Deep Dive: Productivité utilisateur avec calendrier

Cet article a été co-écrit par Rossitza Fakalieva et . Basu .

Bienvenue au quatrième jour de notre UI pour la série d’articles sur Xamarin . Les calendriers maintiennent nos vies organisées et productives. Tout le monde les utilise, généralement sous forme numérique. Il n’est donc pas surprenant que vos applications mobiles aient besoin d’afficher des calendriers et de gérer des événements dessus. Il s'avère toutefois que l'interface utilisateur du calendrier est une affaire délicate – les petits détails ont de l'importance.

Le calendrier Telerik Calendar de UI pour Xamarin est conçu pour vous permettre d'offrir à vos utilisateurs une productivité optimale. dans vos applications en mettant en œuvre divers scénarios de calendrier. Et oui, il s’agit de calendriers véritablement natifs sur chaque plate-forme mobile – ils sont simplement rendus via l’abstraction de Xamarin.Forms.

personnalisation et flexibilité. Cet article aborde en premier lieu l'utilisation du calendrier Telerik Xamarin et explore toutes les options de personnalisation pour les développeurs.

Structure visuelle

Le contrôle Telerik Calendar offre de nombreuses options de personnalisation et s'adapte aux paradigmes d'interface utilisateur uniques de chaque plate-forme mobile. Avant de commencer à peaufiner les choses, il est utile de voir le contrôle global dans son ensemble – le rendu simple du calendrier Telerik avec tous les éléments visuels expliqués. Les étiquettes doivent être explicites.

Vous disposez d'un certain contrôle pour afficher et masquer des détails spécifiques en fonction de vos besoins. Par exemple, par défaut, les noms de jours s'affichent et les numéros de semaine, non. Mais voici quelques codes à renverser avec le calendrier résultant sur chaque plate-forme mobile:

 var calendar = new RadCalendar ();
calendar.WeekNumbersDisplayMode = DisplayMode.Show;
calendar.DayNamesDisplayMode = DisplayMode.Hide; 

ViewMode

Le calendrier Telerik prend en charge plusieurs modes de visualisation qui contrôlent le rendu initial du calendrier, à savoir:

• Mois
• Semaine
• ] Année
• MonthNames
• YearNumbers
• Flux

Tous les modes d'affichage ne sont pas pris en charge sur toutes les plates-formes mobiles, seul iOS ayant la particularité de les arborer tous. Certaines méthodes sont exposées pour changer de mode de vue par programmation. Chacune de ces valeurs renvoie true s'il existe un support ou si la navigation est possible, ou bien false:

• TrySetViewMode : définit le calendrier dans un mode d'affichage spécifique.
• TryNavigateToUpperView : Permet de naviguer dans le calendrier en vue supérieure si possible.
• TryNavigateToLowerView : permet de naviguer dans le calendrier en vue inférieure si possible

La hiérarchie de navigation entre les niveaux d'affichage dépend de la plate-forme mobile, comme suit: [19659014] iOS – YearNumbers> Année> MonthNames> Mois> Semaine

Voici un code simpliste pour instancier un calendrier et définir le mode d'affichage en année – tous par programmation:

 var calendar = new RadCalendar ();
calendar.NativeControlLoaded + = CalendarLoaded;
    
private Void CalendarLoaded (expéditeur d'objet, arguments EventArgs)
{
    (expéditeur en tant que RadCalendar) .TrySetViewMode (CalendarViewMode.Year);
} 

Gestion des dates

Le calendrier Telerik expose des propriétés qui permettent au développeur de disposer d’une souplesse programmatique pour manipuler l’expérience utilisateur du calendrier:

• DisplayDate : date dans la vue actuelle.
• ] MinDate : Obtient / définit la date minimale pouvant être affichée ou sélectionnée.
• MaxDate : Obtient / définit la date maximale pouvant être affichée ou sélectionnée.

Chacune des dates les propriétés peuvent être définies explicitement ou par rapport à la date actuelle, comme suit:

 // Markup XAML

    

 // code derrière
MyCalendar.MinDate = DateTime.Today.AddMonths (-1);
MyCalendar.MaxDate = DateTime.Today.AddMonths (5);
MyCalendar.DisplayDate = DateTime.Today.AddMonths (2);  

Qu'est-ce que les utilisateurs veulent le plus avec un calendrier? Ils veulent choisir des dates, bien sûr. Le calendrier Telerik propose une fonctionnalité de sélection de date simple, à la fois par interaction utilisateur et par programme. Et les sélections de dates peuvent être simples, multiples ou une plage de dates. Ceci est rendu possible par deux facteurs clés:

• SelectedDate : obtient / définit la date actuellement sélectionnée.
• SelectionChanged : Événement déclenché lorsque la date sélectionnée est modifiée.

code de base qui configure le calendrier pour qu'il affiche le mode d'affichage mensuel par défaut et sélectionne une date par programmation:

 calendrier RadCalendar = new RadCalendar ();
calendar.SelectedDate = new DateTime (2016, 12, 14);  

Et voici le résultat – remarquez les différences de style dans les commandes de calendrier rendues sur différentes plates-formes mobiles.

Rendez-vous

Toute interface utilisateur de calendrier doit afficher des rendez-vous – c'est ainsi que vous gardez vos utilisateurs engagés et productifs. La prise en charge des rendez-vous dans le calendrier Telerik commence par l'interface Telerik.XamarinForms.IA Nomination qui affiche trois membres de base – StartDate EndDate et Title . . Vous devez absolument envisager d'ajouter plus de descripteurs à vos rendez-vous, selon vos besoins. Vous trouverez ci-dessous un exemple de classe Rendez-vous mettant en œuvre l'interface:

 public class Nom: IAoint
{
    public DateTime StartDate {get; ensemble; }
    public DateTime EndDate {get; ensemble; }
    chaîne publique Title {get; ensemble; }
    
    public bool IsAllDay {get; ensemble; }
    public Couleur Couleur {get; ensemble; }
}  

Un ensemble de rendez-vous, tous issus d'une implémentation d'interface IAñointment peut être directement transmis au contrôle du calendrier Telerik. Utilisez simplement la propriété AppointmentSource qui peut également être liée aux données.

Voici quelques exemples de rendez-vous liés au calendrier et les résultats correspondants sur chaque plate-forme:

 calendar.AppointmentsSource = new List [new List] () {
nouveau rendez-vous() {
    StartDate = DateTime.Today.AddDays (1),
    EndDate = DateTime.Today.AddDays (2) .AddTicks (-1),
    Titre = "Anniversaire de maman",
    Couleur = Couleur.Rouge},
nouveau rendez-vous() {
    StartDate = DateTime.Today.AddDays (3) .AddHours (17),
    EndDate = DateTime.Today.AddDays (3) .AddHours (22),
    Title = "Big Game",
    Couleur = Couleur.Vert},
nouveau rendez-vous() {
    StartDate = DateTime.Today.AddDays (11) .AddHours (20),
    EndDate = DateTime.Today.AddDays (12) .AddHours (4),
    Title = "Progress Party",
    Couleur = Couleur.Rouge}
 

Voici un aperçu rapide de la façon dont les rendez-vous professionnels du calendrier Telerik peuvent ressembler à travers l'interface utilisateur Telerik pour Xamarin Examples – trouvez-la dans vos App Stores respectifs.

Custom Cell Styling

Sure Le calendrier Telerik possède une interface utilisateur épurée, mais il peut arriver que vous souhaitiez personnaliser son apparence et manipuler les plus infimes détails. Et sous une forme réellement conviviale pour les développeurs, le calendrier Telerik vous permet d’avoir des styles personnalisés pour chaque cellule.

Vous pouvez définir une propriété appelée SetStyleForCell sur une fonction personnalisée permettant de styliser des cellules de calendrier individuelles. Toutes les cellules partagent une classe de base commune, la CalendarCell avec les propriétés suivantes:

• Texte : Obtient le texte affiché dans la cellule.
• Type ] (CalendarCellType): Obtient le type de la cellule. Les valeurs possibles sont:
      
  1. Date : Toutes les cellules correspondant à des dates réelles ont ce type
  2. WeekNumber : Les cellules contenant des numéros de semaine
  3. DayName : Les cellules contenant les jours de la semaine

      

Chaque cellule peut être stylée à l'aide de la classe CalendarCellStyle qui comporte les options suivantes:

• BackgroundColor
• BorderColor
• BorderThickness
• Taille de la police
• FontSeight
• . 19659015] ForegroundColor

Armé de souplesse de style de cellule, supposons que vous souhaitiez que le premier jour du printemps soit une cellule verte dans le calendrier. Voici comment:

 var calendar = new RadCalendar ();
calendar.SetStyleForCell = this.EvaluateCellStyle;
    
private CalendarCellStyle EvaluateCellStyle (cellule CalendarCell)
{
    var springStyle = new CalendarCellStyle {BackgroundColor = Color.Green, FontSize = Device.OnPlatform (14, 30, 17), FontWeight = FontWeight.Normal, ForegroundColor = Color.FromRgb (139, 209, 0)};
    var dayCell = cellule comme CalendarDayCell;
    
    if (dayCell! = null && dayCell.Date.Day == 22 && dayCell.Date.Month == 3)
    {
        retour springStyle;
    }
    return null;
}  

Et le résultat:

Une autre possibilité de personnalisation courante peut survenir avec les rendez-vous – vous pouvez avoir besoin de personnaliser le style des rendez-vous sur un calendrier très chargé. Avec le calendrier Telerik, vous obtenez une propriété AppointmentStyle de type CalendarAppointmentsStyle . Cela permet une personnalisation complète, à l'aide de codes de couleur, des rendez-vous avec du texte et des formes.

Voici la structure visuelle du style de rendez-vous dans les cellules du calendrier. Vous pouvez utiliser du texte, une forme ou les deux.

Certaines des possibilités de style avec CalendarAppointmentsStyle ont les propriétés suivantes:

• DisplayMode : définit le mode de visualisation des rendez-vous. Les valeurs peuvent être
      
  1. Texte
  2. TextWithShape
  3. TextWithBackground
  4. Forme

      

• Rembourrage : définit le rembourrage du rectangle contenant les événements.
• Espacement : définit l'espace vide entre deux rendez-vous à la même date.
• ] ShapeType : définit la forme représentant un rendez-vous. Les valeurs peuvent être
      
  1. Rectangle
  2. Ellipse
  3. TriangleUp
  4. TriangleDown
  5. Rhombus

      

• AllDayIndicatorLocation : Définit l'emplacement où les indicateurs de la journée entière sont visualisés.

Voici des exemples de visualisation des formes représentant des rendez-vous:

Vous trouverez ci-dessous un exemple d'indicateur de rendez-vous pour la journée. Vous contrôlez l'emplacement, la largeur et le remplissage de la manière dont l'indicateur est rendu dans la cellule de calendrier:

Conclusion

Telerik Xamarin Calendar est une interface utilisateur complexe comportant de nombreuses fonctionnalités. Sachez simplement que lorsque vous devez prendre en charge tout type de calendrier et d'événement dans votre application mobile multiplate-forme, le calendrier Telerik est prêt à l'emploi – avec une myriade d'options de personnalisation. Parcourez les documents détaillés lorsque vous êtes prêt. Gardez vos utilisateurs productifs avec le support de calendrier approprié.

Les autres articles de cette série: