Partager via

Utilisation des contrôles segmentés tvOS dans Xamarin

  • Article

Un contrôle segmenté fournit un ensemble d’éléments linéaires, chacun pouvant contenir une icône ou un texte, et est utilisé pour fournir un ensemble de choix connexes à l’utilisateur.

Exemples de contrôles de segment

Apple propose les suggestions suivantes pour utiliser les contrôles segmentés :

  • Fournir suffisamment d’espace - Vous devez prendre soin de fournir un espace suffisant entre d’autres éléments focusables et un contrôle segmenté. Un segment individuel devient sélectionné lorsqu’il est en focus (pas lorsqu’il est cliqué) et que l’utilisateur peut modifier accidentellement des segments lorsqu’il souhaite réellement sélectionner un autre élément focusable sur le segment actuel.
  • Utilisez les vues fractionnées pour le filtrage de contenu : les contrôles segmentés ne font pas de bons choix pour le filtrage de contenu, car les vues fractionnées ont été conçues pour faciliter la navigation entre le contenu et les filtres.
  • Limite à Sept segments Max : vous devez essayer de conserver le nombre maximal de segments inférieurs à huit (8), car cela est plus facile à analyser sur l’espace sur le canapé et plus facile à naviguer.
  • Utilisez la taille de contenu de segment cohérent : tous les segments ont la même largeur et, si possible, vous devez essayer de conserver le contenu dans chaque segment de la même taille. Cela rend non seulement les contrôles segment plus agréables visuellement, mais facilite la lecture en un clin d’œil.
  • Évitez de mélanger des icônes et du texte : chaque segment individuel peut contenir une icône ou un texte, mais pas les deux. Bien qu’il soit possible de mélanger les icônes et le texte dans le même contrôle segmenté, cela doit être évité.

À propos des icônes de segment

Apple suggère d’utiliser des images simples et reconnaissables pour les icônes Segment, telles qu’une loupe pour la recherche. Les icônes trop complexes sont difficiles à reconnaître sur un écran de télévision à travers la salle. Il est donc préférable de limiter vos icônes à des représentations simples.

Vous ne pouvez pas combiner à la fois du texte et des icônes sur un segment donné. Vous devez éviter de mélanger des icônes et du texte dans un seul contrôle segmenté. Il doit s’agir de toutes les icônes ou de tout le texte.

Texte de segment

Apple apporte les suggestions suivantes pour l’utilisation du texte segment :

  • Utilisez des noms courts et significatifs : le titre du segment doit clairement indiquer le type de contenu attendu par l’utilisateur lors de la sélection du segment donné. Par exemple : Musique ou Vidéos.
  • Utiliser la majuscule de cas de titre : chaque mot du titre segments doit être capitalisé à l’exception des articles, des combinaisons et des prépositions de moins de quatre (4) caractères.
  • Utilisez des titres courts, prioritaires : conservez les titres, courts et concentrés sur le type de contenu à attendre lorsque le segment est sélectionné.

Là encore, vous ne pouvez pas combiner à la fois du texte et des icônes sur un segment donné. Vous devez éviter de mélanger des icônes et du texte dans un seul contrôle segmenté.

Segmenter des contrôles et des storyboards

Le moyen le plus simple d’utiliser les contrôles de segment dans une application Xamarin.tvOS consiste à les ajouter à l’interface utilisateur de l’application à l’aide du concepteur iOS.

  1. Dans le panneau Solution, double-cliquez sur le Main.storyboard fichier et ouvrez-le pour modification.

  2. Faites glisser un contrôle segment à partir de la boîte à outils et déposez-le dans la vue :

    Un contrôle segment

  3. Dans l’onglet Widget du Panneau de propriétés, vous pouvez ajuster plusieurs propriétés du contrôle segment, telles que son style et son état :

    Onglet Widget

  4. Utilisez le champ Segments pour contrôler le nombre de segments dans le contrôleur.

  5. Sélectionnez un segment donné dans la liste déroulante Segment pour ajuster ses propriétés individuelles telles que titre ou image et contrôler si un segment donné est activé ou sélectionné lorsque le contrôle est affiché.

  6. Enfin, affectez des noms aux contrôles afin que vous puissiez y répondre en code C#. Par exemple :

    Attribuer un nom

  7. Enregistrez vos modifications.

Pour plus d’informations sur l’utilisation de Storyboards, consultez notre Guide de démarrage rapide Hello, tvOS.

Utilisation des contrôles segmentés

Comme indiqué ci-dessus, le contrôle segmenté fournit un ensemble d’éléments linéaires, chacun pouvant contenir une icône ou un texte, et est utilisé pour fournir un ensemble de choix connexes à l’utilisateur.

Il existe plusieurs façons de travailler avec des contrôles segmentés dans votre application Xamarin.tvOS.

Exposé en tant que noms et événements

Si vous avez créé votre contrôle segment dans le Concepteur d’interface et l’avez exposé en tant que contrôle nommé et un événement, vous pouvez utiliser le code suivant pour répondre à la modification du segment :

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take action based on the number of players selected
    switch(PlayerCount.SelectedSegment) {
    case 0:
        // Do something if the segment is selected
        ...
        break;
    case 1:
        // Do something if the segment is selected
        ...
        break;
    case 2:
        // Do something if the segment is selected
        ...
        break;
    }
}

Dans le cas de l’exemple ci-dessus, le contrôle segment a été exposé sous la forme d’un PlayerCount nom et d’une PlayerCountChanged action d’événement. Pour plus d’informations sur l’utilisation des actions et des points de vente, consultez la section Écriture du code avec des points de vente et des actions de notre Guide de démarrage rapide Hello, tvOS.

La SelectedSegment propriété obtient ou définit le segment actuellement sélectionné en tant qu’index de base zéro (0). Par conséquent, si vous avez cinq (5) segments, le premier segment aura un index de zéro (0) et le dernier index de quatre (4).

Modification de segments

À tout moment, vous pouvez modifier le nombre et le contenu de vos contrôles segmentés. Utilisez le code suivant pour insérer un nouveau segment d’icône :

// Icon Segment
SegmentedControl.InsertSegment(UIImage.FromFile("icon.png"), 0, true);

// Text Segment
SegmentedControl.InsertSegment("New Segment", 0, true);

Le deuxième paramètre définit l’emplacement où le segment sera inséré à l’aide d’un index de base zéro (0). Si le dernier paramètre est true l’insertion sera animé.

Pour supprimer un segment donné, utilisez les éléments suivants :

SegmentedControl.RemoveSegmentAtIndex(0, true);

Ou les éléments suivants pour supprimer tous les segments :

SegmentedControl.RemoveAllSegments();

Là encore, si le dernier paramètre est true, la suppression sera animée. Utilisez la NumberOfSegments propriété pour renvoyer le nombre actuel de segments.

Pour obtenir le titre ou l’icône d’un segment donné, utilisez les éléments suivants :

// Get title
var title = SegmentedControl.TitleAt(0);

// Get icon
var icon = SegmentedControl.ImageAt(0);

Pour modifier le titre ou l’icône, utilisez les éléments suivants :

// Set title
SegmentedControl.SetTitle("New Title", 0);

// Set icon
SegmentedControl.SetImage(UIImage.FromFile("icon.png"), 0);

Pour voir si un segment donné est activé, utilisez les éléments suivants :

if (SegmentedControl.IsEnabled(0)) {
    // Do something
    ...
}

Pour activer/désactiver un segment donné, utilisez les éléments suivants :

SegmentedControl.SetEnabled(false, 0);

Modification de l’apparence du contrôle segmenté

Vous pouvez utiliser le code suivant pour modifier l’arrière-plan d’un segment donné en image :

SegmentedControl.SetBackgroundImage (UIImage.FromFile("background.png"), UIControlState.Normal, UIBarMetrics.Default);

Où UIControlState spécifie l’état du contrôle pour lequel vous définissez l’image comme suit :

  • Normale
  • Souligné
  • Désactivé
  • Volumes sélectionnés
  • Prioritaire

Spécifie les UIBarMetrics métriques à utiliser comme suit :

  • Par défaut
  • Compact
  • DefaultPrompt
  • CompactPrompt

En outre, vous pouvez définir le séparateur entre les segments à l’aide des éléments suivants :

SegmentedControl.SetDividerImage (UIImage.FromFile("divider.png"), UIControlState.Normal, UIControlState.Normal, UIBarMetrics.Default);

Où le premier UIControlState spécifie l’état du segment à gauche du séparateur et le second UIControlState spécifie l’état du segment à droite.

Résumé

Cet article a abordé la conception et l’utilisation du contrôle segmenté à l’intérieur d’une application Xamarin.tvOS.