Unity UI rippmenüü kasutamine

Kontrollimise keskkond

Windows

• Windows 11

Ühtsuse toimetaja

• 2020.3.25f1

Selle näpunäite eeltingimused

Nende näpunäidete selgitamise eeltingimuseks on eelnevalt tehtud järgmised seadistused.

• Sisendsüsteemi paketi tutvustus
• Joondage kaamera (2D) lõuendiga

Alguses

Rippmenüüsid saab kasutada selleks, et võimaldada kasutajal valida üks mitmest valikust. Isegi kui valida on paljude üksuste vahel, kuvatakse ekraanil ainult valitud üksused, mis on kasulik ruumi säästmiseks ja hõlbustab kasutajal mõista, mida nad valivad.

Rippmenüü paigutamine

Valige hierarhiast rippmenüü, et see vaatesse lisada.

Kohandage rippmenüü asukohta oma äranägemise järgi. Kui suurus tundub väike, lohistage raami, et muuta see suuremaks.

Siseteksti suuruse määramiseks Dropdown valige .Label

Kui käivitate selle, näete ripploendit tegevuses. Esialgses olekus on valida kolme üksuse vahel, nii et saate valikut vahetada. Kui aga muudate rippmenüü suurust või Label fondi suurust , ei vasta see rippmenüüs kuvatava teksti suurusele.

Rippmenüüde suuruse reguleerimine

Kui te pole rippmenüü paigutamisel objekti suurust ega fondi suurust muutnud, ei pea te seda tegema, kuid kui te seda teete, peate määrama ka rippmenüü.

Rippobjekt sisaldab määratlust selle kohta, kuidas valitud üksust kuvatakse. Dropdown Template on nii. Kui te mõnda sätet ei määra, ei näe see ilus välja.

Kõigepealt eeldatakse, et paigutatud rippmenüü iga parameeter on määratud järgmiselt. Kui seadistate erinevaid parameetreid, asendage numbrid ja lugege neid. Selles näites on määratud ka muud parameetrid, kuid need jäetakse välja, kuna need pole rippmenüüga seotud.

Üksuse fondi suurus

Esmalt muutke üksuse fondi suurust. Valige objekti > > >Dropdown Template Content > > Viewport Item Item Label. Määrake fondi suuruseks 40, mis on sama mis Silt. Kui soovite näidata rohkem valikuid, saate neid veidi väiksemaks muuta.

Isegi kui suurendate fondi suurust, ei muutu ühe üksuse kuvamissuurus, nii et isegi kui käivitate selle, ei pruugi te midagi näha.

Üksuse suurus

Seejärel määrake ühe üksuse suurus. Valitavad objektid on > > > >Dropdown Template . Content Item Viewport Seadke kõrguseks 72. Kui soovite näidata rohkem valikuid, saate neid veidi väiksemaks muuta.

See muudab üksuse elemendid nähtavaks, kuid mingil põhjusel lõigatakse valitud elemendi ülemine ja alumine osa kerimisest hoolimata veidi ära.

Selle parandamiseks seadke > > >Dropdown Viewport ContentTemplate kõrgus 72-leItem, mis on sama mis . See võimaldab teil ülemist ja alumist elementi korralikult näha.

Muide, vaikimisi rippmenüü seadetes Item on kõrgus seatud veidi suuremaks kui Content . Selle tulemusena kuvatakse valitud elemendi kohal ja all väike varu, mis vähendab survetunnet.

Linnukese suurus

Linnukese suurus on samuti väike, nii et ma parandan selle. Sihtobjekt on "> > Viewport > > > Item CheckmarkContent Item Template ".Dropdown

Kui muudate laiust ja kõrgust, suureneb ka märk, nii et seadke see siin väärtusele 72.

Kui ma seda käivitan, on linnuke suurem, kuid positsioon on vale, nii et ma parandan ka selle.

Item Checkmark Kõigepealt seadke pöördepunkt X väärtuseks 0 ja seejärel seadke ka positsioon X väärtuseks 0. See võimaldab teil paigutada selle heasse kohta, olenemata tšeki või sildi suurusest.

Kuna see kattub sildiga, valige ka see, Item Lebel et vasakpoolne asend oleks sama mis märke suurus.

Kerimisriba suurus

Kerimisriba on samuti väike ja seda on raske klõpsata, nii et muutke see suuremaks. Igaüks on suuruse poolest eriline, nii et seda ei saa kindlaks teha. Sel juhul seadsime 48, mis on 2/3 rippmenüü kõrgusest.

Valitavale objektile seatakse laiuse väärtus > >Dropdown Template Scrollbar.

Ikoonide rippmenüü suurus

See pole üksuse poolel, kuid rippmenüü ikoon on endiselt väike, nii et ma muudan seda. Valitav objekt on >Dropdown Arrow.

Ikooni suuruse osas saate suurust muuta, määrates laiuse ja kõrguse. Siin seadsime selle väärtusele 72, mis on sama, mis rippmenüü kõrgus.

Sellisel juhul on asend välja lülitatud, nii et seadke pöördepunkt X väärtuseks 1 ja positsioon X väärtuseks 0. See võimaldab teil ikooni kuvada kenas asendis, olenemata suurusest.

Kuvatud ripploendite arv

Üksuse suuruse suurendamisega on vähem valitud üksusi, mida saab korraga kuvada, seega püüame seda suurendada. See säte on määratud >Dropdown Template. Kuna kuvatavate üksuste arvu ei määra üksuste arv, vaid suurus määratakse kõrguse järgi, on määratud väärtus "üksuste kõrgus × arv". Siin tahame kuvada umbes 10 tükki, nii et 72 x 10 = 720 seadistage .

Kuvamisala on suurendatud, kuid hetkel on ainult 3 üksust, seega kuvatakse ainult 3 üksust.

Valiku määramine

Vaikimisi on määratud kolm elementi "Variant A ~ Variant C". Need üksused asuvad Dropdown objekti Dropdown komponendis .

Kui kerite inspektorit alla, leiate elemendi "Valikud", kus saate nime vabalt muuta või lisada või kustutada.

Esialgse valiku määramine

Üksuste valik määratakse numbritega. Dropdown Dropdown Saate määrata objekti komponendi väärtuse esialgse valiku. Kaubanummerdus algab 0-st, seega määrake 3, kui soovite, et neljas oleks esialgne valik.

Üksuse valimisel tehke töötlemine

Võib-olla soovite midagi teha, kui valite rippmenüüst üksuse. Seda saab rakendada samamoodi nagu nupu klõpsamisel.

Objektil on rippmenüü ja tekst ükshaaval. Pärast rippmenüüst üksuse valimist veenduge, et sisu kuvatakse paremal asuvas tekstiobjektis. See ei ole oluline midagi muud kui objektide paigutus, nii et saate selle seadistada nii, nagu soovite.

Esmalt looge oma projektis skript. DropdownItemSelector Sel juhul nimetatakse seda .

Avage skript ja lisage kood järgmisele:

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ärast skripti salvestamist lisage see objektile EventSystem . Nagu on selgitatud nuppude näpunäidetes, lisab see näpunäide järjekindlalt skripte EventSystem , välja arvatud juhul, kui selleks on konkreetne põhjus.

Lisage rippobjekt väärtuse saamiseks ja tekstiobjekt väärtuse määramiseks.

Seejärel valige rippmenüü objekt, millega soovite töötada, ja lisage inspektori komponenti Dropdown "Väärtuse muutmisel (Int32)".

Vasakus alumises elemendis peame panema objekti, millele on lisatud kasutatav skript, nii et me seadsime selle siia EventSystem .

Valige suvand OnSelectionChanged funktsioonita DropdownItemSelector .

Proovige seda käivitada, et näha, kas see töötab korralikult.

Üksuste dünaamiline lisamine

Saate määrata, milliseid üksusi saab redaktoris valida, kuid võib juhtuda, et olek muutub mängu ajal ja soovite valitud üksusi muuta. Sellisel juhul muudate programmis valitud üksust.

Objekt korraldab "rippmenüü" ja "nupu x2", nagu allpool näidatud. Saate vabalt määrata muid parameetreid kui joondamine.

Looge skript ja pange sellele nimi DropdownDynamic . Kood peaks välja nägema selline:

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 omab kontrolli valitavate üksuste üle, nii et Add saate üksusi dünaamiliselt juhtida neid tehes või Remove nende peal.

EventSystem Skriptide ja objektide manustamine saidile .

Määrake meetod vastavalt lisamis- ja kustutamisnuppude klõpsamissündmusele.

Kui olete lõpetanud, käivitage see. Kui üksus redaktoris kustutatakse, ei kuvata üksust isegi siis, kui klõpsate seda.

Kui klõpsate lisamisnuppu neli korda, näete, et lisatud on neli üksust.

Kui klõpsate kaks korda kustutamisnuppu, näete, et kaks üksust on kustutatud.