Styles d’interface utilisateur tvOS dans Xamarin

Cet article décrit les thèmes de l’interface utilisateur Clair et Sombre que Apple a ajoutés à tvOS 10 et comment les implémenter dans une application Xamarin.tvOS.

tvOS 10 prend désormais en charge à la fois un thème d’interface utilisateur sombre et claire auquel tous les contrôles UIKit de build s’adapteront automatiquement, en fonction des préférences de l’utilisateur. En outre, le développeur peut ajuster manuellement les éléments d’interface utilisateur en fonction du thème sélectionné par l’utilisateur et peut remplacer un thème donné.

À propos des nouveaux styles d’interface utilisateur

Comme indiqué ci-dessus, tvOS 10 prend désormais en charge à la fois un thème d’interface utilisateur sombre et claire auquel tous les contrôles UIKit de build s’adapteront automatiquement, en fonction des préférences de l’utilisateur.

L’utilisateur peut changer ce thème en accédant à Paramètres> Apparencegenerale> et en basculant entre La lumière et l’obscurité :

Lorsque le thème sombre est sélectionné, tous les éléments de l’interface utilisateur basculent vers du texte clair sur un arrière-plan sombre :

L’utilisateur a la possibilité de changer le thème à tout moment et peut le faire en fonction de l’activité actuelle, où se trouve Apple TV ou l’heure de la journée.

Le thème de l’interface utilisateur clair est le thème par défaut et toutes les applications tvOS existantes utilisent toujours le thème Clair, quelles que soient les préférences de l’utilisateur, sauf si elles sont modifiées pour tvOS 10 afin de tirer parti du thème Sombre. Une application tvOS 10 a également la possibilité de remplacer le thème actuel et d’utiliser toujours le thème clair ou sombre pour une partie ou l’ensemble de son interface utilisateur.

Adoption des thèmes clair et sombre

Pour prendre en charge cette fonctionnalité, Apple a ajouté une nouvelle API à la UITraitCollection classe et une application tvOS doit choisir de prendre en charge l’apparence Sombre (via un paramètre dans son Info.plist fichier).

Pour choisir la prise en charge du thème Clair et Sombre, procédez comme suit :

1. Dans l’Explorateur de solutions, double-cliquez sur le fichier Info.plist pour l’ouvrir et le modifier.

2. Sélectionnez la vue Source (en bas de l’éditeur).

3. Ajoutez une nouvelle clé et appelez-la UIUserInterfaceStyle:

   

4. Laissez le type défini sur String et entrez une valeur de Automatic:

   

5. Enregistrez les modifications du fichier.

Il existe trois valeurs possibles pour la UIUserInterfaceStyle clé :

• Light : force l’interface utilisateur de l’application tvOS à toujours utiliser le thème Light.
• Sombre : force l’interface utilisateur de l’application tvOS à toujours utiliser le thème Sombre.
• Automatique : bascule entre le thème clair et sombre en fonction des préférences de l’utilisateur dans Paramètres. Il s’agit du paramètre préféré.

Prise en charge du thème UIKit

Si une application tvOS utilise des contrôles standard et intégrés UIView , ils répondent automatiquement au thème de l’interface utilisateur sans intervention du développeur.

En outre, UILabel et UITextView modifiera automatiquement leur couleur en fonction du thème sélectionner l’interface utilisateur :

• Le texte sera noir dans le thème Clair.
• Le texte sera blanc dans le thème Sombre.

Si le développeur modifie manuellement la couleur du texte (dans le Storyboard ou le code), il est responsable de la gestion des modifications de couleur en fonction du thème de l’interface utilisateur.

Nouveaux effets de flou

Pour prendre en charge les thèmes Clair et Sombre dans une application tvOS 10, Apple a ajouté deux nouveaux effets flous. Ces nouveaux effets ajustent automatiquement le flou en fonction du thème de l’interface utilisateur que l’utilisateur a sélectionné comme suit :

• UIBlurEffectStyleRegular - Utilise un flou clair dans le thème Clair et un flou foncé dans le thème Sombre.
• UIBlurEffectStyleProminent - Utilise un flou extra-clair dans le thème Clair et un flou extra-foncé dans le thème Sombre.

Utilisation des collections traits

La nouvelle UserInterfaceStyle propriété de la UITraitCollection classe peut être utilisée pour obtenir le thème d’interface utilisateur actuellement sélectionné et sera une UIUserInterfaceStyle énumération de l’une des valeurs suivantes :

• Lumière : le thème de l’interface utilisateur light est sélectionné.
• Sombre : le thème de l’interface utilisateur sombre est sélectionné.
• Non spécifié : l’affichage n’a pas encore été affiché à l’écran. Par conséquent, le thème actuel de l’interface utilisateur est inconnu.

En outre, Trait Collections dispose des fonctionnalités suivantes dans tvOS 10 :

• Le proxy d’apparence peut être personnalisé en fonction UserInterfaceStyle d’un élément donné UITraitCollection pour modifier des éléments tels que des images ou des couleurs d’élément en fonction du thème.
• Une application tvOS peut gérer les modifications de trait Collection en remplaçant la TraitCollectionDidChange méthode d’une ou UIViewController d’une UIView classe.

Important

La préversion anticipée de Xamarin.tvOS pour tvOS 10 ne prend pas encore entièrement en charge UIUserInterfaceStyleUITraitCollection . La prise en charge complète sera ajoutée dans une prochaine version.

Personnalisation de l’apparence basée sur le thème

Pour les éléments d’interface utilisateur qui prennent en charge le proxy d’apparence, leur apparence peut être ajustée en fonction du thème de l’interface utilisateur de leur collection de caractéristiques. Par conséquent, pour un élément d’interface utilisateur donné, le développeur peut spécifier une couleur pour le thème Clair et une autre couleur pour le thème sombre.

button.SetTitleColor (UIColor.Red, UIControlState.Normal);

// TODO - Pseudocode because this isn't currently supported in the preview bindings.
var light = new UITraitCollection(UIUserInterfaceStyle.Light);
var dark = new UITraitCollection(UIUserInterfaceStyle.Dark);

button.ForTraitCollection(light).SetTitleColor (UIColor.Red, UIControlState.Normal);
button.ForTraitCollection(dark).SetTitleColor (UIColor.White, UIControlState.Normal);

Important

Malheureusement, la préversion de Xamarin.tvOS pour tvOS 10 ne prend pas entièrement en charge UIUserInterfaceStyleUITraitCollection, de sorte que ce type de personnalisation n’est pas encore disponible. La prise en charge complète sera ajoutée dans une prochaine version.

Réponse directe aux modifications de thème

Dans le développeur, un contrôle plus approfondi sur l’apparence d’un élément d’interface utilisateur basé sur le thème d’interface utilisateur sélectionné peut remplacer la TraitCollectionDidChange méthode d’une ou UIViewController d’une UIView classe.

Par exemple :

public override void TraitCollectionDidChange (UITraitCollection previousTraitCollection)
{
    base.TraitCollectionDidChange (previousTraitCollection);

    // Take action based on the Light or Dark theme
    ...
}

Substitution d’une collection trait

En fonction de la conception d’une application tvOS, il peut arriver que le développeur ait besoin de remplacer la collection trait d’un élément d’interface utilisateur donné et qu’il utilise toujours un thème d’interface utilisateur spécifique.

Cette opération peut être effectuée à l’aide de la SetOverrideTraitCollection méthode sur la UIViewController classe. Par exemple :

// Create new trait and configure it
var trait = new UITraitCollection ();
...

// Apply new trait collection
SetOverrideTraitCollection (trait, this);

Pour plus d’informations, consultez les sections Traits et caractéristiques de substitution de notre documentation Présentation des storyboards unifiés .

Collections de caractéristiques et planches de montage séquentiel

Dans tvOS 10, le Storyboard d’une application peut être défini pour répondre aux collections de caractéristiques et de nombreux éléments d’interface utilisateur peuvent être mis à l’esprit Light et Dark Theme. La préversion anticipée actuelle de Xamarin.tvOS pour tvOS 10 ne prend pas encore en charge cette fonctionnalité dans le Concepteur d’interface. Le Storyboard doit donc être modifié dans le Générateur d’interface de Xcode comme solution de contournement.

Pour activer la prise en charge de Trait Collection, procédez comme suit :

1. Cliquez avec le bouton droit sur le fichier Storyboard dans le Explorateur de solutions, puis sélectionnez Ouvrir avec>Xcode Interface Builder :

   

2. Pour activer la prise en charge de trait Collection, basculez vers l’inspecteur de fichier et case activée la propriété Use Trait Variations dans la section Document du Générateur d’interface :

   

3. Confirmez la modification pour utiliser les variantes de caractéristiques :

   

4. Enregistrez les modifications apportées au fichier Storyboard.

Apple a ajouté les capacités suivantes lors de la modification de storyboards tvOS dans le Générateur d’interface :

• Le développeur peut spécifier différentes variantes d’éléments d’interface utilisateur en fonction du thème de l’interface utilisateur dans l’inspecteur d’attribut :

  • Plusieurs propriétés disposent désormais d’un + clic en regard de celles-ci pour ajouter une version spécifique au thème de l’interface utilisateur :

    

  • Le développeur peut spécifier une nouvelle propriété ou cliquer sur le bouton x pour le supprimer :

    

• Le développeur peut afficher un aperçu d’une conception d’interface utilisateur dans le thème Clair ou Sombre à partir du Générateur d’interface :

  • Le bas de l’aire de conception permet au développeur de changer le thème actuel de l’interface utilisateur :

    

  • Le nouveau thème s’affiche dans Le Générateur d’interface et tous les ajustements spécifiques à trait collection seront affichés :

    

En outre, le simulateur tvOS dispose désormais d’un raccourci clavier pour permettre au développeur de basculer rapidement entre les thèmes Clair et Sombre lors du débogage d’une application tvOS. Utilisez la séquence de clavier Command-Maj-D pour basculer entre Clair et Sombre.

Résumé

Cet article a abordé les thèmes de l’interface utilisateur Clair et Sombre que Apple a ajoutés à tvOS 10 et comment les implémenter dans une application Xamarin.tvOS.

Liens associés

• Nouveautés de tvOS 10