A Unity felhasználói felület legördülő menüjének használata

Ellenőrzési környezet

Windows

• Windows 11 esetén

Unity-szerkesztő

• 2020.3.25f1

A tipp előfeltételei

A következő beállításokat előre elvégeztük a tippek magyarázatának előfeltételeként.

• Bemutatjuk a beviteli rendszer csomagot
• A kamera (2D) igazítása a vászonhoz

Először

A legördülő menük segítségével a felhasználó több lehetőség közül választhat. Még akkor is, ha sok elem közül választhat, csak a kiválasztott elemek jelennek meg a képernyőn, ami helytakarékos lehet, és megkönnyíti a felhasználó számára, hogy megértse, mit választ.

Legördülő menü elhelyezése

Válasszon ki egy "legördülő menüt" a hierarchiából, hogy hozzáadja a nézethez.

Állítsa be a legördülő menü helyzetét saját belátása szerint. Ha a méret kicsinek tűnik, húzza a keretet a nagyításhoz.

A benne lévő szöveg méretének beállításához Dropdown válassza a Benne Label van lehetőséget a helyett.

Amikor futtatja, láthatja a legördülő menüt működés közben. A kezdeti állapotban három elem közül választhat, így válthat a kijelölés között. Ha azonban módosítja a legördülő menü méretét vagy Label betűméretét, az nem fog megegyezni a legördülő menüben megjelenő szöveg méretével.

A legördülő elemek méretének beállítása

Ha a legördülő menü elhelyezésekor nem módosította az objektum méretét vagy a betűméretet, akkor ezt nem kell megtennie, de ha igen, akkor a legördülő elemet is be kell állítania.

A legördülő objektum tartalmazza annak meghatározását, hogy a kijelölt elem hogyan jelenjen meg a megjelenítéskor. Dropdown Template ez a helyzet. Ha nem ad meg néhány beállítást, nem fog szépnek tűnni.

Először is feltételezzük, hogy az elhelyezett legördülő menü minden paramétere a következőképpen van beállítva. Ha különböző paraméterekkel állít be, cserélje ki a számokat, és olvassa el őket. Ebben a példában más paraméterek is be vannak állítva, de ezek kimaradnak, mert nem kapcsolódnak a legördülő elemekhez.

Elem betűmérete

Először módosítsa az elem betűméretét. Válassza ki > > >Dropdown Template Content objektumhoz tartozó > > Viewport Item Item Label. Adja meg a 40-es betűméretet, amely megegyezik a Címke betűmérettel. Ha több választási lehetőséget szeretne megjeleníteni, akkor egy kicsit kisebbre állíthatja őket.

Még ha növeli is a betűméretet, az egyik elem megjelenítési mérete nem változik, így előfordulhat, hogy akkor sem lát semmit, ha futtatja.

Elem mérete

Ezután állítsa be egy elem méretét. A kijelölendő objektumok > > > >Dropdown Template . Content Item Viewport Állítsa a magasságot 72-re. Ha több választási lehetőséget szeretne megjeleníteni, akkor egy kicsit kisebbre állíthatja őket.

Ez láthatóvá teszi az elem elemeit, de valamilyen oknál fogva a kiválasztott elem teteje és alja a görgetéstől függetlenül kissé le van vágva.

Ennek kijavításához állítsa a > > >Dropdown Viewport ContentTemplate magasságát 72-reItem, ami megegyezik a következővel: . Ez lehetővé teszi a felső és alsó elemek megfelelő megtekintését.

Mellesleg, az alapértelmezett legördülő beállításokban Item , az magassága valamivel nagyobb, mint Content . Ennek eredményeként egy kis margó jelenik meg a kiválasztott elem felett és alatt, csökkentve a nyomásérzetet.

Pipa mérete

A pipa mérete is kicsi, ezért kijavítom. A célobjektum "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

Ha megváltoztatja a szélességet és a magasságot, a pipa is növekszik, ezért állítsa 72-re itt.

Amikor futtatom, a pipa nagyobb, de a pozíció rossz, ezért ezt is kijavítom.

Item Checkmark Először állítsa az X pivotot 0-ra, majd állítsa az X pozíciót 0-ra. Ez lehetővé teszi, hogy jó helyre helyezze, függetlenül a csekk vagy a címke méretétől.

Továbbá, mivel átfedi a címkét, válassza ki, Item Lebel hogy a bal oldali pozíció megegyezzen a pipa méretével.

Görgetősáv mérete

A görgetősáv is kicsi és nehezen kattintható, ezért növelje nagyobbra. Mindenki különös a mérettel kapcsolatban, így ezt nem lehet meghatározni. Ebben az esetben 48-at állítottunk be, ami a legördülő menü magasságának 2/3-a.

A kijelölendő objektum szélességi értékre van állítva > >Dropdown Template Scrollbar.

Legördülő ikon mérete

Nem az elem oldalán van, de a legördülő ikon még mindig kicsi, ezért megváltoztatom. A kijelölendő objektum >Dropdown Arrow.

Ami az ikon méretét illeti, megváltoztathatja a méretet a szélesség és a magasság beállításával. Itt 72-re állítottuk, ami megegyezik a legördülő menü magasságával.

Ebben az esetben a pozíció ki lesz kapcsolva, ezért állítsa az X pivotot 1-re és az X pozíciót 0-ra. Ez lehetővé teszi, hogy az ikont mérettől függetlenül szép pozícióban jelenítse meg.

Megjelenített legördülő elemek száma

Az elem méretének növelésével kevesebb kiválasztott elem jeleníthető meg egyszerre, ezért megpróbáljuk ezt növelni. Ezt a beállítást a >Dropdown Templateadja meg. Mivel a megjelenítendő elemek számát nem az elemek száma, hanem a magasság határozza meg, a megadott érték "az elemek magassága × száma". Itt körülbelül 10 darabot szeretnénk megjeleníteni, ezért 72 x 10 = 720 állítsa be .

A megjelenítési terület megnagyobbodik, de jelenleg csak 3 elem van, így csak 3 elem jelenik meg.

A kijelölés beállítása

Alapértelmezés szerint az "A ~ C opció" három eleme van beállítva. Ezek az elemek az objektum Dropdown összetevőjében találhatókDropdown.

Ha lefelé görgeti az ellenőrt, megtalálja az "Opciók" elemet, ahol szabadon megváltoztathatja a nevet, vagy hozzáadhat vagy törölhet.

A kezdeti kiválasztás beállítása

Az elemek kiválasztását számok határozzák meg. Dropdown Dropdown A kezdeti kijelölést megadhatja az objektum összetevőjének értékében. A cikkszámozás 0-tól kezdődik, ezért állítsa be a 3-at, ha azt szeretné, hogy a negyedik legyen a kezdeti kiválasztás.

Feldolgozás végrehajtása elem kiválasztásakor

Előfordulhat, hogy tenni szeretne valamit, amikor kiválaszt egy elemet a legördülő menüből. Ez ugyanúgy valósítható meg, mint amikor egy gombra kattintanak.

Az objektumnak van egy legördülő menüje és egy szövege. Miután kiválasztott egy elemet a legördülő menüből, győződjön meg arról, hogy a tartalom megjelenik a jobb oldali szöveges objektumban. Nem számít más, mint az objektumok elhelyezése, így tetszés szerint állíthatja be.

Először hozzon létre egy szkriptet a projektben. DropdownItemSelector Ebben az esetben a neve .

Nyissa meg a szkriptet, és adja hozzá a kódot a következőkhöz:

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

A parancsfájl mentése után csatolja az EventSystem objektumhoz. A Tippek gombokhoz című részben leírtak szerint ez a tipp következetesen szkripteket EventSystem csatol hozzájuk, hacsak nincs konkrét oka ennek.

Csatoljon egy legördülő objektumot az érték beolvasásához, és egy szöveges objektumot az érték beállításához.

Ezután válassza ki azt a legördülő objektumot, amellyel dolgozni szeretne, és adja hozzá az "Értékváltozáskor (Int32)" elemet a Dropdown Vizsgáló összetevőhöz.

A bal alsó elemben el kell helyeznünk azt az objektumot, amelyhez a működtetendő szkript kapcsolódik, ezért itt EventSystem állítjuk be .

Válasszon a OnSelectionChanged Nincs funkció DropdownItemSelector közül.

Próbálja meg futtatni, hogy lássa, megfelelően működik-e.

Elemek dinamikus hozzáadása

Megadhatja, hogy mely elemeket lehet kiválasztani a szerkesztőben, de előfordulhat, hogy az állapot megváltozik a játék során, és módosítani szeretné a kiválasztott elemeket. Ebben az esetben megváltoztatja a programban kiválasztott elemet.

Az objektum elrendezi a "legördülő menüt" és az "x2 gombot" az alábbiak szerint. Az igazításon kívül szabadon beállíthat más paramétereket is.

Hozzon létre egy szkriptet, és adja neki a nevet DropdownDynamic . A kódnak így kell kinéznie:

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 Szabályozhatja a kijelölendő elemeket, így Add dinamikusan vezérelheti az elemeket művelettel vagy Remove rajtuk.

EventSystem Parancsfájlok és objektumok csatolása a .

Rendeljen hozzá egy metódust a hozzáadás és törlés gombok kattintási eseményéhez.

Ha elkészült, futtassa. Ha az elemet törli a szerkesztőben, az elem akkor sem jelenik meg, ha rákattint.

Ha négyszer kattint a hozzáadás gombra, láthatja, hogy négy elem lett hozzáadva.

Ha kétszer kattint a törlés gombra, láthatja, hogy két elem törölve lett.