Uso dell'elenco a discesa dell'interfaccia utente di Unity
Ambiente di verifica
- Finestre
-
- finestre 11
- Unity Editor
-
- 2020.3.25f1
Prerequisiti per questo suggerimento
Le seguenti impostazioni sono state effettuate in anticipo come prerequisito per la spiegazione di questi suggerimenti.
Dapprima
I menu a discesa possono essere utilizzati per consentire all'utente di selezionare una delle diverse scelte. Anche se ci sono molti elementi tra cui scegliere, sullo schermo vengono visualizzati solo gli elementi selezionati, il che è utile per risparmiare spazio e rende più facile per l'utente capire cosa sta selezionando.
Posizionare un menu a discesa
Seleziona un "menu a discesa" dalla gerarchia per aggiungerlo alla vista.
Regola la posizione del menu a discesa a tua discrezione. Se le dimensioni sembrano ridotte, trascinate la cornice per ingrandirla.
Per Dropdown impostare le dimensioni del testo all'interno, selezionare È all'interno Label invece di .
Quando lo esegui, puoi vedere il menu a discesa in azione. Nello stato iniziale, ci sono tre elementi tra cui scegliere, in modo da poter cambiare la selezione.
Tuttavia, se modifichi la dimensione dell'elenco a discesa o Label la dimensione del carattere di , non corrisponderà alla dimensione del testo visualizzato nell'elenco a discesa.
Regolare le dimensioni degli elementi a discesa
Se non hai modificato la dimensione dell'oggetto o la dimensione del carattere quando inserisci il menu a discesa, non è necessario farlo, ma se lo fai, dovrai impostare anche l'elemento del menu a discesa.
L'oggetto a discesa contiene una definizione della modalità di visualizzazione dell'elemento selezionato quando viene visualizzato.
Dropdown Template è il caso. Se non imposti alcune impostazioni, non avrà un bell'aspetto.
Innanzitutto, si presume che ogni parametro del menu a discesa inserito sia impostato come segue. Se si impostano parametri diversi, sostituire i numeri e leggerli. In questo esempio vengono impostati anche altri parametri, che però vengono omessi perché non sono correlati agli elementi dell'elenco a discesa.
del| Valore | nome del parametro | dell'oggetto |
|---|---|---|
| Elenco a discesa | altezza | 72 |
| Elenco a discesa > etichetta | Dimensione del carattere | 40 |
Dimensione carattere dell'articolo
Innanzitutto, modifica la dimensione del carattere dell'elemento. Selezionare > > >Dropdown Template Content > > Viewport Item Item Labelper l'oggetto.
Specificare una dimensione del carattere pari a 40, che corrisponde a Etichetta. Se vuoi mostrare più scelte, puoi renderle un po' più piccole.
Anche se si aumenta la dimensione del carattere, la dimensione di visualizzazione di un elemento non cambia, quindi potrebbe non essere possibile visualizzare nulla anche se lo si esegue.
Dimensione dell'articolo
Quindi, imposta la dimensione di un elemento.
Gli oggetti da selezionare sono > > > >Dropdown Template . Content Item Viewport
Impostare l'altezza su 72. Se vuoi mostrare più scelte, puoi renderle un po' più piccole.
In questo modo gli elementi dell'elemento sono visibili, ma per qualche motivo la parte superiore e inferiore dell'elemento selezionato vengono leggermente tagliati indipendentemente dallo scorrimento.
Per risolvere questo problema, impostare l'altezza di > > >Dropdown Viewport ContentTemplate su 72, che corrisponde a .Item
Ciò ti consentirà di vedere correttamente gli elementi in alto e in basso.
A proposito, nelle impostazioni Item a discesa predefinite , l'altezza di è leggermente più grande di Content .
Di conseguenza, viene visualizzato un leggero margine sopra e sotto l'elemento selezionato, riducendo la sensazione di pressione.
Dimensione del segno di spunta
Anche la dimensione del segno di spunta è piccola, quindi lo correggerò.
L'oggetto di destinazione è "Dropdown> > Viewport > > > Template Item Content Item Checkmark".
Se modifichi la larghezza e l'altezza, anche il segno di spunta aumenterà, quindi impostalo su 72 qui.
Quando lo eseguo, il segno di spunta è più grande, ma la posizione è sbagliata, quindi correggerò anche questo.
Item Checkmark Innanzitutto, imposta il pivot X su 0, quindi imposta anche la posizione X su 0.
Ciò consente di posizionarlo in una buona posizione indipendentemente dalle dimensioni dell'assegno o dell'etichetta.
Inoltre, poiché si sovrappone all'etichetta, Item Lebel selezionare questa opzione per rendere la posizione a sinistra uguale alla dimensione del segno di spunta.
Dimensione della barra di scorrimento
Anche la barra di scorrimento è piccola e difficile da cliccare, quindi ingrandiscila. Tutti sono particolari riguardo alle dimensioni, quindi non è qualcosa che può essere determinato. In questo caso, impostiamo 48, che è 2/3 dell'altezza del menu a discesa.
L'oggetto da selezionare viene impostato su un valore di larghezza in >Dropdown Template > Scrollbar.
Dimensione dell'icona a discesa
Non è sul lato dell'elemento, ma l'icona a discesa è ancora piccola, quindi la cambierò.
L'oggetto da selezionare è >Dropdown Arrow.
Per quanto riguarda la dimensione dell'icona, è possibile modificare la dimensione impostando la larghezza e l'altezza. In questo caso, lo impostiamo su 72, che è lo stesso dell'altezza del menu a discesa.
In questo caso, la posizione sarà disattivata, quindi imposta il perno X su 1 e la posizione X su 0. Ciò consente di visualizzare l'icona in una posizione piacevole indipendentemente dalle dimensioni.
Numero di elementi del menu a discesa visualizzati
Aumentando le dimensioni dell'elemento, ci sono meno elementi selezionati che possono essere visualizzati contemporaneamente, quindi cercheremo di aumentarla.
Questa impostazione è specificata in >Dropdown Template.
Poiché il numero di elementi da visualizzare non è specificato dal numero di elementi, ma la dimensione è impostata dall'altezza, il valore specificato è "l'altezza × il numero di elementi".
Qui, vogliamo visualizzare circa 10 pezzi, quindi 72 x 10 = 720 imposta .
L'area di visualizzazione è ingrandita, ma al momento ci sono solo 3 elementi, quindi vengono visualizzati solo 3 elementi.
Impostare la selezione
Per impostazione predefinita, sono impostate tre voci di "Opzione A ~ Opzione C".
Questi elementi si Dropdown trovano nel componente dell'oggetto Dropdown .
Se scorri verso il basso l'ispettore, troverai la voce "Opzioni", dove puoi cambiare liberamente il nome o aggiungere o eliminare.
Impostare la selezione iniziale
La selezione degli elementi è determinata dai numeri.
Dropdown Dropdown È possibile specificare la selezione iniziale nel valore del componente dell'oggetto.
La numerazione degli elementi inizia da 0, quindi impostare 3 se si desidera che la quarta sia la selezione iniziale.
Eseguire l'elaborazione quando si seleziona un elemento
Potresti voler fare qualcosa quando selezioni un elemento nel menu a discesa. Questa operazione può essere implementata nello stesso modo in cui si fa clic su un pulsante.
L'oggetto ha un menu a discesa e un testo uno alla volta. Dopo aver selezionato un elemento nell'elenco a discesa, assicurati che il contenuto sia visualizzato in un oggetto di testo a destra. Non importa nient'altro che il posizionamento degli oggetti, quindi puoi impostarlo come preferisci.
Innanzitutto, creare uno script nel progetto. DropdownItemSelector In questo caso, si chiama .
Aprire lo script e aggiungere il codice a quanto segue:
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}";
}
}
Dopo aver salvato lo script, allegarlo all'oggetto EventSystem .
Come spiegato in Suggerimenti per i pulsanti, questo suggerimento allega costantemente gli EventSystem script a meno che non vi sia un motivo specifico per farlo.
Associare un oggetto a discesa per ottenere il valore e un oggetto di testo per impostare il valore.
Quindi, seleziona l'oggetto a discesa con cui desideri lavorare e aggiungi "In caso di modifica del valore (Int32)" nel Dropdown componente Inspector.
Nell'elemento in basso a sinistra, dobbiamo mettere l'oggetto a cui è attaccato lo script da operare, quindi lo impostiamo qui EventSystem .
OnSelectionChanged Selezionare da Nessuna funzione DropdownItemSelector .
Prova a eseguirlo per vedere se funziona correttamente.
Aggiunta dinamica di elementi
Puoi specificare quali oggetti possono essere selezionati nell'editor, ma ci possono essere momenti in cui lo stato cambia durante il gioco e vuoi cambiare gli oggetti che selezioni. In questo caso, si modificherà la voce selezionata nel programma.
L'oggetto dispone "menu a discesa" e "pulsante x2" come mostrato di seguito. È possibile impostare liberamente parametri diversi dall'allineamento.
Creare uno script e assegnargli un nome DropdownDynamic . Il codice dovrebbe essere simile al seguente:
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 ha un controllo sugli elementi da selezionare, in modo da Add poter controllare dinamicamente gli elementi facendo o Remove su di essi.
EventSystem Allegare script e oggetti a .
Assegnare un metodo all'evento click dei pulsanti Aggiungi ed Elimina, rispettivamente.
Quando hai finito, eseguilo. Se l'elemento viene cancellato nell'editor, l'elemento non verrà visualizzato anche se si fa clic su di esso.
Se si fa clic sul pulsante Aggiungi quattro volte, è possibile vedere che sono stati aggiunti quattro elementi.
Se si fa clic due volte sul pulsante Elimina, è possibile vedere che due elementi sono stati eliminati.