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.
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.
Vrednost imena parametra | predmeta | |
---|---|---|
Spustni meni | višina | 72 |
Oznaka spustnega menija > | Velikost pisave | 40 |
Velikost pisave elementa
Najprej spremenite velikost pisave elementa. Izberite > > >Dropdown
Template
Content
> > Viewport
Item
Item Label
za 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
Content
Template
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 Checkmark
Template
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.