Používanie rozbaľovacieho zoznamu používateľského rozhrania Unity

Prostredie overovania

Windows

• Windows 11

Editor jednoty

• 2020.3.25f1

Predpoklady pre tento tip

Nasledujúce nastavenia boli vykonané vopred ako predpoklad pre vysvetlenie týchto tipov.

• Predstavujeme balík vstupného systému
• Zarovnanie fotoaparátu (2D) s plátnom

Najskôr

Rozbaľovacie ponuky možno použiť na to, aby si používateľ mohol vybrať jednu z niekoľkých možností. Aj keď existuje veľa položiek, z ktorých si môžete vybrať, na obrazovke sa zobrazia iba vybraté položky, čo je užitočné pre úsporu miesta a uľahčuje používateľovi pochopiť, čo vyberá.

Umiestnenie rozbaľovacej ponuky

Vyberte rozbaľovaciu ponuku z hierarchie a pridajte ju do zobrazenia.

Upravte polohu rozbaľovacej ponuky podľa vlastného uváženia. Ak sa vám zdá, že veľkosť je malá, zväčšite rám potiahnutím.

Ak chcete Dropdown nastaviť veľkosť textu vo vnútri, namiesto položky .Label

Keď ho spustíte, zobrazí sa rozbaľovací zoznam v akcii. V počiatočnom stave si môžete vybrať z troch položiek, takže môžete prepnúť výber. Ak však zmeníte veľkosť rozbaľovacieho zoznamu alebo Label veľkosť písma , nebude sa zhodovať s veľkosťou textu zobrazeného v rozbaľovacom zozname.

Úprava veľkosti rozbaľovacích položiek

Ak ste pri umiestnení rozbaľovacieho zoznamu nezmenili veľkosť objektu alebo písma, nemusíte to urobiť, ale ak áno, budete musieť nastaviť aj rozbaľovaciu položku.

Rozbaľovací objekt obsahuje definíciu spôsobu zobrazenia vybratej položky pri zobrazení. Dropdown Template je to tak. Ak nenastavíte niekoľko nastavení, nebude to vyzerať pekne.

V prvom rade sa predpokladá, že každý parameter umiestnenej rozbaľovacej ponuky je nastavený nasledovne. Ak nastavujete s rôznymi parametrami, nahraďte čísla a prečítajte si ich. V tomto príklade sú nastavené aj ďalšie parametre, ale sú vynechané, pretože nesúvisia s rozbaľovacími položkami.

Veľkosť písma položky

Najprv zmeňte veľkosť písma položky. Vyberte > > >Dropdown Template Content > > Viewport Item Item Labelpre objekt. Zadajte veľkosť písma 40, ktorá je rovnaká ako veľkosť písma Označenie. Ak chcete zobraziť viac možností, môžete ich trochu zmenšiť.

Aj keď zväčšíte veľkosť písma, veľkosť zobrazenia jednej položky sa nezmení, takže sa nemusí nič zobraziť, aj keď ju spustíte.

Veľkosť položky

Potom nastavte veľkosť jednej položky. Objekty, ktoré chcete vybrať, sú > >Dropdown Template Viewport > > . Content Item Nastavte výšku na 72. Ak chcete zobraziť viac možností, môžete ich trochu zmenšiť.

Vďaka tomu sú prvky položky viditeľné, ale z nejakého dôvodu sú horná a dolná časť vybranej položky trochu odrezané bez ohľadu na rolovanie.

Ak chcete tento problém vyriešiť, nastavte výšku > > >Dropdown Viewport ContentTemplate na Item 72, ktorá je rovnaká ako . To vám umožní správne vidieť horné a dolné položky.

Mimochodom, v predvolených rozbaľovacích nastaveniach Item je výška nastavená o niečo väčšia ako Content . V dôsledku toho sa nad a pod vybranou položkou zobrazí mierna rezerva, čo znižuje pocit tlaku.

Veľkosť začiarknutia

Veľkosť začiarknutia je tiež malá, takže ju opravím. Cieľový objekt je "Dropdown> > Viewport > > >Item CheckmarkTemplate Item Content".

Ak zmeníte šírku a výšku, zväčší sa aj začiarknutie, preto ho tu nastavte na 72.

Keď ho spustím, začiarknutie je väčšie, ale pozícia je nesprávna, takže to tiež opravím.

Item Checkmark Najprv nastavte pivot X na 0 a potom nastavte aj pozíciu X na 0. To vám umožní umiestniť ho na dobré miesto bez ohľadu na veľkosť šeku alebo štítku.

Keďže sa prekrýva s označením, vyberte, Item Lebel aby bola ľavá pozícia rovnaká ako veľkosť znaku začiarknutia.

Veľkosť posúvača

Posuvník je tiež malý a ťažko sa naň kliká, preto ho zväčšite. Každý má konkrétnu veľkosť, takže to nie je niečo, čo sa dá určiť. V tomto prípade sme nastavili 48, čo je 2/3 výšky rozbaľovacieho zoznamu.

Objekt, ktorý sa má vybrať, je nastavený na hodnotu šírky v > >Dropdown Template Scrollbar.

Veľkosť rozbaľovacej ikony

Nie je na strane položky, ale ikona rozbaľovacieho zoznamu je stále malá, takže ju zmením. Objekt, ktorý sa má vybrať, je >Dropdown Arrow.

Pokiaľ ide o veľkosť ikony, veľkosť môžete zmeniť nastavením šírky a výšky. Tu sme ho nastavili na 72, čo je rovnaké ako výška rozbaľovacej ponuky.

Ak je to tak, pozícia bude vypnutá, takže nastavte otočný bod X na 1 a pozíciu X na 0. To vám umožní zobraziť ikonu na peknom mieste bez ohľadu na veľkosť.

Počet zobrazených rozbaľovacích položiek

Zväčšením veľkosti položky je menej vybraných položiek, ktoré je možné zobraziť naraz, preto sa to pokúsime zväčšiť. Toto nastavenie je zadané v >Dropdown Template. Keďže počet položiek, ktoré sa majú zobraziť, nie je určený počtom položiek, ale veľkosť je nastavená podľa výšky, zadaná hodnota je "výška × počet položiek". Tu chceme zobraziť asi 10 kusov, tak 72 x 10 = 720 nastaviť .

Zobrazovacia plocha je zväčšená, ale momentálne sú tam iba 3 položky, takže sa zobrazujú iba 3 položky.

Nastavenie výberu

V predvolenom nastavení sú nastavené tri položky "Možnosť A ~ Možnosť C". Tieto položky sa Dropdown nachádzajú v komponente objektu Dropdown .

Ak sa posuniete nadol inšpektorovi, nájdete položku "Možnosti", kde môžete voľne zmeniť meno alebo pridať alebo odstrániť.

Nastavenie počiatočného výberu

Výber položiek je určený číslami. Dropdown Dropdown Počiatočný výber môžete určiť v hodnote súčasti objektu. Číslovanie položiek začína číslom 0, preto nastavte hodnotu 3, ak chcete, aby štvrtý výber bol počiatočným výberom.

Vykonanie spracovania pri výbere položky

Možno budete chcieť niečo urobiť, keď vyberiete položku v rozbaľovacom zozname. To je možné implementovať rovnakým spôsobom, ako keď kliknete na tlačidlo.

Objekt má rozbaľovaciu ponuku a text po jednom. Po výbere položky v rozbaľovacom zozname skontrolujte, či sa obsah zobrazuje v textovom objekte vpravo. Nezáleží na ničom inom ako na umiestnení objektov, takže si ho môžete nastaviť, ako sa vám páči.

Najprv vytvorte skript v projekte. DropdownItemSelector V tomto prípade je pomenovaný .

Otvorte skript a pridajte kód k nasledujúcemu:

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

Po uložení skriptu ho priložte k objektu EventSystem . Ako je vysvetlené v tipoch pre tlačidlá, tento tip dôsledne pripája skripty EventSystem , pokiaľ na to nie je konkrétny dôvod.

Priložte rozbaľovací objekt, z ktorého chcete získať hodnotu, a textový objekt na nastavenie hodnoty.

Potom vyberte rozbaľovací objekt, s ktorým chcete pracovať, a pridajte "On Value Change (Int32)" do komponentu Dropdown Inspector.

V ľavej dolnej položke musíme vložiť objekt, ku ktorému je pripojený skript, ktorý sa má prevádzkovať, preto sme ho tu EventSystem nastavili .

Vyberte možnosť Zo žiadnej OnSelectionChanged funkcie DropdownItemSelector .

Skúste ho spustiť, aby ste zistili, či funguje správne.

Dynamické pridávanie položiek

Môžete určiť, ktoré položky je možné vybrať v editore, ale môže sa stať, že sa stav počas hry zmení a budete chcieť zmeniť položky, ktoré vyberiete. V takom prípade zmeníte položku zvolenú v programe.

Objekt usporiada "rozbaľovacie" a "tlačidlo x2", ako je znázornené nižšie. Môžete ľubovoľne nastaviť iné parametre ako zarovnanie.

Vytvorte skript a pomenujte DropdownDynamic ho . Kód by mal vyzerať takto:

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 má kontrolu nad položkami, ktoré sa majú vybrať, takže Add ich môžete dynamicky ovládať vykonaním alebo Remove na nich.

EventSystem Priloženie skriptov a objektov k súboru .

Priraďte metódu udalosti kliknutia tlačidiel Pridať a Odstrániť.

Po dokončení ho spustite. Ak je položka vymazaná v editore, položka sa nezobrazí, aj keď na ňu kliknete.

Ak štyrikrát kliknete na tlačidlo Pridať, uvidíte, že boli pridané štyri položky.

Ak dvakrát kliknete na tlačidlo odstránenia, uvidíte, že dve položky boli odstránené.