De vervolgkeuzelijst Unity UI gebruiken

Verificatie omgeving

Ramen

• Vensters 11

Unity-editor

• 2020.3.25f1

Vereisten voor deze tip

De volgende instellingen zijn vooraf gemaakt als voorwaarde voor de uitleg van deze tips.

• Introductie van het Input System Package
• Lijn de camera (2D) uit met het canvas

Eerst

Vervolgkeuzelijsten kunnen worden gebruikt om de gebruiker in staat te stellen een van de verschillende keuzes te selecteren. Zelfs als er veel items zijn om uit te kiezen, worden alleen de geselecteerde items op het scherm weergegeven, wat handig is om ruimte te besparen en het voor de gebruiker gemakkelijker maakt om te begrijpen wat hij selecteert.

Een vervolgkeuzelijst plaatsen

Selecteer een "dropdown" uit de hiërarchie om deze toe te voegen aan de weergave.

Pas de positie van de vervolgkeuzelijst naar eigen inzicht aan. Als het formaat klein lijkt, sleept u het kader om het groter te maken.

Als u de grootte van de tekst in wilt instellen, selecteert u Dropdown Het is binnen Label in plaats van .

Wanneer u het uitvoert, kunt u de vervolgkeuzelijst in actie zien. In de begintoestand zijn er drie items om uit te kiezen, zodat u de selectie kunt wijzigen. Als u echter de grootte van de vervolgkeuzelijst of Label de lettergrootte van wijzigt, komt deze niet overeen met de grootte van de tekst die in de vervolgkeuzelijst wordt weergegeven.

De grootte van vervolgkeuzemenu-items aanpassen

Als u de grootte van het object of de lettergrootte niet hebt gewijzigd wanneer u de vervolgkeuzelijst plaatst, hoeft u dit niet te doen, maar als u dat wel doet, moet u ook het vervolgkeuzemenu instellen.

Het vervolgkeuzeobject bevat een definitie van hoe het geselecteerde item wordt weergegeven wanneer het wordt weergegeven. Dropdown Template is het geval. Als je niet een paar instellingen instelt, ziet het er niet mooi uit.

Allereerst wordt aangenomen dat elke parameter van de geplaatste drop-down als volgt is ingesteld. Als u met andere parameters instelt, vervangt u de cijfers en leest u ze af. In dit voorbeeld worden ook andere parameters ingesteld, maar deze worden weggelaten omdat ze niet gerelateerd zijn aan de vervolgkeuzelijstitems.

Lettergrootte van item

Wijzig eerst de lettergrootte van het item. Selecteer > > >Dropdown Template Content > > Viewport Item Item Labelvoor het object. Geef een lettergrootte van 40 op, wat hetzelfde is als Label. Als je meer keuzes wilt laten zien, kun je ze iets kleiner maken.

Zelfs als u de lettergrootte vergroot, verandert de weergavegrootte van een item niet, dus het is mogelijk dat u niets kunt zien, zelfs niet als u het uitvoert.

Item Grootte

Stel vervolgens de grootte van één item in. De objecten die u wilt selecteren, zijn > > > >Dropdown . Content Item Template Viewport Stel de hoogte in op 72. Als je meer keuzes wilt laten zien, kun je ze iets kleiner maken.

Hierdoor worden de elementen van het item zichtbaar, maar om de een of andere reden worden de boven- en onderkant van het geselecteerde item een beetje afgesneden, ongeacht het scrollen.

Om dit op te lossen, stelt u de hoogte van > > >Dropdown Viewport ContentTemplate in op Item 72, wat hetzelfde is als . Hierdoor kunt u de bovenste en onderste items goed zien.

Trouwens, in de standaard drop-down instellingen Item , is de hoogte van iets groter ingesteld dan Content . Als gevolg hiervan wordt een kleine marge boven en onder het geselecteerde item weergegeven, waardoor het gevoel van druk wordt verminderd.

Grootte vinkje

De grootte van het vinkje is ook klein, dus ik zal het oplossen. Het doelobject is "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Als je de breedte en hoogte wijzigt, wordt het vinkje ook groter, dus zet het hier op 72.

Als ik het uitvoer, is het vinkje groter, maar de positie is verkeerd, dus ik zal dit ook oplossen.

Item Checkmark Zet eerst het draaipunt X op 0 en vervolgens ook de stand X op 0. Hierdoor kun je hem op een goede plek plaatsen, ongeacht de grootte van de ruit of het label.

Omdat het het label overlapt, Item Lebel selecteert u ook om de linkerpositie hetzelfde te maken als de grootte van het vinkje.

Grootte schuifbalk

De schuifbalk is ook klein en moeilijk aan te klikken, dus maak hem groter. Iedereen is kieskeurig over de grootte, dus het is niet iets dat kan worden bepaald. In dit geval stellen we 48 in, wat 2/3 van de hoogte van de dropdown is.

Het te selecteren object wordt ingesteld op een breedtewaarde in > >Dropdown Template Scrollbar.

Grootte van het vervolgkeuzepictogram

Het staat niet aan de itemkant, maar het vervolgkeuzepictogram is nog steeds klein, dus ik zal het wijzigen. Het te selecteren object is >Dropdown Arrow.

Wat betreft de grootte van het pictogram, u kunt de grootte wijzigen door de breedte en hoogte in te stellen. Hier stellen we het in op 72, wat hetzelfde is als de hoogte van de vervolgkeuzelijst.

Als dit het geval is, is de positie uitgeschakeld, dus zet de pivot X op 1 en de positie X op 0. Hierdoor kunt u het pictogram op een mooie positie weergeven, ongeacht de grootte.

Aantal weergegeven vervolgkeuzemenu-items

Door de grootte van het item te vergroten, zijn er minder geselecteerde items die in één keer kunnen worden weergegeven, dus we zullen proberen dit te vergroten. Deze instelling is gespecificeerd in >Dropdown Template. Aangezien het aantal weer te geven items niet wordt gespecificeerd door het aantal items, maar de grootte wordt ingesteld door de hoogte, is de opgegeven waarde "de hoogte × het aantal items". Hier willen we ongeveer 10 stuks tentoonstellen, dus 72 x 10 = 720 set .

Het weergavegebied is vergroot, maar op dit moment zijn er slechts 3 items, dus er worden slechts 3 items weergegeven.

Stel de selectie in

Standaard zijn drie items van "Optie A ~ Optie C" ingesteld. Deze items bevinden Dropdown zich in de component van het object Dropdown .

Als u naar beneden scrolt in het infovenster, vindt u het item "Opties", waar u de naam vrij kunt wijzigen of kunt toevoegen of verwijderen.

Stel de eerste selectie in

De selectie van artikelen wordt bepaald door nummers. Dropdown Dropdown U kunt de eerste selectie opgeven in de waarde van de component van het object. De artikelnummering begint bij 0, dus stel 3 in als u wilt dat de vierde de eerste selectie is.

Verwerking uitvoeren bij het selecteren van een item

Misschien wilt u iets doen wanneer u een item in de vervolgkeuzelijst selecteert. Dit kan op dezelfde manier worden geïmplementeerd als wanneer er op een knop wordt geklikt.

Het object heeft een vervolgkeuzelijst en een tekst één voor één. Nadat u een item in de vervolgkeuzelijst hebt geselecteerd, moet u ervoor zorgen dat de inhoud wordt weergegeven in een tekstobject aan de rechterkant. Het maakt niets anders uit dan de plaatsing van de objecten, dus je kunt het instellen zoals je wilt.

Maak eerst een script in uw project. DropdownItemSelector In dit geval heet het .

Open het script en voeg de code toe aan het volgende:

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

Nadat u het script hebt opgeslagen, koppelt u het aan het EventSystem object. Zoals uitgelegd in de Tips voor knoppen, worden met deze tip consequent scripts EventSystem gekoppeld, tenzij er een specifieke reden is om dit te doen.

Voeg een vervolgkeuzeobject toe om de waarde op te halen en een tekstobject om de waarde in te stellen.

Selecteer vervolgens het dropdown-object waarmee u wilt werken en voeg "On Value Change (Int32)" toe in de Dropdown component Inspector.

In het item linksonder moeten we het object plaatsen waaraan het te bedienen script is gekoppeld, dus we stellen het hier EventSystem in .

Selecteer uit OnSelectionChanged Geen functie DropdownItemSelector .

Probeer het uit te voeren om te zien of het goed werkt.

Dynamisch items toevoegen

Je kunt in de editor aangeven welke items kunnen worden geselecteerd, maar het kan voorkomen dat de status tijdens het spel verandert en je de items die je selecteert wilt wijzigen. In dit geval wijzigt u het item dat in het programma is geselecteerd.

Het object rangschikt "drop-down" en "knop x2" zoals hieronder weergegeven. U kunt andere parameters dan uitlijning vrij instellen.

Maak een script en geef het een naam DropdownDynamic . De code zou er als volgt uit moeten zien:

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 heeft een controle over de items die u wilt selecteren, zodat Add u de items dynamisch kunt beheren door ze uit te voeren of Remove erop te zetten.

EventSystem Scripts en objecten koppelen aan .

Wijs een methode toe aan de klikgebeurtenis van respectievelijk de knoppen Toevoegen en Verwijderen.

Als je klaar bent, voer je het uit. Als het item in de editor wordt gewist, wordt het item niet weergegeven, zelfs niet als u erop klikt.

Als u vier keer op de knop Toevoegen klikt, ziet u dat er vier items zijn toegevoegd.

Als u twee keer op de verwijderknop klikt, ziet u dat er twee items zijn verwijderd.