Ús del menú desplegable Unity UI
Entorn de verificació
- Windows
-
- Finestres 11
- Editor d'unitat
-
- 25.3.2020
Requisits previs per a aquest consell
Els següents paràmetres s'han fet amb antelació com a requisit previ per a l'explicació d'aquests consells.
Al principi
Els desplegables es poden utilitzar per permetre a l'usuari seleccionar una de les diverses opcions. Fins i tot si hi ha molts elements per triar, només es mostren a la pantalla els elements seleccionats, cosa que és útil per estalviar espai i facilita a l'usuari entendre què selecciona.
Col·locar un desplegable
Seleccioneu un "menú desplegable" de la jerarquia per afegir-lo a la visualització.
Ajusteu la posició del menú desplegable a la vostra discreció. Si la mida sembla petita, arrossegueu el marc per fer-lo més gran.
Per Dropdown definir la mida del text a l'interior, seleccioneu És dins Label en lloc de .
Quan l'executeu, podeu veure el menú desplegable en acció. En l'estat inicial, hi ha tres elements per triar, de manera que podeu canviar la selecció.
Tanmateix, si canvieu la mida del desplegable o Label la mida de la lletra de , no coincidirà amb la mida del text que es mostra al menú desplegable.
Ajustar la mida dels elements desplegables
Si no heu canviat la mida de l'objecte ni la mida de la lletra quan col·loqueu el menú desplegable, no cal que ho feu, però si ho feu, també haureu d'establir l'element desplegable.
L'objecte desplegable conté una definició de com es mostra l'element seleccionat quan es mostra.
Dropdown Template és el cas. Si no definiu algunes opcions de configuració, no es veurà bonic.
En primer lloc, se suposa que cada paràmetre del menú desplegable col·locat s'estableix de la següent manera. Si esteu configurant amb diferents paràmetres, substituïu els números i llegiu-los. En aquest exemple, també s'estableixen altres paràmetres, però s'ometen perquè no estan relacionats amb els elements desplegables.
del| Valor | nom del paràmetre | de l'objecte |
|---|---|---|
| Desplegable | altura | 72 |
| Etiqueta desplegable > | Mida de la lletra | 40 |
Mida de la lletra de l'element
En primer lloc, canvieu la mida de la lletra de l'element. Seleccioneu > > >Dropdown Template Content > > Viewport Item Item Labelper a l'objecte.
Especifiqueu una mida de lletra de 40, que és la mateixa que Etiqueta. Si voleu mostrar més opcions, podeu fer-les una mica més petites.
Fins i tot si augmenteu la mida de la lletra, la mida de visualització d'un element no canvia, de manera que és possible que no pugueu veure res encara que l'executeu.
Mida de l'article
A continuació, definiu la mida d'un element.
Els objectes a seleccionar són > > > >Dropdown Template . Content Item Viewport
Estableix l'alçada a 72. Si voleu mostrar més opcions, podeu fer-les una mica més petites.
Això fa que els elements de l'element siguin visibles, però per alguna raó, la part superior i inferior de l'element seleccionat es tallen una mica independentment del desplaçament.
Per solucionar-ho, configureu l'alçada de > > >Dropdown Viewport ContentTemplate a Item 72, que és la mateixa que .
Això us permetrà veure correctament els elements superior i inferior.
Per cert, a la configuració Item desplegable predeterminada , l'alçada de s'estableix lleugerament més gran que Content .
Com a resultat, es mostra un lleuger marge per sobre i per sota de l'element seleccionat, reduint la sensació de pressió.
Mida de la marca de verificació
La mida de la marca de verificació també és petita, així que ho arreglaré.
L'objecte objectiu és "Dropdown> > Viewport > > > Template Content Item Item Checkmark".
Si canvieu l'amplada i l'alçada, la marca de verificació també augmentarà, així que configureu-la a 72 aquí.
Quan l'executo, la marca de verificació és més gran, però la posició és incorrecta, així que també ho solucionaré.
Item Checkmark Primer, establiu el pivot X a 0 i, a continuació, establiu també la posició X a 0.
Això permet col·locar-lo en un bon lloc independentment de la mida del xec o etiqueta.
A més, com que se superposa a l'etiqueta, Item Lebel seleccioneu que la posició esquerra sigui la mateixa que la mida de la marca de verificació.
Mida de la barra de desplaçament
La barra de desplaçament també és petita i difícil de fer clic, així que feu-la més gran. Tothom és particular pel que fa a la mida, de manera que no és una cosa que es pugui determinar. En aquest cas, establim 48, que és 2/3 de l'alçada del desplegable.
L'objecte a seleccionar s'estableix en un valor d'amplada en > >Dropdown Template Scrollbar.
Mida de les icones desplegables
No està al costat de l'element, però la icona desplegable encara és petita, així que la canviaré.
L'objecte a seleccionar és >Dropdown Arrow.
Pel que fa a la mida de la icona, podeu canviar la mida establint l'amplada i l'alçada. Aquí, el situem a 72, que és el mateix que l'alçada del desplegable.
Si aquest és el cas, la posició estarà desactivada, de manera que configureu el pivot X a 1 i la posició X a 0. Això us permet mostrar la icona en una posició agradable independentment de la mida.
Nombre d'elements desplegables que es mostren
En augmentar la mida de l'article, hi ha menys elements seleccionats que es poden mostrar alhora, de manera que intentarem augmentar-ho.
Aquesta configuració s'especifica a >Dropdown Template.
Com que el nombre d'elements que es mostraran no s'especifica pel nombre d'elements, sinó que la mida s'estableix per l'alçada, el valor especificat és "l'alçada × el nombre d'elements".
Aquí, volem mostrar unes 10 peces, així que 72 x 10 = 720 configurat .
L'àrea de visualització s'amplia, però de moment només hi ha elements 3, de manera que només es mostren 3 elements.
Definir la selecció
Per defecte, s'estableixen tres elements de "Opció A ~ Opció C".
Aquests elements es Dropdown troben en el component de l'objecte Dropdown .
Si desplaceu-vos cap avall per l'inspector, trobareu l'element "Opcions", on podeu canviar lliurement el nom o afegir o suprimir.
Definir la selecció inicial
La selecció d'elements ve determinada pels números.
Dropdown Dropdown Podeu especificar la selecció inicial al valor del component de l'objecte.
La numeració dels elements comença a 0, així que estableix 3 si voleu que el quart sigui la selecció inicial.
Realitzeu el processament en seleccionar un element
És possible que vulgueu fer alguna cosa quan seleccioneu un element al menú desplegable. Això es pot implementar de la mateixa manera que quan es fa clic en un botó.
L'objecte té un desplegable i un text d'un en un. Després de seleccionar un element al menú desplegable, assegureu-vos que el contingut es mostri en un objecte de text a la dreta. No importa res més que la col·locació dels objectes, de manera que podeu configurar-lo com vulgueu.
En primer lloc, creeu un script al vostre projecte. DropdownItemSelector En aquest cas, s'anomena .
Obriu l'script i afegiu el codi següent:
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}";
}
}
Després de desar l'script, adjunta'l a l'objecte EventSystem .
Com s'explica als consells per als botons, aquest consell adjunta constantment scripts EventSystem a tret que hi hagi una raó específica per fer-ho.
Adjunteu un objecte desplegable per obtenir el valor i un objecte de text per definir-ne el valor.
A continuació, seleccioneu l'objecte desplegable amb el qual voleu treballar i afegiu "En canvi Dropdown de valor (Int32)" al component Inspector.
A l'element inferior esquerre, hem de posar l'objecte al qual s'adjunta l'script a operar, així que el posem aquí EventSystem .
Seleccioneu de OnSelectionChanged Sense funció DropdownItemSelector .
Proveu d'executar-lo per veure si funciona correctament.
Afegir elements dinàmicament
Pots especificar quins elements es poden seleccionar a l'editor, però pot haver-hi moments en què l'estat canviï durant la partida i vulguis canviar els elements que seleccionis. En aquest cas, canviaràs l'element seleccionat al programa.
L'objecte organitza "desplegable" i "botó x2" com es mostra a continuació. Podeu definir lliurement paràmetres diferents de l'alineació.
Creeu un script i anomeneu-lo DropdownDynamic . El codi hauria de tenir aquest aspecte:
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 té un control sobre els elements a seleccionar, de manera que Add podeu controlar dinàmicament els elements fent-los o Remove sobre ells.
EventSystem Adjunteu scripts i objectes a .
Assigneu un mètode a l'esdeveniment de clic dels botons d'afegir i suprimir, respectivament.
Quan hagis acabat, executa'l. Si l'ítem s'esborra a l'editor, l'ítem no es mostrarà encara que hi facis clic.
Si feu clic al botó afegir quatre vegades, podreu veure que s'han afegit quatre elements.
Si fas clic dues vegades al botó Suprimeix, podràs veure que s'han eliminat dos ítems.