Brug af rullemenuen Unity UI

Side opdateret : onsdag den 27. december 2023

Dato for oprettelse af side : torsdag den 24. marts 2022

Miljø til bekræftelse

Windows

Windows 11

Enhedslistens redaktør

2020.3.25f1

Forudsætninger for dette tip

Følgende indstillinger er foretaget på forhånd som en forudsætning for forklaringen af disse tip.

Først

Rullemenuer kan bruges til at give brugeren mulighed for at vælge et af flere valg. Selvom der er mange elementer at vælge imellem, vises kun de valgte elementer på skærmen, hvilket er nyttigt for at spare plads og gør det lettere for brugeren at forstå, hvad de vælger.

Placer en rullemenu

Vælg en "rullemenu" i hierarkiet for at føje den til visningen.

Juster placeringen af rullemenuen efter eget skøn. Hvis størrelsen virker lille, skal du trække rammen for at gøre den større.

Hvis du vil indstille størrelsen på teksten indeni, skal du Dropdown vælge Den er indeni Label i stedet for .

Når du kører det, kan du se rullemenuen i aktion. I den oprindelige tilstand er der tre elementer at vælge imellem, så du kan skifte valg. Men hvis du ændrer størrelsen på rullemenuen eller Label skriftstørrelsen på , svarer den ikke til størrelsen på den tekst, der vises på rullelisten.

Juster størrelsen på rullelister

Hvis du ikke har ændret størrelsen på objektet eller skriftstørrelsen, når du placerer rullemenuen, behøver du ikke gøre dette, men hvis du gør det, skal du også indstille rullemenuen.

Rullelisten indeholder en definition af, hvordan det valgte element vises, når det vises. Dropdown Template er tilfældet. Hvis du ikke indstiller et par indstillinger, ser det ikke smukt ud.

Først og fremmest antages det, at hver parameter i den placerede rullemenu er indstillet som følger. Hvis du indstiller med forskellige parametre, skal du udskifte tallene og læse dem. I dette eksempel angives der også andre parametre, men de udelades, fordi de ikke er relateret til rullelisterne.

Værdi for		objektparameternavn
Rullemenu	højde	72
Rullemenu > etiket	Skrifttypestørrelse	40

Skriftstørrelse for element

Først skal du ændre skriftstørrelsen på elementet. Vælg > > >Dropdown Template Content > > Viewport Item Item Labeltil objektet. Angiv en skriftstørrelse på 40, hvilket er det samme som Etiket. Hvis du vil vise flere valg, kan du gøre dem lidt mindre.

Selvom du øger skriftstørrelsen, ændres visningsstørrelsen på et element ikke, så du kan muligvis ikke se noget, selvom du kører det.

Varestørrelse

Indstil derefter størrelsen på et element. De objekter, der skal vælges, er > >Dropdown Template Viewport > > . Content Item Indstil højden til 72. Hvis du vil vise flere valg, kan du gøre dem lidt mindre.

Dette gør elementerne i elementet synlige, men af en eller anden grund skæres toppen og bunden af det valgte element lidt af uanset rulning.

For at løse dette skal du indstille højden på > > >Dropdown Viewport ContentTemplate til Item 72, hvilket er det samme som . Dette giver dig mulighed for at se de øverste og nederste elementer korrekt.

Forresten, i standard rullemenuer Item , højden af er indstillet lidt større end Content . Som et resultat vises en lille margen over og under det valgte element, hvilket reducerer følelsen af tryk.

Størrelse på flueben

Størrelsen på fluebenet er også lille, så jeg ordner det. Målobjektet er "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Hvis du ændrer bredden og højden, øges markeringen også, så indstil den til 72 her.

Når jeg kører det, er fluebenet større, men positionen er forkert, så jeg vil også rette dette.

Item Checkmark Indstil først pivot X til 0, og indstil derefter også positionen X til 0. Dette giver dig mulighed for at placere det et godt sted uanset størrelsen på checken eller etiketten.

Da den overlapper etiketten, Item Lebel skal du også vælge at gøre venstre position den samme som størrelsen på markeringen.

Rullepanel størrelse

Rullepanelet er også lille og svært at klikke på, så gør det større. Alle er specielle omkring størrelsen, så det er ikke noget, der kan bestemmes. I dette tilfælde indstiller vi 48, hvilket er 2/3 af rullemenuens højde.

Det objekt, der skal markeres, indstilles til en breddeværdi i >Dropdown Template > Scrollbar.

Størrelse på rullemenu ikon

Det er ikke på elementsiden, men rullemenuen er stadig lille, så jeg ændrer det. Det objekt, der skal vælges, er >Dropdown Arrow.

Hvad angår ikonets størrelse, kan du ændre størrelsen ved at indstille bredden og højden. Her indstiller vi den til 72, hvilket er det samme som rullemenuens højde.

Hvis dette er tilfældet, vil positionen være slukket, så indstil pivot X til 1 og positionen X til 0. Dette giver dig mulighed for at vise ikonet i en god position uanset størrelse.

Antal viste rullemenuer

Ved at øge varens størrelse er der færre valgte elementer, der kan vises ad gangen, så vi vil forsøge at øge dette. Denne indstilling er angivet i >Dropdown Template. Da antallet af elementer, der skal vises, ikke er angivet af antallet af elementer, men størrelsen er indstillet efter højde, er den angivne værdi "højden × antallet af elementer". Her vil vi vise omkring 10 stykker, så 72 x 10 = 720 sæt .

Displayområdet er forstørret, men i øjeblikket er der kun 3 elementer, så kun 3 elementer vises.

Angive markeringen

Som standard er tre elementer af "Option A ~ Option C" indstillet. Disse elementer er Dropdown placeret i objektets Dropdown komponent .

Hvis du ruller ned i inspektøren, finder du elementet "Indstillinger", hvor du frit kan ændre navnet eller tilføje eller slette.

Angive det indledende valg

Valget af varer bestemmes af tal. Dropdown Dropdown Du kan angive den oprindelige markering i værdien af objektets komponent. Varenummerering starter ved 0, så indstil 3, hvis du ønsker, at den fjerde skal være det første valg.

Udfør behandling, når du vælger et element

Det kan være en god idé at gøre noget, når du vælger et element i rullemenuen. Dette kan implementeres på samme måde, som når der klikkes på en knap.

Objektet har en rullemenu og en tekst én ad gangen. Når du har valgt et element på rullelisten, skal du sørge for, at indholdet vises i et tekstobjekt til højre. Det betyder ikke noget andet end placeringen af objekterne, så du kan konfigurere det, som du vil.

Opret først et script i dit projekt. DropdownItemSelector I dette tilfælde hedder det .

Åbn scriptet, og føj koden til følgende:

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

Når du har gemt scriptet, skal du vedhæfte det til objektet EventSystem . Som forklaret i tip til knapper vedhæfter dette tip konsekvent scripts EventSystem til, medmindre der er en særlig grund til at gøre det.

Vedhæft et rullemenuobjekt for at hente værdien fra og et tekstobjekt for at indstille værdien.

Vælg derefter det rullelisteobjekt, du vil arbejde med, og tilføj "Ved værdiændring (Int32)" i inspektionskomponenten Dropdown .

I nederste venstre element skal vi sætte det objekt, som scriptet, der skal betjenes, er vedhæftet, så vi indstiller det her EventSystem .

Vælg af OnSelectionChanged fra Ingen funktion DropdownItemSelector .

Prøv at køre det for at se, om det fungerer korrekt.

Tilføj elementer dynamisk

Du kan angive, hvilke elementer der kan vælges i editoren, men der kan være tidspunkter, hvor tilstanden ændres under spillet, og du vil ændre de elementer, du vælger. I dette tilfælde ændrer du det valgte element i programmet.

Objektet arrangerer "drop-down" og "knap x2" som vist nedenfor. Du kan frit indstille andre parametre end justering.

Opret et script og navngiv DropdownDynamic det . Koden skal se sådan ud:

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 har kontrol over de elementer, der skal vælges, så Add du dynamisk kan styre elementerne ved at udføre eller Remove på dem.

EventSystem Vedhæft scripts og objekter til .

Tildel en metode til klikhændelsen for henholdsvis knapperne Tilføj og Slet.

Når du er færdig, skal du køre den. Hvis elementet slettes i editoren, vises elementet ikke, selvom du klikker på det.

Hvis du klikker på knappen Tilføj fire gange, kan du se, at fire elementer er blevet tilføjet.

Hvis du klikker på knappen Slet to gange, kan du se, at to elementer er blevet slettet.

Brug af knapper i Unity-brugergrænsefladen

Rul, så det valgte element vises øverst på listen over rullelister