Uso del menú desplegable de la interfaz de usuario de Unity
Entorno de verificación
- Windows
-
- Windows 11
- Unity Editor
-
- 2020.3.25f1
Requisitos previos para esta sugerencia
Los siguientes ajustes se han realizado de antemano como requisito previo para la explicación de estos consejos.
Al principio
Los menús desplegables se pueden usar para permitir que el usuario seleccione una de varias opciones. Incluso si hay muchos elementos para elegir, solo se muestran los elementos seleccionados en la pantalla, lo que es útil para ahorrar espacio y facilita que el usuario comprenda lo que está seleccionando.
Colocar un menú desplegable
Seleccione un "menú desplegable" de la jerarquía para agregarlo a la vista.
Ajuste la posición del menú desplegable a su discreción. Si el tamaño parece pequeño, arrastre el marco para hacerlo más grande.
Para Dropdown establecer el tamaño del texto en su interior, seleccione Está dentro Label en lugar de .
Cuando lo ejecute, podrá ver el menú desplegable en acción. En el estado inicial, hay tres elementos para elegir, por lo que puede cambiar la selección.
Sin embargo, si cambia el tamaño del menú desplegable o Label el tamaño de fuente de , no coincidirá con el tamaño del texto que se muestra en el menú desplegable.
Ajustar el tamaño de los elementos desplegables
Si no ha cambiado el tamaño del objeto o el tamaño de la fuente cuando coloca el menú desplegable, no es necesario que lo haga, pero si lo hace, también deberá configurar el elemento desplegable.
El objeto desplegable contiene una definición de cómo se muestra el elemento seleccionado cuando se muestra.
Dropdown Template es el caso. Si no establece algunas configuraciones, no se verá bonito.
En primer lugar, se supone que cada parámetro del menú desplegable colocado se establece de la siguiente manera. Si está configurando con diferentes parámetros, reemplace los números y léalos. En este ejemplo, también se establecen otros parámetros, pero se omiten porque no están relacionados con los elementos desplegables.
del objeto| Valor | nombre del parámetro | de |
|---|---|---|
| Menú desplegable | altura | 72 |
| Etiqueta desplegable > | Tamaño de fuente | 40 |
Tamaño de fuente del elemento
Primero, cambie el tamaño de fuente del elemento. Seleccione > > >Dropdown Template Content > > Viewport Item Item Labelpara el objeto.
Especifique un tamaño de fuente de 40, que es el mismo que Etiqueta. Si quieres mostrar más opciones, puedes hacerlas un poco más pequeñas.
Incluso si aumenta el tamaño de la fuente, el tamaño de visualización de un elemento no cambia, por lo que es posible que no pueda ver nada incluso si lo ejecuta.
Tamaño del artículo
A continuación, establezca el tamaño de un elemento.
Los objetos que se van a seleccionar son > > > >Dropdown . Content Item Template Viewport
Establezca la altura en 72. Si quieres mostrar más opciones, puedes hacerlas un poco más pequeñas.
Esto hace que los elementos del elemento sean visibles, pero por alguna razón, la parte superior e inferior del elemento seleccionado se cortan un poco independientemente del desplazamiento.
Para solucionar esto, establezca la altura de > > >Dropdown Viewport ContentTemplate en Item 72, que es lo mismo que .
Esto le permitirá ver correctamente los elementos superiores e inferiores.
Por cierto, en la configuración Item desplegable predeterminada , la altura de se establece un poco más grande que Content .
Como resultado, se muestra un ligero margen por encima y por debajo del elemento seleccionado, lo que reduce la sensación de presión.
Tamaño de la marca de verificación
El tamaño de la marca de verificación también es pequeño, así que lo arreglaré.
El objeto de destino es "> > ViewportDropdown> > >Item CheckmarkTemplate Item Content".
Si cambia el ancho y la altura, la marca de verificación también aumentará, así que configúrela en 72 aquí.
Cuando lo ejecuto, la marca de verificación es más grande, pero la posición es incorrecta, así que también lo arreglaré.
Item Checkmark Primero, establezca el pivote X en 0 y luego establezca la posición X en 0 también.
Esto le permite colocarlo en un buen lugar independientemente del tamaño del cheque o etiqueta.
Además, dado que se superpone a la etiqueta, Item Lebel seleccione esta opción para que la posición izquierda sea la misma que el tamaño de la marca de verificación.
Tamaño de la barra de desplazamiento
La barra de desplazamiento también es pequeña y difícil de hacer clic, así que hazla más grande. Todo el mundo es particular en cuanto al tamaño, por lo que no es algo que se pueda determinar. En este caso, establecemos 48, que es 2/3 de la altura del menú desplegable.
El objeto que se va a seleccionar se establece en un valor de anchura en >Dropdown Template > Scrollbar.
Tamaño del icono desplegable
No está en el lado del elemento, pero el icono desplegable sigue siendo pequeño, así que lo cambiaré.
El objeto que se va a seleccionar es >Dropdown Arrow.
En cuanto al tamaño del icono, puede cambiar el tamaño configurando el ancho y el alto. Aquí, lo establecemos en 72, que es lo mismo que la altura del menú desplegable.
Si este es el caso, la posición estará desactivada, así que establezca el pivote X en 1 y la posición X en 0. Esto le permite mostrar el icono en una buena posición independientemente del tamaño.
Número de elementos desplegables mostrados
Al aumentar el tamaño del elemento, hay menos elementos seleccionados que se pueden mostrar a la vez, por lo que intentaremos aumentar esto.
Esta configuración se especifica en >Dropdown Template.
Dado que el número de elementos que se van a mostrar no se especifica por el número de elementos, sino que el tamaño se establece por la altura, el valor especificado es "la altura × el número de elementos".
Aquí, queremos mostrar alrededor de 10 piezas, así que 72 x 10 = 720 establezca .
El área de visualización está ampliada, pero por el momento solo hay 3 elementos, por lo que solo se muestran 3 elementos.
Establecer la selección
De forma predeterminada, se establecen tres elementos de "Opción A ~ Opción C".
Estos elementos se Dropdown encuentran en el componente del objeto Dropdown .
Si te desplazas hacia abajo en el inspector, encontrarás el elemento "Opciones", donde puedes cambiar libremente el nombre o añadir o eliminar.
Establecer la selección inicial
La selección de los artículos está determinada por números.
Dropdown Dropdown Puede especificar la selección inicial en el valor del componente del objeto.
La numeración de elementos comienza en 0, así que establezca 3 si desea que el cuarto sea la selección inicial.
Realizar el procesamiento al seleccionar un elemento
Es posible que desee hacer algo al seleccionar un elemento en el menú desplegable. Esto se puede implementar de la misma manera que cuando se hace clic en un botón.
El objeto tiene un menú desplegable y un texto de uno en uno. Después de seleccionar un elemento en el menú desplegable, asegúrese de que el contenido se muestra en un objeto de texto a la derecha. No importa nada más que la ubicación de los objetos, por lo que puedes configurarlo como quieras.
En primer lugar, crea un script en tu proyecto. DropdownItemSelector En este caso, se denomina .
Abra el script y agregue el código a lo siguiente:
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}";
}
}
Después de guardar el script, adjúntelo al EventSystem objeto.
Como se explica en las sugerencias para botones, esta sugerencia adjunta scripts EventSystem de forma coherente a menos que haya una razón específica para hacerlo.
Adjunte un objeto desplegable del que obtener el valor y un objeto de texto para establecer el valor.
A continuación, seleccione el objeto desplegable con el que desea trabajar y agregue "Al cambiar de valor (Int32)" en el Dropdown componente Inspector.
En el elemento inferior izquierdo, necesitamos poner el objeto al que se adjunta el script que se va a operar, por lo que lo establecemos aquí EventSystem .
Seleccione de OnSelectionChanged Sin función DropdownItemSelector .
Intente ejecutarlo para ver si funciona correctamente.
Adición dinámica de elementos
Puedes especificar qué elementos se pueden seleccionar en el editor, pero puede haber ocasiones en las que el estado cambie durante el juego y quieras cambiar los elementos que seleccionas. En este caso, cambiará el elemento seleccionado en el programa.
El objeto organiza el "menú desplegable" y el "botón x2" como se muestra a continuación. Puede establecer libremente parámetros distintos de la alineación.
Cree un script y asígnele un nombre DropdownDynamic . El código debería tener el siguiente aspecto:
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 tiene un control sobre los elementos que se van a seleccionar, por lo que Add puede controlar dinámicamente los elementos haciendo o Remove sobre ellos.
EventSystem Adjunte scripts y objetos a archivos .
Asigne un método al evento de clic de los botones agregar y eliminar, respectivamente.
Cuando hayas terminado, ejecútalo. Si el elemento se borra en el editor, el elemento no se mostrará incluso si hace clic en él.
Si hace clic en el botón Agregar cuatro veces, puede ver que se han agregado cuatro elementos.
Si hace clic en el botón Eliminar dos veces, puede ver que se han eliminado dos elementos.