"Unity" vartotojo sąsajos išskleidžiamojo meniu naudojimas

Tikrinimo aplinka

Windows

• Langai 11

"Unity" redaktorius

• 2020.3.25f1

Būtinos šio patarimo sąlygos

Šie nustatymai buvo atlikti iš anksto, kaip būtina sąlyga šiems patarimams paaiškinti.

• Pristatome įvesties sistemos paketą
• Sulygiuokite fotoaparatą (2D) su drobe

Iš pradžių

Išskleidžiamieji meniu gali būti naudojami, kad vartotojas galėtų pasirinkti vieną iš kelių pasirinkimų. Net jei galima rinktis iš daugelio elementų, ekrane rodomi tik pasirinkti elementai, o tai naudinga taupant vietą ir vartotojui lengviau suprasti, ką jis pasirenka.

Padėkite išskleidžiamąjį meniu

Hierarchijoje pasirinkite "išskleidžiamąjį meniu", kad pridėtumėte jį prie rodinio.

Savo nuožiūra koreguokite išskleidžiamojo meniu padėtį. Jei dydis atrodo mažas, vilkite rėmelį, kad jis būtų didesnis.

Norėdami Dropdown nustatyti viduje esančio teksto dydį, pasirinkite Jis viduje Label , o ne .

Kai jį paleisite, galite pamatyti veikiantį išskleidžiamąjį meniu. Pradinėje būsenoje galima rinktis iš trijų elementų, todėl galite perjungti pasirinkimą. Tačiau jei pakeisite išskleidžiamojo meniu dydį arba šrifto dydį Label , jis neatitiks išskleidžiamajame meniu rodomo teksto dydžio.

Išplečiamųjų elementų dydžio koregavimas

Jei nepakeitėte objekto dydžio arba šrifto dydžio, kai įdėjote išskleidžiamąjį meniu, to daryti nereikia, bet jei tai padarysite, turėsite nustatyti ir išskleidžiamąjį elementą.

Išplečiamajame objekte yra apibrėžimas, kaip pasirinktas elementas rodomas, kai jis rodomas. Dropdown Template yra šiuo atveju. Jei nenustatysite kelių nustatymų, tai neatrodys gražiai.

Visų pirma, daroma prielaida, kad kiekvienas pateikto išskleidžiamojo meniu parametras nustatomas taip. Jei nustatote skirtingus parametrus, pakeiskite numerius ir perskaitykite juos. Šiame pavyzdyje taip pat nustatomi kiti parametrai, tačiau jie praleidžiami, nes jie nėra susiję su išskleidžiamaisiais elementais.

Elemento šrifto dydis

Pirmiausia pakeiskite elemento šrifto dydį. Pasirinkite > > >Dropdown Template Content objekto > >. Viewport Item Item Label Nurodykite 40 šrifto dydį, kuris yra toks pat kaip etiketė. Jei norite parodyti daugiau pasirinkimų, galite juos padaryti šiek tiek mažesnius.

Net jei padidinsite šrifto dydį, vieno elemento rodymo dydis nepasikeis, todėl gali būti, kad nieko nematysite, net jei jį paleisite.

Elemento dydis

Tada nustatykite vieno elemento dydį. Pasirenkami objektai yra > > > >Dropdown . Content Item Template Viewport Nustatykite aukštį iki 72. Jei norite parodyti daugiau pasirinkimų, galite juos padaryti šiek tiek mažesnius.

Dėl to elemento elementai tampa matomi, tačiau dėl tam tikrų priežasčių pasirinkto elemento viršus ir apačia yra šiek tiek nukirpti, neatsižvelgiant į slinkimą.

Norėdami tai išspręsti, nustatykite > > >Dropdown Viewport ContentTemplate aukštį į Item 72, kuris yra toks pat kaip . Tai leis jums tinkamai matyti viršutinius ir apatinius elementus.

Beje, numatytuosiuose išskleidžiamuosiuose nustatymuose Item , aukštis yra šiek tiek didesnis nei Content . Dėl to virš ir žemiau pasirinkto elemento rodoma nedidelė paraštė, sumažinanti spaudimo jausmą.

Varnelės dydis

Varnelės dydis taip pat yra mažas, todėl aš jį pataisysiu. Tikslinis objektas yra "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Jei pakeisite plotį ir aukštį, varnelė taip pat padidės, todėl čia nustatykite ją į 72.

Kai jį paleidžiu, varnelė yra didesnė, tačiau padėtis neteisinga, todėl pataisysiu ir tai.

Item Checkmark Pirmiausia nustatykite pasukimą X į 0, tada nustatykite ir padėtį X į 0. Tai leidžia jums įdėti jį į gerą vietą, neatsižvelgiant į čekio ar etiketės dydį.

Be to, kadangi ji persidengia su etikete, pasirinkite, Item Lebel kad kairioji padėtis būtų tokia pati kaip varnelės dydis.

Slinkties juostos dydis

Slinkties juosta taip pat yra maža ir ją sunku spustelėti, todėl padarykite ją didesnę. Kiekvienas yra ypatingas dėl dydžio, todėl tai nėra kažkas, ką galima nustatyti. Šiuo atveju mes nustatome 48, tai yra 2/3 išskleidžiamojo aukščio.

Pasirenkamas objektas nustatomas į pločio reikšmę > >Dropdown Template Scrollbar.

Išskleidžiamosios piktogramos dydis

Jis nėra elemento pusėje, bet išskleidžiamoji piktograma vis dar maža, todėl ją pakeisiu. Pasirinktas objektas yra >Dropdown Arrow.

Kalbant apie piktogramos dydį, galite pakeisti dydį nustatydami plotį ir aukštį. Čia mes nustatėme jį į 72, kuris yra toks pat kaip išskleidžiamojo meniu.

Tokiu atveju padėtis bus išjungta, todėl nustatykite pasukimą X į 1 ir padėtį X į 0. Tai leidžia rodyti piktogramą gražioje vietoje, neatsižvelgiant į dydį.

Rodomų išplečiamųjų elementų skaičius

Padidinus elemento dydį, yra mažiau pasirinktų elementų, kuriuos galima rodyti vienu metu, todėl bandysime tai padidinti. Šis nustatymas nurodytas >Dropdown Template. Kadangi rodomų elementų skaičius nenurodytas pagal elementų skaičių, o dydis nustatomas pagal aukštį, nurodyta vertė yra "elementų aukštis × skaičius". Čia norime parodyti apie 10 vienetų, todėl 72 x 10 = 720 nustatykite .

Ekrano plotas yra padidintas, tačiau šiuo metu yra tik 3 elementai, todėl rodomi tik 3 elementai.

Nustatyti pažymėtą sritį

Pagal numatytuosius nustatymus nustatomi trys "A parinkties ~ C parinkties" elementai. Šie elementai yra Dropdown objekto Dropdown komponente .

Jei slinksite žemyn inspektorių, rasite elementą "Parinktys", kuriame galite laisvai pakeisti pavadinimą arba pridėti ar ištrinti.

Nustatyti pradinį pasirinkimą

Elementų pasirinkimas nustatomas pagal numerius. Dropdown Dropdown Galite nurodyti pradinį pasirinkimą objekto komponento vertėje. Elementų numeravimas prasideda nuo 0, todėl nustatykite 3, jei norite, kad ketvirtasis būtų pradinis pasirinkimas.

Apdorojimo atlikimas pasirenkant elementą

Galbūt norėsite ką nors padaryti, kai išskleidžiamajame meniu pasirinksite elementą. Tai galima įgyvendinti taip pat, kaip spustelėjus mygtuką.

Objektas turi išskleidžiamąjį meniu ir tekstą po vieną. Pasirinkę elementą išplečiamajame sąraše, įsitikinkite, kad turinys rodomas teksto objekte dešinėje. Nesvarbu, kas kita, išskyrus objektų išdėstymą, todėl galite jį nustatyti taip, kaip norite.

Pirmiausia sukurkite scenarijų savo projekte. DropdownItemSelector Šiuo atveju jis pavadintas .

Atidarykite scenarijų ir pridėkite kodą prie šių dalykų:

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

Įrašę scenarijų, pridėkite jį prie EventSystem objekto. Kaip paaiškinta mygtukų patarimuose, šis patarimas nuosekliai prideda scenarijus EventSystem , nebent tam yra konkreti priežastis.

Pridėkite išplečiamąjį objektą, kad gautumėte reikšmę, ir teksto objektą, kad nustatytumėte reikšmę.

Tada pasirinkite išplečiamąjį objektą, su kuriuo norite dirbti, ir inspektoriaus komponente Dropdown pridėkite "Dėl vertės pokyčio (Int32)".

Apatiniame kairiajame elemente turime įdėti objektą, prie kurio pridedamas valdomas scenarijus, todėl mes jį nustatėme čia EventSystem .

OnSelectionChanged Pasirinkite iš No Function DropdownItemSelector .

Pabandykite jį paleisti, kad pamatytumėte, ar jis veikia tinkamai.

Dinamiškas elementų įtraukimas

Galite nurodyti, kuriuos elementus galima pasirinkti redaktoriuje, tačiau gali būti atvejų, kai žaidimo metu būsena pasikeičia ir norite pakeisti pasirinktus elementus. Tokiu atveju pakeisite programoje pasirinktą elementą.

Objektas išdėsto "išskleidžiamąjį meniu" ir "mygtuką x2", kaip parodyta toliau. Galite laisvai nustatyti kitus parametrus nei lygiavimas.

Sukurkite scenarijų ir pavadinkite DropdownDynamic jį . Kodas turėtų atrodyti taip:

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 valdo pasirenkamus elementus, todėl Add galite dinamiškai valdyti elementus juos atlikdami arba Remove naudodami juos.

EventSystem Pridėkite scenarijus ir objektus prie .

Priskirkite metodą atitinkamai pridėjimo ir ištrynimo mygtukų paspaudimo įvykiui.

Baigę paleiskite jį. Jei elementas ištrinamas redaktoriuje, elementas nebus rodomas, net jei jį spustelėsite.

Jei keturis kartus spustelėsite pridėjimo mygtuką, pamatysite, kad buvo pridėti keturi elementai.

Jei du kartus spustelėsite ištrynimo mygtuką, pamatysite, kad buvo ištrinti du elementai.