Prise en charge du mode sombre dans l'interface utilisateur Telerik pour les contrôles Xamarin

Être plus convivial pour les yeux de l'utilisateur, économiser la batterie ou simplement une question de goût, quelle que soit la raison derrière, en tant que développeur mobile, vous avez probablement déjà envisagé de fournir le mode sombre de votre application.

Comme toujours, nous sont là pour aider à être plus productif, donc avec la première version de l'année (R1 2021), nous avons introduit la prise en charge du mode sombre pour nos contrôles Telerik Xamarin. En bref, cela signifie que maintenant nos commandes répondront aux changements de mode clair / sombre à la fois sur les appareils iOS et Android sans avoir besoin de les styliser séparément.

Permettez-moi de commencer par le début – la fonction de mode sombre d'iOS et d'Android est essentiellement un mode supplémentaire à l'apparence standard du système où tous les éléments du système d'exploitation sont stylisés dans une palette de couleurs plus foncée conçue par des professionnels. Les fournisseurs de plates-formes mobiles ont conçu le thème sombre de sorte que le contenu de premier plan soit parfaitement décrit et que toutes les fonctionnalités d'accessibilité soient également prises en charge. Certains des avantages de l'utilisation du thème sombre peuvent être les suivants:

• Faible consommation d'énergie
• Meilleure expérience pour les utilisateurs malvoyants
• Meilleure vision pour tous les utilisateurs dans un environnement faible

Il s'est avéré qu'il y a beaucoup d'intérêt en utilisant le thème sombre parmi les utilisateurs mobiles et nous avons décidé que nos contrôles le prenant en charge seraient un ajout précieux à la suite. À partir de la version R1 2021, notre interface utilisateur Telerik pour les contrôles Xamarin utilisera automatiquement une palette de thèmes plus sombre lorsque le mode de l'appareil est commuté.

Vérifions la fonctionnalité du mode sombre plus en détail sur iOS et Android.

Prise en charge du mode sombre sur iOS

Pour iOS la fonctionnalité a été introduite dans la version 13. Il existe une option dans les paramètres de l'appareil mobile, afin que les utilisateurs puissent choisir le thème sombre – cela définira la palette de couleurs plus foncées sur le système ainsi que toutes les applications en cours d'exécution. En règle générale, les utilisateurs s'attendent à ce que toutes les applications respectent leurs préférences système.

Prise en charge du thème sombre sur Android

Sur Android la fonctionnalité permettant d'appliquer le thème sombre à l'ensemble de l'appareil est disponible depuis Android 10 (niveau API 29). Les anciennes versions d'Android n'auraient pas la possibilité de basculer entre le mode clair / foncé, cependant, vous pouvez ajouter un tel commutateur au niveau de l'application. Contrairement à iOS, lorsque vous définissez le mode sombre sous Android, les applications en cours d'exécution sont rechargées pour appliquer le nouveau look.

Pour prendre en charge le thème sombre dans votre application sur Android, vous devez effectuer une étape supplémentaire. . Vous devez définir le thème de votre application pour hériter d'un thème DayNight . Accédez au fichier Resources / values ​​/ styles.xml situé dans le projet Android et appliquez le thème comme celui-ci:

Voyons-le en action [19659010] Pour mieux illustrer la capacité des contrôles Telerik Xamarin à répondre aux changements de thème Clair / Sombre, j'utiliserai l'exemple rapide ci-dessous. En bref, il s'agit d'un simple formulaire de réservation qui utilise certains de nos composants, à savoir DatePicker, NumericInput, AutoCompleteView et Button:

< Grid BackgroundColor = "{AppThemeBinding Light = White, Dark = Black}" >

< StackLayout Margin = "16, 40, 16, 0" >

< Label Text = "Bienvenue, Joe"

TextColor = "# B73562 "

FontSize = " 20 "

Marge = "0,0,0,24" />

< Libellé Texte [19659017] = "Planifier un voyage:"

[19659044] TextColor = "{AppThemeBinding Light = Black, Dark = Default}"

FontSize = "15 "

FontAttributes = " Gras "

Marge [19659017] = "0, 0, 0, 21" />

< Libellé Texte = "Quand voulez-vous que vos vacances commencent?" TextColor = "{AppThemeBinding Light = Black, Dark = Default}" Marge = " 0,6 " />

< telerikInput: RadDatePicker x: Name = " FromDate "

[19659099] MinimumDate = "{Binding MinDate}"

MaximumDate = "{Binding MaxDate}"

Date = "{Binding StartDate}"

Placeholder [19659017] = "Sélectionnez une date"

Marge = "0,10" />

< Libellé Texte = "Combien de temps prévoyez-vous vos vacances?" TextColor = "{AppThemeBinding Light = Black, Dark = Default}" Margin = "0,6" />

< StackL ayout Orientation = "Horizontal" HeightRequest = "25" Marge = "0,10" [19659017]>

< telerikInput: RadNumericInput x: Name = "daysNumber" WidthRequest = "200" />

< Libellé Texte = "jours" TextColor = "{AppThemeBinding Light = Black, Dark = Default}" />

</ StackLayout >

< Label Text = "Où aimeriez-vous voyager? " TextColor = " {AppThemeBinding Light = Black, Dark = Default} " Margin = [19659018] "0,6" />

< telerikInput: RadAutoCompleteView Watermark = "Choisissez une destination "

ItemsSource = " {Binding Destinations} "

Marge = "0,10" />

< telerikInput: RadButton [19659016] Texte = "Recherche"

CornerRadius = "20" [19659002] Rembourrage = "10,5,10,5"

[19659099] BorderColor = "# B73562"

BorderWidth = "1" [19659002] VerticalOptions = "CenterAndExpand"

HorizontalOptions = "CenterAndExpand "

WidthRequest = " 200 "

HeightRequest [19659017] = "40"

TextColor = "# B73562"

FontSize = "15"

BackgroundColor = "Transparent" />

</ StackLayout >

</ Grid >

Dans l'exemple, j'ai utilisé AppThemeBinding pour Xamarin.Forms Labels TextColor et Grid BackgroundColor, afin qu'ils soient mis à jour en fonction des changements de thème Dark / Light. Pour plus de détails à ce sujet, vous pouvez consulter la rubrique Répondre aux changements de thème système dans les applications Xamarin.Forms sur Microsoft Docs.

Voici le résultat sur Android et iOS en utilisant l'apparence normale du système (sans passer en mode sombre):

Si les utilisateurs de l'application préfèrent l'apparence du mode sombre, le même formulaire de réservation passera à la palette de couleurs plus foncées sans aucun effort supplémentaire de votre part:

Partagez vos commentaires

Nous espérons que la prise en charge du mode sombre dans l'interface utilisateur Telerik pour les contrôles Xamarin améliorera les fonctionnalités de votre application et sera appréciée par vos utilisateurs. Comme toujours, nous vous encourageons à partager vos idées ou opinions sur les commandes et ainsi jouer un rôle dans l'élaboration de notre feuille de route. Vous pouvez écrire dans le portail Telerik UI pour Xamarin Feedback ou simplement générer un ticket .