Unity UI nolaižamās izvēlnes izmantošana

Verifikācijas vide

Windows

• Operētājsistēmā Windows 11

Vienotības redaktors

• 2020.3.25f1

Priekšnoteikumi šim padomam

Tālāk norādītie iestatījumi ir veikti iepriekš kā priekšnoteikums šo padomu izskaidrošanai.

• Ievades sistēmas paketes ieviešana
• Izlīdziniet kameru (2D) ar audeklu

Sākumā

Nolaižamās izvēlnes var izmantot, lai lietotājs varētu izvēlēties vienu no vairākām izvēlēm. Pat ja ir daudz vienumu, no kuriem izvēlēties, ekrānā tiek parādīti tikai atlasītie vienumi, kas ir noderīgi, lai ietaupītu vietu un ļautu lietotājam vieglāk saprast, ko viņi izvēlas.

Nolaižamā saraksta novietošana

Hierarhijā atlasiet nolaižamo izvēlni, lai to pievienotu skatam.

Pielāgojiet nolaižamās izvēlnes pozīciju pēc saviem ieskatiem. Ja izmērs šķiet mazs, velciet rāmi, lai tas būtu lielāks.

Lai Dropdown iestatītu iekšpusē esošā teksta lielumu, atlasiet Tas atrodas iekšpusē Label , nevis .

Palaižot to, jūs varat redzēt nolaižamo izvēlni darbībā. Sākotnējā stāvoklī ir trīs vienumi, no kuriem izvēlēties, lai jūs varētu pārslēgt atlasi. Tomēr, ja maināt nolaižamās izvēlnes lielumu vai Label fonta lielumu , tas neatbilst nolaižamajā izvēlnē redzamā teksta lielumam.

Nolaižamo elementu lieluma pielāgošana

Ja, novietojot nolaižamo izvēlni, neesat mainījis objekta lielumu vai fonta lielumu, tas nav jādara, bet, ja to darāt, ir jāiestata arī nolaižamais vienums.

Nolaižamais objekts satur definīciju par to, kā atlasītais vienums tiek parādīts, kad tas tiek parādīts. Dropdown Template ir tā ir. Ja neiestatīsit dažus iestatījumus, tas neizskatīsies glīti.

Pirmkārt, tiek pieņemts, ka katrs novietotās nolaižamās izvēlnes parametrs ir iestatīts šādi. Ja iestatāt ar dažādiem parametriem, nomainiet skaitļus un izlasiet tos. Šajā piemērā ir iestatīti arī citi parametri, bet tie tiek izlaisti, jo tie nav saistīti ar nolaižamajiem elementiem.

Vienuma fonta lielums

Vispirms mainiet vienuma fonta lielumu. Atlasiet > > >Dropdown Template Content objekta > >. Viewport Item Item Label Norādiet fonta lielumu 40, kas ir tāds pats kā Label. Ja vēlaties parādīt vairāk izvēles iespēju, varat tās padarīt nedaudz mazākas.

Pat ja palielināsit fonta lielumu, viena vienuma displeja lielums nemainās, tāpēc, iespējams, nevarēsit redzēt neko pat tad, ja to palaidīsit.

Vienuma lielums

Pēc tam iestatiet viena vienuma lielumu. Atlasāmie objekti ir > >Dropdown Template Viewport > > . Content Item Iestatiet augstumu uz 72. Ja vēlaties parādīt vairāk izvēles iespēju, varat tās padarīt nedaudz mazākas.

Tas padara vienuma elementus redzamus, bet kāda iemesla dēļ atlasītā vienuma augšdaļa un apakša tiek nedaudz nogriezti neatkarīgi no ritināšanas.

Lai to labotu, iestatiet > > >Dropdown Viewport ContentTemplate augstumu uz Item 72, kas ir tāds pats kā . Tas ļaus jums pareizi redzēt augšējos un apakšējos priekšmetus.

Starp citu, noklusējuma nolaižamajos iestatījumos Item augstums ir iestatīts nedaudz lielāks par Content . Tā rezultātā virs un zem izvēlētā vienuma tiek parādīta neliela rezerve, samazinot spiediena sajūtu.

Atzīmes lielums

Arī atzīmes izmērs ir mazs, tāpēc es to izlabošu. Mērķa objekts ir "> > Viewport > > > Item CheckmarkContent Item Template ".Dropdown

Ja maināt platumu un augstumu, atzīme arī palielināsies, tāpēc šeit iestatiet to uz 72.

Kad es to palaižu, atzīme ir lielāka, bet pozīcija ir nepareiza, tāpēc es arī to izlabošu.

Item Checkmark Vispirms iestatiet pagriezienu X uz 0 un pēc tam iestatiet arī pozīciju X uz 0. Tas ļauj to novietot labā vietā neatkarīgi no čeka vai etiķetes lieluma.

Turklāt, tā kā tā pārklājas ar etiķeti, atlasiet, Item Lebel lai kreisā pozīcija būtu tāda pati kā atzīmes lielums.

Ritjoslas izmērs

Arī ritjosla ir maza un uz tās ir grūti noklikšķināt, tāpēc palieliniet to. Ikviens ir īpašs par izmēru, tāpēc tas nav kaut kas, ko var noteikt. Šajā gadījumā mēs iestatām 48, kas ir 2/3 no nolaižamā augstuma.

Atlasāmais objekts ir iestatīts uz platuma vērtību > >Dropdown Template Scrollbar.

Nolaižamās ikonas izmērs

Tas nav vienuma pusē, bet nolaižamā izvēlnes ikona joprojām ir maza, tāpēc es to mainīšu. Atlasāmais objekts ir >Dropdown Arrow.

Kas attiecas uz ikonas izmēru, izmēru var mainīt, iestatot platumu un augstumu. Šeit mēs to iestatām uz 72, kas ir tāds pats kā nolaižamās nolaižamās vietas augstums.

Šādā gadījumā pozīcija būs izslēgta, tāpēc iestatiet pagriezienu X uz 1 un pozīciju X uz 0. Tas ļauj parādīt ikonu jaukā stāvoklī neatkarīgi no izmēra.

Parādīto nolaižamo vienumu skaits

Palielinot vienuma lielumu, ir mazāk atlasīto vienumu, kurus var parādīt vienā reizē, tāpēc mēs centīsimies to palielināt. Šis iestatījums ir norādīts >Dropdown Template. Tā kā parādāmo vienumu skaits nav norādīts pēc vienumu skaita, bet lielums tiek iestatīts pēc augstuma, norādītā vērtība ir "augstums × vienumu skaits". Šeit mēs vēlamies parādīt apmēram 10 gabalus, tāpēc 72 x 10 = 720 iestatiet .

Displeja laukums ir palielināts, bet šobrīd ir tikai 3 vienumi, tāpēc tiek parādīti tikai 3 vienumi.

Atlases iestatīšana

Pēc noklusējuma ir iestatīti trīs vienumi "Opcija A ~ Opcija C". Šie priekšmeti atrodas Dropdown objekta Dropdown sastāvdaļā .

Ja ritiniet uz leju inspektoru, jūs atradīsiet vienumu "Opcijas", kur varat brīvi mainīt nosaukumu vai pievienot vai dzēst.

Sākotnējās atlases iestatīšana

Vienumu izvēli nosaka skaitļi. Dropdown Dropdown Sākotnējo atlasi var norādīt objekta komponenta vērtībā. Krājumu numerācija sākas ar 0, tāpēc iestatiet 3, ja vēlaties, lai ceturtā būtu sākotnējā atlase.

Apstrādes veikšana, atlasot vienumu

Iespējams, vēlēsities kaut ko darīt, atlasot vienumu nolaižamajā izvēlnē. To var īstenot tāpat kā noklikšķinot uz pogas.

Objektam pa vienam ir nolaižamais saraksts un teksts. Pēc vienuma atlasīšanas nolaižamajā izvēlnē pārliecinieties, vai saturs tiek parādīts teksta objektā labajā pusē. Tam nav nozīmes nekas cits kā objektu izvietojums, tāpēc varat to iestatīt, kā vēlaties.

Vispirms izveidojiet skriptu savā projektā. DropdownItemSelector Šajā gadījumā tas ir nosaukts .

Atveriet skriptu un pievienojiet kodu šādiem elementiem:

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

Pēc skripta saglabāšanas pievienojiet to EventSystem objektam. Kā paskaidrots pogu padomos, šis padoms konsekventi pievieno skriptus EventSystem , ja vien nav īpaša iemesla to darīt.

Pievienojiet nolaižamo objektu, lai iegūtu vērtību no, un teksta objektu, lai iestatītu vērtību.

Pēc tam atlasiet nolaižamo objektu, ar kuru vēlaties strādāt, un inspektora Dropdown komponentā pievienojiet "On Value Change (Int32)".

Apakšējā kreisajā vienumā mums ir jāievieto objekts, kuram ir pievienots izmantojamais skripts, tāpēc mēs to iestatām šeit EventSystem .

Atlasiet no OnSelectionChanged funkcijas Bez funkcijas DropdownItemSelector .

Mēģiniet to palaist, lai redzētu, vai tas darbojas pareizi.

Dinamiska vienumu pievienošana

Jūs varat norādīt, kurus vienumus var atlasīt redaktorā, taču var būt reizes, kad spēles laikā mainās stāvoklis un vēlaties mainīt atlasītos vienumus. Šādā gadījumā jūs mainīsit programmā atlasīto vienumu.

Objekts sakārto "nolaižamo izvēlni" un "pogu x2", kā parādīts zemāk. Varat brīvi iestatīt parametrus, kas nav līdzināšana.

Izveidojiet skriptu un piešķiriet tam nosaukumu DropdownDynamic . Kodam vajadzētu izskatīties šādi:

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 kontrolē atlasāmos vienumus, lai Add jūs varētu dinamiski kontrolēt vienumus, veicot darbības vai Remove uzņemot tos.

EventSystem Pievienojiet skriptus un objektus .

Piešķiriet metodi attiecīgi pievienošanas un dzēšanas pogu klikšķu notikumam.

Kad esat pabeidzis, palaidiet to. Ja vienums tiek izdzēsts redaktorā, vienums netiks parādīts pat tad, ja noklikšķināsit uz tā.

Ja četras reizes noklikšķināt uz pogas Pievienot, var redzēt, ka ir pievienoti četri vienumi.

Ja divreiz noklikšķināt uz dzēšanas pogas, var redzēt, ka divi vienumi ir izdzēsti.