Utilisation de la liste déroulante de l’interface utilisateur Unity

Environnement de vérification

Windows

• Fenêtres 11

Éditeur Unity

• 2020.3.25f1

Conditions préalables à cette astuce

Les réglages suivants ont été effectués à l’avance comme condition préalable à l’explication de ces conseils.

• Présentation du package système d’entrée
• Aligner la caméra (2D) avec le canevas

Au début

Les listes déroulantes peuvent être utilisées pour permettre à l’utilisateur de sélectionner l’un des plusieurs choix. Même s’il y a beaucoup d’éléments parmi lesquels choisir, seuls les éléments sélectionnés sont affichés à l’écran, ce qui est utile pour économiser de l’espace et permet à l’utilisateur de comprendre plus facilement ce qu’il sélectionne.

Positionner une liste déroulante

Sélectionnez une liste déroulante dans la hiérarchie pour l’ajouter à la vue.

Ajustez la position de la liste déroulante à votre discrétion. Si la taille semble petite, faites glisser le cadre pour l’agrandir.

Pour Dropdown définir la taille du texte à l’intérieur, sélectionnez C’est à l’intérieur Label au lieu de .

Lorsque vous l’exécutez, vous pouvez voir la liste déroulante en action. Dans l’état initial, vous avez le choix entre trois éléments, ce qui vous permet de changer la sélection. Toutefois, si vous modifiez la taille de la liste déroulante ou Label la taille de la police de , elle ne correspondra pas à la taille du texte affiché dans la liste déroulante.

Ajuster la taille des éléments de la liste déroulante

Si vous n’avez pas modifié la taille de l’objet ou la taille de la police lorsque vous placez la liste déroulante, vous n’avez pas besoin de le faire, mais si vous le faites, vous devrez également définir l’élément de la liste déroulante.

L’objet déroulant contient une définition de la façon dont l’élément sélectionné est affiché lorsqu’il est affiché. Dropdown Template c’est le cas. Si vous ne définissez pas quelques paramètres, ce ne sera pas joli.

Tout d’abord, on suppose que chaque paramètre de la liste déroulante placée est défini comme suit. Si vous réglez avec des paramètres différents, remplacez les chiffres et lisez-les. Dans cet exemple, d’autres paramètres sont également définis, mais ils sont omis car ils ne sont pas liés aux éléments de la liste déroulante.

Taille de la police de l’élément

Tout d’abord, modifiez la taille de la police de l’élément. Sélectionnez > > >Dropdown Template Content > > Viewport Item Item Labelpour l’objet. Spécifiez une taille de police de 40, qui est identique à celle de l’étiquette. Si vous souhaitez afficher plus de choix, vous pouvez les réduire un peu.

Même si vous augmentez la taille de la police, la taille d’affichage d’un élément ne change pas, de sorte que vous ne pourrez peut-être rien voir même si vous l’exécutez.

Taille de l’article

Ensuite, définissez la taille d’un élément. Les objets à sélectionner sont > > > >Dropdown Template . Content Item Viewport Définissez la hauteur sur 72. Si vous souhaitez afficher plus de choix, vous pouvez les réduire un peu.

Cela rend les éléments de l’élément visibles, mais pour une raison quelconque, le haut et le bas de l’élément sélectionné sont un peu coupés indépendamment du défilement.

Pour résoudre ce problème, définissez la hauteur de > > >Dropdown Viewport ContentTemplate sur Item 72, ce qui est identique à . Cela vous permettra de voir correctement les éléments du haut et du bas.

D’ailleurs, dans les paramètres Item de la liste déroulante par défaut , la hauteur de est légèrement supérieure à Content . En conséquence, une légère marge est affichée au-dessus et au-dessous de l’élément sélectionné, ce qui réduit la sensation de pression.

Taille de la coche

La taille de la coche est également petite, je vais donc la corriger. L’objet cible est «Dropdown > > Viewport > > > Template Content Item Item Checkmark».

Si vous modifiez la largeur et la hauteur, la coche augmentera également, alors réglez-la sur 72 ici.

Lorsque je l’exécute, la coche est plus grande, mais la position est incorrecte, donc je vais également corriger cela.

Item Checkmark Tout d’abord, définissez le pivot X sur 0, puis définissez également la position X sur 0. Cela vous permet de le placer au bon endroit quelle que soit la taille du chèque ou de l’étiquette.

De plus, étant donné qu’il chevauche l’étiquette, Item Lebel sélectionnez cette option pour que la position gauche soit identique à la taille de la coche.

Taille de la barre de défilement

La barre de défilement est également petite et difficile à cliquer, alors agrandissez-la. Tout le monde est particulier sur la taille, donc ce n’est pas quelque chose qui peut être déterminé. Dans ce cas, nous définissons 48, ce qui correspond aux 2/3 de la hauteur de la liste déroulante.

L’objet à sélectionner est défini sur une valeur de largeur dans > >Dropdown Template Scrollbar.

Taille de l’icône déroulante

Ce n’est pas du côté de l’élément, mais l’icône déroulante est toujours petite, donc je vais la changer. L’objet à sélectionner est >Dropdown Arrow.

En ce qui concerne la taille de l’icône, vous pouvez modifier la taille en définissant la largeur et la hauteur. Ici, nous le définissons sur 72, ce qui est la même que la hauteur de la liste déroulante.

Si c’est le cas, la position sera désactivée, alors réglez le pivot X sur 1 et la position X sur 0. Cela vous permet d’afficher l’icône dans une position agréable, quelle que soit sa taille.

Nombre d’éléments de la liste déroulante affichés

En augmentant la taille de l’élément, il y a moins d’éléments sélectionnés qui peuvent être affichés en même temps, nous allons donc essayer d’augmenter cela. Ce paramètre est spécifié dans >Dropdown Template. Étant donné que le nombre d’éléments à afficher n’est pas spécifié par le nombre d’éléments, mais que la taille est définie par la hauteur, la valeur spécifiée est « la hauteur × le nombre d’éléments ». Ici, nous voulons afficher environ 10 pièces, donc 72 x 10 = 720 définir .

La zone d’affichage est agrandie, mais pour le moment il n’y a que 3 éléments, donc seuls 3 éléments sont affichés.

Définir la sélection

Par défaut, trois éléments de « Option A ~ Option C » sont définis. Ces éléments se trouvent Dropdown dans le composant de l’objet Dropdown .

Si vous faites défiler l’inspecteur vers le bas, vous trouverez l’élément « Options », où vous pouvez librement modifier le nom ou ajouter ou supprimer.

Définir la sélection initiale

La sélection des articles est déterminée par des numéros. Dropdown Dropdown Vous pouvez spécifier la sélection initiale dans la valeur du composant de l’objet. La numérotation des éléments commence à 0, alors définissez 3 si vous voulez que le quatrième soit la sélection initiale.

Effectuer le traitement lors de la sélection d’un élément

Vous voudrez peut-être faire quelque chose lorsque vous sélectionnez un élément dans la liste déroulante. Cela peut être mis en œuvre de la même manière que lorsque l’on clique sur un bouton.

L’objet comporte une liste déroulante et un texte à la fois. Après avoir sélectionné un élément dans la liste déroulante, assurez-vous que le contenu est affiché dans un objet texte à droite. Rien d’autre que l’emplacement des objets n’a d’importance, vous pouvez donc le configurer comme vous le souhaitez.

Tout d’abord, créez un script dans votre projet. DropdownItemSelector Dans ce cas, il est nommé .

Ouvrez le script et ajoutez le code aux éléments suivants :

using UnityEngine;
using UnityEngine.UI;

public class DropdownItemSelector : MonoBehaviour
{
  /// <summary>ドロップダウンで選択したアイテムの内容を表示するテキストオブジェクト。</summary>
  [SerializeField] Text TextValueSetter;

  /// <summary>値を取得するドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>ドロップダウンでアイテムを選択したときに呼ばれます。</summary>
  public void OnSelectionChanged()
  {
    // ドロップダウンの選択値と選択しているアイテムのテキストを表示
    TextValueSetter.text = $"value={Dropdown.value}, options.text={Dropdown.options[Dropdown.value].text}";
  }
}

Après avoir enregistré le script, attachez-le à l’objet EventSystem . Comme expliqué dans les conseils pour les boutons, cette astuce attache systématiquement des scripts EventSystem , sauf s’il y a une raison spécifique de le faire.

Joignez un objet déroulant pour obtenir la valeur et un objet texte pour définir la valeur.

Ensuite, sélectionnez l’objet déroulant avec lequel vous souhaitez travailler et ajoutez « Sur changement de valeur (Int32) » dans le Dropdown composant Inspecteur.

Dans l’élément en bas à gauche, nous devons mettre l’objet auquel le script à opérer est attaché, nous le définissons donc ici EventSystem .

Sélectionnez l’option OnSelectionChanged Aucune fonction DropdownItemSelector .

Essayez de l’exécuter pour voir s’il fonctionne correctement.

Ajouter dynamiquement des éléments

Vous pouvez spécifier quels objets peuvent être sélectionnés dans l’éditeur, mais il peut arriver que l’état change pendant le jeu et que vous souhaitiez modifier les éléments que vous sélectionnez. Dans ce cas, vous allez modifier l’élément sélectionné dans le programme.

L’objet organise la liste déroulante et le bouton x2 comme indiqué ci-dessous. Vous pouvez définir librement d’autres paramètres que l’alignement.

Créez un script et nommez-le DropdownDynamic . Le code doit ressembler à ceci :

using UnityEngine;
using UnityEngine.UI;

public class DropdownDynamic : MonoBehaviour
{
  /// <summary>アイテム処理を行うドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>追加ボタンをクリックしたとき。</summary>
  public void OnClickAdd()
  {
    // アイテムを追加します
    Dropdown.options.Add(new Dropdown.OptionData { text = $"Item {Dropdown.options.Count}" });

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }

  /// <summary>削除ボタンをクリックしたとき。</summary>
  public void OnClickRemove()
  {
    // アイテムを削除します
    if (Dropdown.options.Count >= 1)
		{
      Dropdown.options.RemoveAt(Dropdown.options.Count - 1);
    }

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }
}

Dropdown.options dispose d’un contrôle sur les éléments à sélectionner, de sorte que Add vous pouvez contrôler dynamiquement les éléments en faisant ou Remove en les utilisant.

EventSystem Attachez des scripts et des objets à .

Attribuez une méthode à l’événement de clic des boutons d’ajout et de suppression, respectivement.

Lorsque vous avez terminé, exécutez-le. Si l’élément est effacé dans l’éditeur, l’élément ne s’affichera pas même si vous cliquez dessus.

Si vous cliquez quatre fois sur le bouton d’ajout, vous pouvez voir que quatre éléments ont été ajoutés.

Si vous cliquez deux fois sur le bouton Supprimer, vous pouvez voir que deux éléments ont été supprimés.