Использование раскрывающегося списка пользовательского интерфейса Unity

Проверочная среда

Виндоус

• Windows 11

Редактор Unity

• 2020.3.25ф1

Необходимые условия для получения этого совета

Следующие настройки были сделаны заранее в качестве предварительного условия для объяснения этих советов.

• Знакомство с пакетом Input System
• Выравнивание камеры (2D) по холсту

Сначала

Раскрывающиеся списки можно использовать для того, чтобы пользователь мог выбрать один из нескольких вариантов. Даже если есть много элементов на выбор, на экране отображаются только выбранные элементы, что полезно для экономии места и облегчает пользователю понимание того, что он выбирает.

Размещение раскрывающегося списка

Выберите раскрывающийся список в иерархии, чтобы добавить его в представление.

Отрегулируйте положение выпадающего списка по своему усмотрению. Если размер кажется небольшим, перетащите рамку, чтобы увеличить ее.

Чтобы задать размер текста внутри, выберите Он Dropdown внутри Label , а не .

Когда вы запустите его, вы увидите раскрывающийся список в действии. В начальном состоянии есть три элемента на выбор, поэтому вы можете переключать выбор. Однако, если вы измените размер раскрывающегося списка или Label размер шрифта , он не будет соответствовать размеру текста, отображаемого в раскрывающемся списке.

Настройка размера выпадающих элементов

Если вы не изменили размер объекта или размер шрифта при размещении раскрывающегося списка, вам не нужно этого делать, но если вы это сделаете, вам также нужно будет установить элемент раскрывающегося списка.

Раскрывающийся объект содержит определение того, как выбранный элемент отображается при его отображении. Dropdown Template так и есть. Если вы не установите несколько настроек, это не будет выглядеть красиво.

Прежде всего, предполагается, что каждый параметр размещенного выпадающего списка задается следующим образом. Если вы задаете с другими параметрами, замените цифры и прочтите их. В этом примере также задаются другие параметры, но они опущены, так как не связаны с элементами раскрывающегося списка.

Размер шрифта элемента

Во-первых, измените размер шрифта элемента. Выберите > > >Dropdown Template Content > > Viewport Item Item Labelдля объекта. Укажите размер шрифта 40, что совпадает с размером шрифта Label. Если вы хотите показать больше вариантов, вы можете сделать их немного меньше.

Даже если вы увеличите размер шрифта, размер отображения одного элемента не изменится, поэтому вы можете ничего не увидеть, даже если запустите его.

Размер элемента

Далее задайте размер одного элемента. Объекты для выбора > >Dropdown Template Viewport > > . Content Item Установите высоту на 72. Если вы хотите показать больше вариантов, вы можете сделать их немного меньше.

Это делает видимыми элементы элемента, но по какой-то причине верх и низ выбранного элемента немного обрезаются независимо от прокрутки.

Чтобы исправить это, установите высоту > > >Dropdown Viewport ContentTemplate равным Item 72, что то же самое, что и . Это позволит вам правильно видеть верхние и нижние элементы.

Кстати, в выпадающих настройках Item по умолчанию высота задается чуть больше, чем Content . В результате над и под выбранным пунктом отображается небольшой запас, уменьшающий ощущение давления.

Размер галочки

Размер галочки тоже маленький, поэтому исправлю. Целевым объектом является "> > Viewport > > > Item CheckmarkContent Item Template ".Dropdown

Если вы измените ширину и высоту, галочка также увеличится, поэтому здесь установите значение 72.

Когда я запускаю его, галочка больше, но положение неправильное, поэтому я исправлю и это.

Item Checkmark Сначала установите pivot X в 0, а затем также установите положение X в 0. Это позволяет разместить его в хорошем месте независимо от размера чека или этикетки.

Кроме того, поскольку он перекрывает метку, выберите, Item Lebel чтобы левое положение совпадало с размером флажка.

Размер полосы прокрутки

Полоса прокрутки также маленькая и ее трудно нажимать, поэтому сделайте ее больше. Все придирчивы к размеру, поэтому это не то, что можно определить. В данном случае мы устанавливаем 48, что составляет 2/3 высоты выпадающего списка.

Для выбранного объекта устанавливается значение ширины в > >Dropdown Template Scrollbar.

Размер выпадающего значка

Его нет на стороне предмета, но значок выпадающего списка все еще маленький, поэтому я его изменяю. Объект, который нужно выбрать, >Dropdown Arrow.

Что касается размера иконки, то вы можете изменить размер, установив ширину и высоту. Здесь мы устанавливаем его равным 72, что совпадает с высотой выпадающего списка.

Если это так, позиция будет выключена, поэтому установите pivot X на 1, а положение X на 0. Это позволяет отображать иконку в красивом положении независимо от размера.

Количество отображаемых элементов раскрывающегося списка

Увеличивая размер элемента, уменьшается количество выбранных элементов, которые могут отображаться одновременно, поэтому мы постараемся увеличить это. Этот параметр задается в >Dropdown Template. Так как количество отображаемых элементов задается не количеством элементов, а размер задается высотой, то указывается значение «высота × количество элементов». Здесь мы хотим отобразить около 10 штук, поэтому 72 x 10 = 720 установите .

Область показа увеличена, но на данный момент в ней всего 3 позиции, поэтому отображается только 3 позиции.

Установите выделение

По умолчанию установлено три пункта "Вариант А ~ Вариант С". Эти элементы находятся Dropdown в компоненте объекта Dropdown .

Если прокрутить инспектор вниз, то вы найдете пункт «Параметры», где можно свободно менять название или добавлять или удалять.

Установите первоначальный выбор

Выбор предметов определяется номерами. Dropdown Dropdown Начальный выбор можно указать в значении компонента объекта. Нумерация элементов начинается с 0, поэтому установите 3, если хотите, чтобы четвертый был первоначальным выбором.

Выполнение обработки при выборе элемента

Возможно, вы захотите что-то сделать, выбрав элемент в раскрывающемся списке. Это может быть реализовано так же, как и при нажатии кнопки.

Объект имеет раскрывающийся список и текст по одному. После выбора элемента в раскрывающемся списке убедитесь, что содержимое отображается в текстовом объекте справа. Не имеет значения ничего, кроме размещения объектов, поэтому вы можете настроить его так, как вам нравится.

Во-первых, создайте сценарий в своем проекте. DropdownItemSelector В данном случае он называется .

Откройте скрипт и добавьте код к следующему:

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}";
  }
}

После того, как вы сохраните скрипт, прикрепите его к объекту EventSystem . Как объяснялось в разделе Советы по кнопкам, эта подсказка последовательно прикрепляет сценарии EventSystem , если для этого нет конкретной причины.

Прикрепите раскрывающийся объект для получения значения и текстовый объект для установки значения.

Далее выберите выпадающий объект, с которым вы хотите работать, и добавьте "On Value Change (Int32)" в компоненте Dropdown Inspector.

В левом нижнем пункте нам нужно поместить объект, к которому прикреплен скрипт, которым нужно управлять, поэтому мы устанавливаем его здесь EventSystem .

Выберите из OnSelectionChanged Нет функции DropdownItemSelector .

Попробуйте запустить его, чтобы проверить, правильно ли он работает.

Динамическое добавление элементов

Вы можете указать, какие предметы могут быть выбраны в редакторе, но могут быть случаи, когда состояние меняется во время игры, и вы хотите изменить выбранные предметы. В этом случае вы измените пункт, выбранный в программе.

Объект располагает "выпадающим списком" и "кнопкой x2", как показано ниже. Вы можете свободно задавать параметры, отличные от выравнивания.

Создайте скрипт и назовите DropdownDynamic его . Код должен выглядеть следующим образом:

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 имеет контроль над элементами, которые должны быть выбраны, поэтому Add вы можете динамически управлять элементами, выполняя или Remove на них.

EventSystem Присоединение скриптов и объектов к .

Присвойте метод событию click кнопок add и delete соответственно.

Когда вы закончите, запустите его. Если элемент удален в редакторе, он не будет отображаться, даже если вы нажмете на него.

Если вы нажмете кнопку добавления четыре раза, вы увидите, что было добавлено четыре элемента.

Если вы нажмете кнопку удаления дважды, вы увидите, что два элемента были удалены.