Використання розкривного меню інтерфейсу Unity UI

Сторінка оновлюється : середа, 27 грудня 2023 р.

Дата створення сторінки : четвер, 24 березня 2022 р.

Середовище верифікації

Вікна

Вікна 11

Редактор Unity

2020.3.25f1

Передумови для цієї поради

Наступні налаштування були зроблені заздалегідь як обов'язкова умова для пояснення цих порад.

Спочатку

Випадаючі списки можна використовувати, щоб дозволити користувачеві вибрати один з декількох варіантів. Навіть якщо елементів на вибір багато, на екрані відображаються лише вибрані елементи, що корисно для економії місця та полегшує користувачеві розуміння того, що він вибирає.

Розташуйте розкривний список

Виберіть «випадаюче меню» з ієрархії, щоб додати його до представлення даних.

Відрегулюйте положення випадаючого меню на свій розсуд. Якщо розмір здається маленьким, перетягніть рамку, щоб збільшити її.

Щоб Dropdown установити розмір тексту всередині, виберіть «Це всередині Label » замість .

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

Настроювання розміру розкривних елементів

Якщо ви не змінили розмір об'єкта або розмір шрифту під час розміщення розкривного списку, вам не потрібно цього робити, але якщо ви це зробите, вам також потрібно буде встановити розкривний елемент.

Розкривний об'єкт містить визначення того, як відображається вибраний елемент під час його відображення. Dropdown Template це так. Якщо ви не встановите кілька налаштувань, це не виглядатиме красиво.

Перш за все, передбачається, що кожен параметр розміщеного випадаючого меню задається наступним чином. Якщо ви встановлюєте різні параметри, замініть цифри та прочитайте їх. У цьому прикладі також встановлюються інші параметри, але вони опускаються, оскільки не пов'язані з випадаючими елементами.

Значення назви параметра		об'єкта
Випадаюче меню	зріст	72
Випадаюче меню > мітка	Розмір шрифту	40

Розмір шрифту елемента

Спочатку змініть розмір шрифту елемента. Виберіть > > >Dropdown Template Content > > Viewport Item Item Labelдля об'єкта. Укажіть розмір шрифту 40, який збігається з розміром шрифту Label. Якщо ви хочете показати більший вибір, ви можете зробити його трохи меншим.

Навіть якщо ви збільшите розмір шрифту, розмір дисплея одного елемента не зміниться, тому ви можете нічого не побачити, навіть якщо запустите його.

Розмір предмета

Далі встановлюємо розмір одного предмета. Об'єкти, які потрібно вибрати, > > > >Dropdown . Content Item Template Viewport Встановіть висоту 72. Якщо ви хочете показати більший вибір, ви можете зробити його трохи меншим.

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

Щоб виправити це, встановіть висоту > > >Dropdown Viewport ContentTemplate на Item 72, що дорівнює . Це дозволить вам правильно бачити верхні та нижні елементи.

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

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

Розмір галочки теж невеликий, тому виправлю. Цільовим об'єктом є "Dropdown> > Viewport > > >Item CheckmarkTemplate Item Content".

Якщо ви зміните ширину і висоту, галочка також збільшиться, тому тут встановіть її на 72.

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

Item Checkmark Спочатку встановіть поворот X на 0, а потім також встановіть положення X на 0. Це дозволяє розмістити його в хорошому місці незалежно від розміру чека або ярлика.

Крім того, оскільки він перекриває мітку, виберіть, Item Lebel щоб ліва позиція збігалася з розміром галочки.

Розмір смуги прокрутки

Смуга прокрутки також маленька і на неї важко клацнути, тому зробіть її більшою. Всі прискіпливо ставляться до розміру, тому це не те, що можна визначити. В даному випадку ми встановлюємо 48, що становить 2/3 висоти випадаючого меню.

Для об'єкта, який потрібно виділити, встановлюється значення ширини в > >Dropdown Template Scrollbar.

Розмір випадаючої піктограми

Це не на стороні елемента, але значок, що випадає, все одно маленький, тому я його зміню. Об'єктом, який потрібно виділити, є >Dropdown Arrow.

Що стосується розміру іконки, то ви можете змінити розмір, встановивши ширину і висоту. Тут ми встановлюємо значення 72, що дорівнює висоті випадаючого списку.

Якщо це так, позиція буде вимкнена, тому встановіть поворот 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 до, якщо для цього немає конкретної причини.

Прикріпіть розкривний об'єкт, щоб отримати значення, і текстовий об'єкт, щоб встановити значення.

Далі вибираємо випадаючий об'єкт, з яким хочете працювати, і додаємо «При зміні значення (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 кнопок додавання та видалення відповідно.

Коли закінчите, запустіть його. Якщо елемент стерто в редакторі, він не відображатиметься, навіть якщо ви його клацнете.

Якщо натиснути кнопку «Додати» чотири рази, то можна побачити, що додано чотири елементи.

Якщо натиснути кнопку «Видалити» двічі, то можна побачити, що два елементи видалено.

Використання кнопок в інтерфейсі Unity UI

Прокрутіть так, щоб вибраний елемент опинився вгорі списку розкривних елементів