Единство

Използване на падащото меню на потребителския интерфейс на Unity

Страницата се актуализира :
Дата на създаване на страница :

Среда за проверка

Уиндоус
  • Прозорци 11
Редактор на единство
  • 2020.3.25ф1

Предпоставки за този съвет

Следните настройки са направени предварително като предпоставка за обяснението на тези съвети.

Отначало

Падащите менюта могат да се използват, за да позволят на потребителя да избере един от няколко избора. Дори ако има много елементи, от които да избирате, на екрана се показват само избраните елементи, което е полезно за спестяване на място и улеснява потребителя да разбере какво избира.

Позициониране на падащо меню

Изберете "падащо меню" от йерархията, за да го добавите към изгледа.

Регулирайте позицията на падащото меню по ваша преценка. Ако размерът изглежда малък, плъзнете рамката, за да я направите по-голяма.

За да Dropdown зададете размера на текста вътре, изберете Вътре е вместо Label .

Когато го изпълните, можете да видите падащото меню в действие. В началното състояние има три елемента, от които да избирате, така че можете да превключите селекцията. Ако обаче промените размера на падащото меню или Label размера на шрифта на , той няма да съответства на размера на текста, показан в падащото меню.

Настройване на размера на падащите елементи

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

Падащият обект съдържа дефиниция за това как се показва избраният елемент, когато се показва. Dropdown Template е случаят. Ако не зададете няколко настройки, няма да изглежда красиво.

На първо място, приема се, че всеки параметър на поставения падащ пад-даун е зададен по следния начин. Ако задавате различни параметри, заменете числата и ги прочетете. В този пример са зададени и други параметри, но те са пропуснати, защото не са свързани с падащите елементи.

на на
Стойностиме на параметъробект
Падащо меню височина 72
Падащо меню > етикет Размер на шрифта 40

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

Първо, променете размера на шрифта на елемента. Изберете > > >Dropdown Template Content > > Viewport Item Item Labelза обекта. Задайте размер на шрифта 40, който е същият като "Етикет". Ако искате да покажете повече възможности за избор, можете да ги направите малко по-малки.

Дори ако увеличите размера на шрифта, размерът на дисплея на един елемент не се променя, така че може да не виждате нищо, дори ако го изпълните.

Размер на артикула

След това задайте размера на един елемент. Обектите, които трябва да се изберат, са > > > >Dropdown . Content Item Template Viewport Задайте височината на 72. Ако искате да покажете повече възможности за избор, можете да ги направите малко по-малки.

Това прави елементите на елемента видими, но по някаква причина горната и долната част на избрания елемент се отрязват малко, независимо от превъртането.

За да коригирате това, задайте височината на > > >Dropdown Viewport ContentTemplate на Item 72, което е същото като . Това ще ви позволи да видите правилно горните и долните елементи.

Между другото, в падащите настройки Item по подразбиране , височината на е зададена малко по-голяма от Content . В резултат на това се показва леко поле над и под избрания елемент, намалявайки усещането за натиск.

Размер на отметката

Размерът на отметката също е малък, така че ще го поправя. Целевият обект е "Dropdown> > Viewport > > > Template Content Item Item Checkmark".

Ако промените ширината и височината, отметката също ще се увеличи, затова я задайте на 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 Прикачване на скриптове и обекти към .

Присвояване на метод на събитието за щракване съответно на бутоните за добавяне и изтриване.

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

Ако щракнете върху бутона за добавяне четири пъти, можете да видите, че са добавени четири елемента.

Ако щракнете два пъти върху бутона за изтриване, можете да видите, че два елемента са изтрити.

Използване на бутони в потребителския интерфейс на Unity
Превъртете, така че избраният елемент да е в горната част на списъка с падащи елементи