Avattavan Unity-käyttöliittymä-valikon käyttäminen

Varmennusympäristö

Windows

• Windows 11

Unity-editori

• 2020.3.25F1

Tämän vinkin edellytykset

Seuraavat asetukset on tehty etukäteen edellytyksenä näiden vinkkien selittämiselle.

• Syöttöjärjestelmäpaketin esittely
• Kohdista kamera (2D) piirtoalueeseen

Alun perin

Avattavien valikoiden avulla käyttäjä voi valita yhden useista vaihtoehdoista. Vaikka valittavissa olisi monia kohteita, vain valitut kohteet näkyvät näytöllä, mikä on hyödyllistä tilan säästämiseksi ja helpottaa käyttäjän ymmärtämistä, mitä hän valitsee.

Avattavan valikon sijoittaminen

Valitse hierarkiasta avattava valikko lisätäksesi sen näkymään.

Säädä avattavan valikon sijainti harkintasi mukaan. Jos koko vaikuttaa pieneltä, suurenna kehystä vetämällä.

Jos haluat Dropdown määrittää sisällä olevan tekstin koon, valitse Se on sisällä Label eikä .

Kun suoritat sen, näet avattavan valikon toiminnassa. Alkutilassa valittavana on kolme kohdetta, joten voit vaihtaa valintaa. Jos kuitenkin muutat avattavan valikon kokoa tai Label fonttikokoa , se ei vastaa avattavassa valikossa näkyvän tekstin kokoa.

Avattavien kohteiden koon säätäminen

Jos et ole muuttanut objektin kokoa tai fonttikokoa, kun sijoitat avattavan valikon, sinun ei tarvitse tehdä tätä, mutta jos teet niin, sinun on määritettävä myös avattava valikko.

Avattava objekti sisältää määrityksen siitä, miten valittu kohde näytetään, kun se näytetään. Dropdown Template on näin. Jos et määritä muutamia asetuksia, se ei näytä kauniilta.

Ensinnäkin oletetaan, että sijoitetun avattavan valikon jokainen parametri asetetaan seuraavasti. Jos asetat eri parametreilla, korvaa numerot ja lue ne. Tässä esimerkissä määritetään myös muita parametreja, mutta ne jätetään pois, koska ne eivät liity avattaviin kohteisiin.

Kohteen fonttikoko

Muuta ensin kohteen fonttikokoa. Valitse objektille > > >Dropdown Template Content > > Viewport Item Item Label. Määritä fonttikooksi 40, joka on sama kuin Otsikko. Jos haluat näyttää enemmän vaihtoehtoja, voit pienentää niitä hieman.

Vaikka suurennat fonttikokoa, yhden kohteen näyttökoko ei muutu, joten et ehkä näe mitään, vaikka suoritat sen.

Kohteen koko

Aseta seuraavaksi yhden kohteen koko. Valittavissa olevat objektit ovat > > > >Dropdown . Content Item Template Viewport Aseta korkeudeksi 72. Jos haluat näyttää enemmän vaihtoehtoja, voit pienentää niitä hieman.

Tämä tekee kohteen elementeistä näkyviä, mutta jostain syystä valitun kohteen ylä- ja alaosa leikataan hieman vierityksestä riippumatta.

Voit korjata tämän asettamalla > > >Dropdown Viewport ContentTemplate Item korkeudeksi 72, joka on sama kuin . Näin voit nähdä ylä- ja alakohdat oikein.

Muuten, avattavissa oletusasetuksissa Item , korkeus on asetettu hieman suuremmaksi kuin Content . Tämän seurauksena valitun kohteen ylä- ja alapuolella näkyy pieni marginaali, mikä vähentää paineen tunnetta.

Valintamerkin koko

Valintamerkin koko on myös pieni, joten korjaan sen. Kohdeobjekti on "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Jos muutat leveyttä ja korkeutta, myös valintamerkki kasvaa, joten aseta se tässä arvoon 72.

Kun suoritan sen, valintamerkki on suurempi, mutta sijainti on väärä, joten korjaan myös tämän.

Item Checkmark Aseta ensin pivot X arvoon 0 ja aseta sitten myös sijainti X arvoon 0. Näin voit sijoittaa sen hyvään paikkaan sekin tai tarran koosta riippumatta.

Koska se menee päällekkäin selitteen kanssa, valitse tämä, Item Lebel jos haluat tehdä vasemmasta asennosta saman kuin valintamerkin koon.

Vierityspalkin koko

Vierityspalkki on myös pieni ja vaikea napsauttaa, joten suurenna sitä. Kaikki ovat tarkkoja koosta, joten sitä ei voida määrittää. Tässä tapauksessa asetamme 48, mikä on 2/3 avattavan valikon korkeudesta.

Valittavan objektin leveysarvoksi asetetaan >Dropdown Template > Scrollbar.

Avattavan kuvakkeen koko

Se ei ole kohteen puolella, mutta avattava kuvake on silti pieni, joten muutan sen. Valittava kohde on >Dropdown Arrow.

Mitä tulee kuvakkeen kokoon, voit muuttaa kokoa asettamalla leveyden ja korkeuden. Tässä asetamme sen arvoon 72, joka on sama kuin avattavan valikon korkeus.

Jos näin on, asento on pois päältä, joten aseta kääntö X arvoon 1 ja asento X arvoon 0. Näin voit näyttää kuvakkeen mukavassa paikassa koosta riippumatta.

Näytettävien avattavien kohteiden määrä

Lisäämällä kohteen kokoa on vähemmän valittuja kohteita, jotka voidaan näyttää kerralla, joten yritämme lisätä tätä. Tämä asetus on määritetty >Dropdown Template. Koska näytettävien kohteiden lukumäärää ei määritetä kohteiden lukumäärällä, vaan koko asetetaan korkeudella, määritetty arvo on "kohteiden korkeus × lukumäärä". Täällä haluamme näyttää noin 10 kappaletta, joten 72 x 10 = 720 aseta .

Näyttöaluetta suurennetaan, mutta tällä hetkellä kohteita on vain 3, joten vain 3 kohdetta näytetään.

Määritä valinta

Oletuksena asetetaan kolme "Vaihtoehto A ~ Vaihtoehto C" -kohdetta. Nämä kohteet sijaitsevat Dropdown objektin Dropdown komponentissa .

Jos vierität tarkastajaa alaspäin, löydät "Asetukset" -kohdan, jossa voit vapaasti muuttaa nimeä tai lisätä tai poistaa.

Määritä alkuperäinen valinta

Kohteiden valinta määräytyy numeroiden perusteella. Dropdown Dropdown Voit määrittää alkuperäisen valinnan objektin komponentin arvossa. Nimikenumerointi alkaa 0:sta, joten määritä 3, jos haluat, että neljäs on ensimmäinen valinta.

Käsittelyn suorittaminen kohdetta valittaessa

Haluat ehkä tehdä jotain, kun valitset kohteen avattavasta valikosta. Tämä voidaan toteuttaa samalla tavalla kuin nappia napsautettaessa.

Objektissa on avattava valikko ja teksti yksi kerrallaan. Kun olet valinnut kohteen avattavasta valikosta, varmista, että sisältö näkyy oikealla olevassa tekstiobjektissa. Sillä ei ole väliä muuta kuin objektien sijoittelu, joten voit määrittää sen haluamallasi tavalla.

Luo ensin komentosarja projektiisi. DropdownItemSelector Tässä tapauksessa sen nimi on .

Avaa komentosarja ja lisää koodi seuraaviin:

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

Kun olet tallentanut komentosarjan, liitä se objektiin EventSystem . Kuten painikkeiden vihjeissä selitetään, tämä vihje liittää komentosarjat EventSystem johdonmukaisesti, ellei siihen ole erityistä syytä.

Liitä avattava objekti, josta saat arvon, ja tekstiobjekti, jos haluat määrittää arvon.

Valitse seuraavaksi avattava objekti, jota haluat käsitellä, ja lisää "Arvon muutoksesta (Int32)" Inspektori-komponenttiin Dropdown .

Vasemmassa alakulmassa meidän on laitettava objekti, johon käytettävä komentosarja on liitetty, joten asetamme sen tähän EventSystem .

OnSelectionChanged Valitse Ei toimintoa DropdownItemSelector .

Yritä suorittaa se nähdäksesi, toimiiko se oikein.

Lisää kohteita dynaamisesti

Voit määrittää, mitkä kohteet voidaan valita editorissa, mutta joskus tila voi muuttua pelin aikana ja haluat muuttaa valitsemiasi kohteita. Tässä tapauksessa muutat ohjelmassa valittua kohdetta.

Objekti järjestää "avattavan valikon" ja "painikkeen x2" alla olevan kuvan mukaisesti. Voit vapaasti asettaa muita parametreja kuin kohdistuksen.

Luo komentosarja ja nimeä DropdownDynamic se . Koodin pitäisi näyttää tältä:

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 Hallitsee valittavia kohteita, joten Add voit hallita kohteita dynaamisesti tekemällä tai Remove niiden päällä.

EventSystem Liitä komentosarjoja ja objekteja .

Määritä menetelmä lisäys- ja poistopainikkeiden napsautustapahtumalle.

Kun olet valmis, suorita se. Jos kohde poistetaan editorissa, kohdetta ei näytetä, vaikka napsautat sitä.

Jos napsautat lisäyspainiketta neljä kertaa, näet, että neljä kohdetta on lisätty.

Jos napsautat poistopainiketta kahdesti, näet, että kaksi kohdetta on poistettu.