Uporaba spustnega menija uporabniškega vmesnika Unity

Okolje za preverjanje

Windows

• Windows 11

Urejevalnik Unity

• 2020.3.25F1

Predpogoji za ta nasvet

Naslednje nastavitve so bile vnaprej narejene kot predpogoj za razlago teh nasvetov.

• Predstavitev paketa vhodnih sistemov
• Fotoaparat (2D) poravnajte s platnom

Sprva

S spustnimi meniji lahko uporabniku omogočite, da izbere eno od več možnosti. Tudi če lahko izbirate med številnimi elementi, so na zaslonu prikazani samo izbrani elementi, kar je koristno za prihranek prostora in uporabniku olajša razumevanje, kaj izbira.

Postavitev spustnega menija

Izberite »spustni meni« v hierarhiji, da ga dodate v pogled.

Prilagodite položaj spustnega menija po lastni presoji. Če je velikost majhna, povlecite okvir, da ga povečate.

Če želite nastaviti Dropdown velikost besedila znotraj, izberite Notri je namesto Label .

Ko ga zaženete, si lahko ogledate spustni meni v akciji. V začetnem stanju lahko izbirate med tremi elementi, tako da lahko preklopite izbor. Če pa spremenite velikost spustnega menija ali Label velikost pisave , se ne bo ujemala z velikostjo besedila, prikazanega na spustnem seznamu.

Prilagajanje velikosti spustnih elementov

Če niste spremenili velikosti predmeta ali velikosti pisave, ko postavite spustni meni, vam tega ni treba storiti, če pa to storite, boste morali nastaviti tudi spustni element.

Spustni predmet vsebuje definicijo, kako je izbrani element prikazan, ko je prikazan. Dropdown Template je tako. Če ne nastavite nekaj nastavitev, ne bo videti lepo.

Najprej se predpostavlja, da je vsak parameter postavljenega spustnega menija nastavljen na naslednji način. Če nastavljate z različnimi parametri, zamenjajte številke in jih preberite. V tem primeru so nastavljeni tudi drugi parametri, vendar so izpuščeni, ker niso povezani s spustnimi elementi.

Velikost pisave elementa

Najprej spremenite velikost pisave elementa. Izberite > > >Dropdown Template Content > > Viewport Item Item Labelza predmet. Določite velikost pisave 40, ki je enaka velikosti oznake. Če želite prikazati več možnosti, jih lahko naredite nekoliko manjše.

Tudi če povečate velikost pisave, se velikost prikaza enega elementa ne spremeni, zato morda ne boste videli ničesar, tudi če ga zaženete.

Velikost elementa

Nato nastavite velikost enega elementa. Predmeti, ki jih želite izbrati, so > > > >Dropdown . Content Item Template Viewport Nastavite višino na 72. Če želite prikazati več možnosti, jih lahko naredite nekoliko manjše.

Zaradi tega so elementi elementa vidni, vendar sta iz nekega razloga zgornji in spodnji del izbranega elementa nekoliko odrezana, ne glede na drsenje.

Če želite odpraviti to težavo, nastavite višino > > >Dropdown Viewport ContentTemplate na Item 72, kar je enako kot . Tako boste lahko pravilno videli zgornje in spodnje elemente.

Mimogrede, v privzetih nastavitvah Item spustnega menija je višina nastavljena nekoliko večja od Content . Posledično se nad in pod izbranim elementom prikaže rahel rob, kar zmanjša občutek pritiska.

Velikost kljukice

Velikost kljukice je prav tako majhna, zato jo bom popravil. Ciljni objekt je "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Če spremenite širino in višino, se bo povečala tudi kljukica, zato jo tukaj nastavite na 72.

Ko ga zaženem, je kljukica večja, vendar je položaj napačen, zato bom tudi to popravil.

Item Checkmark Najprej nastavite vrtilni X na 0, nato pa nastavite tudi položaj X na 0. To vam omogoča, da ga postavite na dobro mesto, ne glede na velikost čeka ali nalepke.

Ker prekriva oznako, izberite, Item Lebel da bo levi položaj enak velikosti kljukice.

Velikost drsnega traku

Drsni trak je tudi majhen in ga je težko klikniti, zato ga povečajte. Vsakdo je poseben glede velikosti, zato to ni nekaj, kar je mogoče določiti. V tem primeru nastavimo 48, kar je 2/3 višine padca.

Predmet, ki ga želite izbrati, je nastavljen na vrednost širine v > >Dropdown Template Scrollbar.

Velikost spustne ikone

Ni na strani elementa, vendar je spustna ikona še vedno majhna, zato jo bom spremenil. Predmet, ki ga želite izbrati, je >Dropdown Arrow.

Kar zadeva velikost ikone, lahko velikost spremenite tako, da nastavite širino in višino. Tu ga nastavimo na 72, kar je enako višini padca.

V tem primeru bo položaj izklopljen, zato nastavite vrtilni X na 1 in položaj X na 0. To vam omogoča, da ikono prikažete v lepem položaju, ne glede na velikost.

Število prikazanih spustnih elementov

S povečanjem velikosti elementa je manj izbranih elementov, ki jih je mogoče prikazati naenkrat, zato bomo to poskušali povečati. Ta nastavitev je določena v >Dropdown Template. Ker število elementov, ki jih je treba prikazati, ni določeno s številom elementov, ampak je velikost nastavljena z višino, je navedena vrednost "višina × število elementov". Tukaj želimo prikazati približno 10 kosov, zato 72 x 10 = 720 nastavite .

Območje prikaza je povečano, vendar so trenutno samo 3 elementi, zato so prikazani samo 3 elementi.

Nastavitev izbora

Privzeto so nastavljene tri postavke »Možnost A ~ možnost C«. Ti elementi se Dropdown nahajajo v komponenti objekta Dropdown .

Če se pomaknete navzdol po inšpektorju, boste našli element »Možnosti«, kjer lahko prosto spremenite ime ali dodate ali izbrišete.

Nastavljanje začetnega izbora

Izbor postavk je določen s številkami. Dropdown Dropdown Začetni izbor lahko določite v vrednosti komponente predmeta. Oštevilčevanje elementov se začne pri 0, zato nastavite 3, če želite, da je začetni izbor četrti.

Izvedite obdelavo pri izbiri elementa

Morda boste želeli nekaj narediti, ko izberete element v spustnem meniju. To se lahko izvede na enak način kot ob kliku na gumb.

Predmet ima spustni meni in besedilo enega za drugim. Ko v spustnem meniju izberete element, se prepričajte, da je vsebina prikazana v besedilnem predmetu na desni. Ni pomembno nič drugega kot postavitev predmetov, zato ga lahko nastavite, kakor želite.

Najprej ustvarite skript v projektu. DropdownItemSelector V tem primeru se imenuje .

Odprite skript in dodajte kodo naslednjemu:

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

Ko shranite skript, ga priložite predmetu EventSystem . Kot je razloženo v razdelku Nasveti za gumbe, ta nasvet dosledno priloži skripte EventSystem , razen če za to obstaja poseben razlog.

Priložite spustni predmet, da pridobite vrednost, in besedilni predmet, da nastavite vrednost.

Nato izberite spustni predmet, s katerim želite delati, in dodajte »O spremembi vrednosti (Int32)« v Dropdown komponento nadzornika.

V spodnjem levem elementu moramo postaviti predmet, na katerega je pritrjen skript, ki ga je treba upravljati, zato ga nastavimo tukaj EventSystem .

Izberite iz OnSelectionChanged možnosti Brez funkcije DropdownItemSelector .

Poskusite ga zagnati, da preverite, ali deluje pravilno.

Dinamično dodajanje elementov

Določite lahko, katere elemente lahko izberete v urejevalniku, vendar se lahko včasih stanje med igro spremeni in želite spremeniti izbrane elemente. V tem primeru boste spremenili element, izbran v programu.

Predmet razporedi "spustni meni" in "gumb x2", kot je prikazano spodaj. Prosto lahko nastavite parametre, ki niso poravnava.

Ustvarite skript in ga poimenujte DropdownDynamic . Koda mora izgledati takole:

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 ima nadzor nad elementi, ki jih želite izbrati, tako da Add lahko dinamično nadzirate elemente z izvajanjem ali Remove na njih.

EventSystem Priložite skripte in predmete .

Dodelite metodo dogodku klika gumbov za dodajanje in brisanje.

Ko končate, ga zaženite. Če je element v urejevalniku izbrisan, element ne bo prikazan, tudi če ga kliknete.

Če štirikrat kliknete gumb za dodajanje, lahko vidite, da so bili dodani štirje elementi.

Če dvakrat kliknete gumb za brisanje, lahko vidite, da sta bila izbrisana dva elementa.