Utilisation des boutons tvOS dans Xamarin
Avertissement
Le concepteur iOS a été déconseillé dans Visual Studio 2019 version 16.8 et Visual Studio 2019 pour Mac version 8.8, et supprimé dans Visual Studio 2019 version 16.9 et Visual Studio pour Mac version 8.9. La méthode recommandée pour créer des interfaces utilisateur iOS est directement sur un Mac exécutant le Générateur d’interface de Xcode. Pour plus d’informations, consultez Conception d’interfaces utilisateur avec Xcode.
Utilisez une instance de la UIButton classe pour créer un bouton focusable et sélectionnable dans une fenêtre tvOS. Lorsque l’utilisateur sélectionne un bouton, il envoie un message d’action à l’objet cible pour permettre à votre application Xamarin.tvOS de répondre à l’entrée de l’utilisateur.
Pour plus d’informations sur l’utilisation de Focus et la navigation avec Siri Remote, consultez notre documentation sur l’utilisation de la navigation et du focus et des contrôleurs Bluetooth et Siri.
À propos des boutons
Dans tvOS, les boutons sont utilisés pour les actions spécifiques à l’application et peuvent contenir un titre, une icône ou les deux. Lorsque l’utilisateur navigue dans l’interface utilisateur de l’application à l’aide de Siri Remote, le focus passe au bouton donné pour modifier le texte et les couleurs d’arrière-plan. Une ombre est également appliquée au bouton en ajoutant un effet 3D qui semble s’élever au-dessus du reste de l’interface utilisateur.
Apple propose les suggestions suivantes pour l’utilisation des boutons :
- Utilisez un titre ou une icône : alors que l’icône et le titre peuvent être inclus dans un bouton, l’espace est limité, donc essayez de ne pas combiner les deux.
- Marquer clairement les boutons destructeurs : si le bouton effectue une action destructrice (par exemple, la suppression d’un fichier), marquez-le clairement en utilisant du texte et/ou une icône. Les actions destructrices doivent toujours présenter une alerte demandant à l’utilisateur de limiter l’action.
- Ne pas utiliser les boutons Précédents : le bouton Menu sur Siri Remote est utilisé pour revenir à l’écran précédent. L’une des exceptions à cette règle concerne les achats dans l’application ou les actions destructrices où un bouton Annuler doit être affiché.
Pour plus d’informations sur l’utilisation du focus et de la navigation, consultez notre documentation Utilisation de la navigation et du focus .
Icônes de bouton
Apple vous suggère d’utiliser des images simples et hautement reconnaissables pour vos icônes Button. Les icônes trop complexes sont difficiles à reconnaître sur un écran de télévision à travers la salle sur un canapé, donc essayez d’utiliser la représentation la plus simple possible pour obtenir l’idée à travers. Dans la mesure du possible, utilisez des images standard et bien-connaître pour les icônes (comme une loupe pour la recherche).
Titres des boutons
Apple propose les suggestions suivantes lors de la création des titres de vos boutons :
- Afficher le texte descriptif sous les boutons Icônes - Si possible, placez le texte clair et descriptif sous l’icône Boutons uniquement pour obtenir l’objectif du bouton.
- Utilisez des verbes ou des phrases détaillées pour le titre : indiquez clairement l’action qui aura lieu lorsque l’utilisateur clique sur le bouton.
- Utilisez la majuscule de style titre : à l’exception d’articles, de combinaisons ou de prépositions (quatre lettres ou moins), chaque mot du titre du bouton doit être capitalisé.
- Utilisez un titre court, to-the-point : utilisez la verbiage la plus courte possible pour décrire l’action du bouton.
Boutons et tableaux de montage séquentiel
Le moyen le plus simple d’utiliser des boutons dans une application Xamarin.tvOS consiste à les ajouter à l’interface utilisateur de l’application à l’aide du Concepteur Xamarin pour iOS.
Dans le Explorateur de solutions, double-cliquez sur le
Main.storyboardfichier et ouvrez-le pour modification.Faites glisser un bouton à partir de la bibliothèque et déposez-le dans l’affichage :
Dans l’Explorateur de propriétés, vous pouvez ajuster plusieurs propriétés du bouton, telles que son titre et sa couleur de texte :
Ensuite, basculez vers l’onglet Événements et connectez un événement à partir du bouton et appelez-le
ButtonPressed:
Vous êtes automatiquement redirigé vers la
ViewController.csvue dans laquelle vous pouvez placer la nouvelle action dans votre code à l’aide des touches de direction Haut et Bas :
Appuyez sur Entrée pour sélectionner l’emplacement :
Enregistrez les modifications apportées à tous les fichiers.
Tant que la propriété d’un Enabled bouton est true et qu’elle n’est pas couverte par un autre contrôle ou vue, elle peut être effectuée à l’aide de Siri Remote. Si l’utilisateur sélectionne le bouton et clique sur l’Aire tactile, l’action ButtonPressed définie ci-dessus est exécutée.
Important
Bien qu’il soit possible d’affecter des actions telles qu’à TouchUpInside une UIButton lors de la création d’un gestionnaire d’événements, elle ne sera jamais appelée, car Apple TV n’a pas d’écran tactile ou ne prend pas en charge les événements tactiles. Vous devez toujours utiliser le type d’action par défaut lors de la création d’actions pour les éléments d’interface utilisateur tvOS.
Pour plus d’informations sur l’utilisation de Storyboards, consultez notre Guide de démarrage rapide Hello, tvOS.
Boutons et code
Si vous le souhaitez, vous pouvez créer un UIButton code C# et l’ajouter à la vue de l’application tvOS. Par exemple :
var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
// Do something when the button is clicked
...
};
View.AddSubview (button);
Lorsque vous créez un nouveau UIButton code, vous spécifiez son UIButtonType élément comme l’un des éléments suivants :
- Système : il s’agit du type standard de bouton présenté par tvOS et est le type que vous utiliserez le plus souvent.
- DetailDisclosure : présente un type de bouton « désactiver » utilisé pour masquer ou afficher des informations détaillées.
- InfoDark - Un bouton d’informations détaillées sombres affichait un « i » dans un cercle.
- InfoLight - Un bouton d’informations détaillées de lumière affichait un « i » dans un cercle.
- AddContact : affichez le bouton sous la forme d’un bouton Ajouter un contact.
- Personnalisé : vous permet de personnaliser plusieurs caractéristiques du bouton.
Ensuite, vous définissez la taille et l’emplacement du bouton à l’écran. Exemple :
button.Frame = new CGRect (25, 25, 300, 150);
Ensuite, définissez le titre du bouton. UIButtons sont différents de la plupart des UIKit contrôles dans le fait qu’ils ont un état afin que vous ne puissiez pas simplement changer le titre, vous devez le modifier pour un donné UIControlState. Par exemple :
button.SetTitle ("Hello", UIControlState.Normal);
Ensuite, utilisez l’événement AllEvents pour voir quand l’utilisateur a cliqué sur le bouton. Exemple :
button.AllEvents += (sender, e) => {
// Do something when the button is clicked
...
};
Enfin, vous ajoutez le bouton à l’affichage pour l’afficher :
View.AddSubview (button);
Important
Bien qu’il soit possible d’affecter des actions telles qu’à TouchUpInside un UIButton, elle ne sera jamais appelée, car Apple TV n’a pas d’écran tactile ou ne prend pas en charge les événements tactiles. Vous devez toujours utiliser des événements tels que AllEvents ou PrimaryActionTriggered.
Style d’un bouton
tvOS fournit plusieurs propriétés d’un UIButton qui peut être utilisé pour fournir son titre et le style avec des éléments tels que la couleur d’arrière-plan et les images.
Titres des boutons
Comme nous l’avons vu ci-dessus, UIButtons sont différents de la plupart UIKit des contrôles en ce qu’ils ont un état afin que vous ne puissiez pas simplement changer le titre, vous devez le modifier pour un donné UIControlState. Par exemple :
button.SetTitle ("Hello", UIControlState.Normal);
Vous pouvez définir la couleur de titre du bouton à l’aide de la SetTitleColor méthode. Par exemple :
button.SetTitleColor (UIColor.White, UIControlState.Normal);
Et vous pouvez ajuster l’ombre du titre à l’aide du SetTitleShadowColor. Par exemple :
button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);
Vous pouvez définir l’ombre du titre pour passer de Gravé à Embossed lorsque le bouton est mis en surbrillance à l’aide du code suivant :
button.ReverseTitleShadowWhenHighlighted = true;
En outre, vous pouvez utiliser du texte attribué comme titre du bouton. Par exemple :
var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);
var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);
Images de bouton
Une UIButton image peut être attachée et peut utiliser une image comme arrière-plan.
Pour définir l’image d’arrière-plan d’un bouton donné UIControlState, utilisez le code suivant :
button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);
Définissez la AdjustsImageWhenHiglighted propriété pour true dessiner l’image plus légère lorsque le bouton est mis en surbrillance (il s’agit de la valeur par défaut). Définissez la AdjustsImageWhenDisabled propriété pour true dessiner l’image plus sombre lorsque le bouton est désactivé (là encore, il s’agit de la valeur par défaut).
Pour définir l’image affichée sur le bouton, utilisez le code suivant :
button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);
Utilisez la TintColor propriété pour définir une teinte de couleur appliquée à la fois au titre et à l’image du bouton. Pour les boutons du Custom type, cette propriété n’a aucun effet, vous devez implémenter le TintColor comportement vous-même.
Résumé
Cet article a abordé la conception et l’utilisation de boutons à l’intérieur d’une application Xamarin.tvOS. Il a montré comment utiliser des boutons dans le Concepteur iOS et comment créer des boutons dans du code C#. Enfin, il a montré comment modifier le titre d’un bouton et modifier son style et son apparence.