Použití rozevíracího seznamu uživatelského rozhraní Unity

Ověřovací prostředí

Windows

• Systém Windows 11

Unity Editor

• 2020.3.25f1

Předpoklady pro tento tip

Následující nastavení byla provedena předem jako předpoklad pro vysvětlení těchto tipů.

• Představujeme balíček vstupního systému
• Zarovnejte kameru (2D) s plátnem

Nejprve

Rozevírací seznamy lze použít k tomu, aby uživatel mohl vybrat jednu z několika možností. I když je na výběr z mnoha položek, na obrazovce se zobrazí pouze vybrané položky, což je užitečné pro úsporu místa a usnadňuje uživateli pochopení toho, co vybírají.

Umístění rozevíracího seznamu

Vyberte "rozevírací seznam" z hierarchie a přidejte ho do zobrazení.

Upravte polohu rozevíracího seznamu podle svého uvážení. Pokud se velikost zdá malá, zvětšete ji přetažením.

Chcete-li Dropdown nastavit velikost textu uvnitř, vyberte možnost Je uvnitř Label místo .

Když ho spustíte, uvidíte rozevírací seznam v akci. V počátečním stavu jsou na výběr ze tří položek, takže můžete výběr přepínat. Pokud však změníte velikost rozevíracího seznamu nebo Label velikost písma , nebude odpovídat velikosti textu zobrazeného v rozevíracím seznamu.

Úprava velikosti položek rozevíracího seznamu

Pokud jste při umístění rozevíracího seznamu nezměnili velikost objektu nebo velikost písma, nemusíte to dělat, ale pokud ano, budete muset nastavit také položku rozevíracího seznamu.

Rozevírací objekt obsahuje definici způsobu, jakým se vybraná položka zobrazí při jejím zobrazení. Dropdown Template je tomu tak. Pokud nenastavíte několik nastavení, nebude to vypadat hezky.

Nejprve se předpokládá, že každý parametr umístěného rozevíracího seznamu je nastaven následovně. Pokud nastavujete s různými parametry, nahraďte čísla a přečtěte je. V tomto příkladu jsou nastaveny i další parametry, ale jsou vynechány, protože nesouvisejí s položkami rozevíracího seznamu.

Velikost písma položky

Nejprve změňte velikost písma položky. Vyberte > > >Dropdown Template Content > > Viewport Item Item Labelobjektu. Zadejte velikost písma 40, která je stejná jako velikost Popis. Pokud chcete zobrazit více možností, můžete je trochu zmenšit.

I když zvětšíte velikost písma, velikost zobrazení jedné položky se nezmění, takže nemusíte nic vidět, i když ji spustíte.

Velikost položky

Dále nastavte velikost jedné položky. Objekty, které se mají vybrat, jsou > > > >Dropdown . Content Item Template Viewport Nastavte výšku na 72. Pokud chcete zobrazit více možností, můžete je trochu zmenšit.

Tím se prvky položky zviditelní, ale z nějakého důvodu je horní a dolní část vybrané položky trochu oříznuta bez ohledu na posouvání.

Chcete-li tento problém vyřešit, nastavte výšku > > >Dropdown Viewport ContentTemplate na Item 72, což je stejné jako . To vám umožní správně vidět horní a dolní položky.

Mimochodem, ve výchozím rozevíracím seznamu Item je výška nastavena o něco větší než Content . Výsledkem je, že se nad a pod vybranou položkou zobrazí mírný okraj, což snižuje pocit tlaku.

Velikost zaškrtnutí

Velikost zaškrtnutí je také malá, takže to opravím. Cílový objekt je "Dropdown> > Viewport > > >Item CheckmarkTemplate Item Content".

Pokud změníte šířku a výšku, zaškrtnutí se také zvětší, proto jej zde nastavte na 72.

Když to spustím, zaškrtnutí je větší, ale pozice je špatná, takže to také opravím.

Item Checkmark Nejprve nastavte otočný čep X na 0 a poté také nastavte polohu X na 0. To vám umožní umístit jej na dobré místo bez ohledu na velikost šeku nebo štítku.

Vzhledem k tomu, že překrývá popisek, vyberte, Item Lebel aby levá pozice byla stejná jako velikost zaškrtnutí.

Velikost posuvníku

Posuvník je také malý a obtížně se na něj kliká, proto jej zvětšete. Každý si zakládá na velikosti, takže to není něco, co lze určit. V tomto případě nastavíme 48, což jsou 2/3 výšky dropdownu.

Objekt, který má být vybrán, je nastaven na hodnotu šířky v > >Dropdown Template Scrollbar.

Velikost ikony rozevíracího seznamu

Není to na straně položky, ale rozbalovací ikona je stále malá, takže ji změním. Objekt, který má být vybrán, je >Dropdown Arrow.

Pokud jde o velikost ikony, můžete změnit velikost nastavením šířky a výšky. Zde ji nastavíme na 72, což je stejná výška rozevíracího seznamu.

V takovém případě bude poloha vypnutá, proto nastavte otočný čep X na 1 a polohu X na 0. To vám umožní zobrazit ikonu na pěkné pozici bez ohledu na velikost.

Počet zobrazených položek rozevíracího seznamu

Zvětšením velikosti položky je méně vybraných položek, které lze najednou zobrazit, takže se to pokusíme zvětšit. Toto nastavení je zadáno v >Dropdown Template. Vzhledem k tomu, že počet položek, které mají být zobrazeny, není určen počtem položek, ale velikost je dána výškou, zadaná hodnota je "výška × počet položek". Zde chceme vystavit asi 10 kusů, takže 72 x 10 = 720 nastavte .

Zobrazovací plocha je zvětšena, ale v tuto chvíli jsou zobrazeny pouze 3 položky, takže jsou zobrazeny pouze 3 položky.

Nastavení výběru

Ve výchozím nastavení jsou nastaveny tři položky "Možnost A ~ Možnost C". Tyto prvky jsou Dropdown umístěny v komponentě objektu Dropdown .

Pokud se v inspektoru posunete dolů, najdete položku "Možnosti", kde můžete libovolně měnit název nebo přidávat či mazat.

Nastavení počátečního výběru

Výběr položek je určen čísly. Dropdown Dropdown Počáteční výběr můžete určit v hodnotě komponenty objektu. Číslování položek začíná na 0, takže nastavte 3, pokud chcete, aby čtvrtá byla počáteční volbou.

Provedení zpracování při výběru položky

Možná budete chtít něco udělat, když vyberete položku v rozevíracím seznamu. To lze implementovat stejným způsobem, jako když kliknete na tlačítko.

Objekt má rozbalovací nabídku a text po jednom. Po výběru položky v rozevíracím seznamu se ujistěte, že je obsah zobrazen v textovém objektu vpravo. Nezáleží na ničem jiném než na umístění objektů, takže si je můžete nastavit, jak chcete.

Nejprve vytvořte skript v projektu. DropdownItemSelector V tomto případě se jmenuje .

Otevřete skript a přidejte kód do následujícího souboru:

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

Po uložení skript připojte k EventSystem objektu. Jak je vysvětleno v části Tipy pro tlačítka, tento tip konzistentně připojuje skripty EventSystem , pokud k tomu není konkrétní důvod.

Připojte rozevírací objekt, ze kterého chcete získat hodnotu, a textový objekt, ze kterého chcete hodnotu nastavit.

Dále vyberte rozevírací objekt, se kterým chcete pracovat, a přidejte "Při změně hodnoty (Int32)" do Dropdown komponenty Inspector.

Do levé dolní položky potřebujeme vložit objekt, ke kterému je připojen skript, který se má ovládat, proto jej nastavíme zde EventSystem .

Vyberte z OnSelectionChanged možnosti Žádná funkce DropdownItemSelector .

Zkuste jej spustit, abyste zjistili, zda funguje správně.

Dynamické přidávání položek

V editoru můžete určit, které položky lze vybrat, ale může se stát, že se stav během hry změní a vy budete chtít vybrané položky změnit. V takovém případě změníte položku vybranou v programu.

Objekt uspořádá "drop-down" a "button x2", jak je znázorněno níže. Můžete libovolně nastavit i jiné parametry než zarovnání.

Vytvořte skript a pojmenujte DropdownDynamic ho . Kód by měl vypadat takto:

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 Má kontrolu nad položkami, které mají být vybrány, takže Add můžete dynamicky ovládat položky pomocí akce nebo Remove na nich.

EventSystem Připojte skripty a objekty k .

Přiřaďte metodu události click tlačítek pro přidání a odstranění.

Až budete hotovi, spusťte jej. Pokud je položka v editoru smazána, položka se nezobrazí, ani když na ni kliknete.

Pokud čtyřikrát kliknete na tlačítko Přidat, uvidíte, že byly přidány čtyři položky.

Pokud dvakrát kliknete na tlačítko Odstranit, uvidíte, že byly odstraněny dvě položky.