Usando a lista suspensa Unity UI
Ambiente de verificação
- Windows
-
- Janelas 11
- Unity Editor
-
- 25.3.2020F1
Pré-requisitos para esta dica
As configurações a seguir foram feitas com antecedência como pré-requisito para a explicação dessas dicas.
Inicialmente
As listas suspensas podem ser usadas para permitir que o usuário selecione uma das várias opções. Mesmo que haja muitos itens para escolher, apenas os itens selecionados são exibidos na tela, o que é útil para economizar espaço e torna mais fácil para o usuário entender o que está selecionando.
Posicionar uma lista suspensa
Selecione uma "lista suspensa" na hierarquia para adicioná-la à exibição.
Ajuste a posição da lista suspensa a seu critério. Se o tamanho parecer pequeno, arraste o quadro para torná-lo maior.
Para Dropdown definir o tamanho do texto dentro, selecione Está dentro Label em vez de .
Ao executá-lo, você pode ver a lista suspensa em ação. No estado inicial, há três itens para escolher, para que você possa alternar a seleção.
No entanto, se você alterar o tamanho da lista suspensa ou Label o tamanho da fonte do , ele não corresponderá ao tamanho do texto exibido na lista suspensa.
Ajustar o tamanho dos itens suspensos
Se você não tiver alterado o tamanho do objeto ou da fonte ao colocar a lista suspensa, não precisará fazer isso, mas se fizer isso, precisará definir o item suspenso também.
O objeto suspenso contém uma definição de como o item selecionado é exibido quando é exibido.
Dropdown Template é o caso. Se você não definir algumas configurações, não ficará bonito.
Em primeiro lugar, assume-se que cada parâmetro da lista suspensa colocada é definido da seguinte maneira. Se você estiver definindo com parâmetros diferentes, substitua os números e leia-os. Neste exemplo, outros parâmetros também são definidos, mas são omitidos porque não estão relacionados aos itens suspensos.
| Valor do | nome do parâmetro do | objeto |
|---|---|---|
| Menu suspenso | altura | 72 |
| Rótulo > suspenso | Tamanho da fonte | 40 |
Tamanho da fonte do item
Primeiro, altere o tamanho da fonte do item. Selecione > > >Dropdown Template Content > > Viewport Item Item Labelpara o objeto.
Especifique um tamanho de fonte de 40, que é o mesmo que Label. Se você quiser mostrar mais escolhas, você pode torná-las um pouco menores.
Mesmo se você aumentar o tamanho da fonte, o tamanho de exibição de um item não será alterado, portanto, talvez você não consiga ver nada, mesmo se executá-lo.
Tamanho do item
Em seguida, defina o tamanho de um item.
Os objetos a serem selecionados são > > > >Dropdown . Content Item Template Viewport
Defina a altura para 72. Se você quiser mostrar mais escolhas, você pode torná-las um pouco menores.
Isso torna os elementos do item visíveis, mas por algum motivo, a parte superior e inferior do item selecionado são cortadas um pouco, independentemente da rolagem.
Para corrigir isso, defina a altura de > > >Dropdown Viewport ContentTemplate para Item 72, que é o mesmo que .
Isso permitirá que você veja os itens superiores e inferiores corretamente.
A propósito, nas configurações Item suspensas padrão, a altura de é definida um pouco maior que Content .
Como resultado, uma pequena margem é exibida acima e abaixo do item selecionado, reduzindo a sensação de pressão.
Tamanho da marca de verificação
O tamanho da marca de seleção também é pequeno, então vou corrigi-lo.
O objeto de destino é "Dropdown> > Viewport > > > Template Content Item Item Checkmark".
Se você alterar a largura e a altura, a marca de seleção também aumentará, então defina-a como 72 aqui.
Quando eu executá-lo, a marca de seleção é maior, mas a posição está errada, então vou corrigir isso também.
Item Checkmark Primeiro, defina o pivô X como 0 e, em seguida, defina a posição X como 0 também.
Isso permite que você o coloque em um bom lugar, independentemente do tamanho do cheque ou etiqueta.
Além disso, como ele se sobrepõe ao rótulo, Item Lebel selecione para tornar a posição esquerda igual ao tamanho da marca de seleção.
Tamanho da barra de rolagem
A barra de rolagem também é pequena e difícil de clicar, então torne-a maior. Todo mundo é particular sobre o tamanho, então não é algo que pode ser determinado. Neste caso, definimos 48, que é 2/3 da altura do dropdown.
O objeto a ser selecionado é definido como um valor de largura em > >Dropdown Template Scrollbar.
Tamanho do ícone suspenso
Não está no lado do item, mas o ícone suspenso ainda é pequeno, então vou alterá-lo.
O objeto a ser selecionado é >Dropdown Arrow.
Quanto ao tamanho do ícone, você pode alterar o tamanho definindo a largura e a altura. Aqui, definimos como 72, que é a mesma altura do dropdown.
Se este for o caso, a posição estará desativada, então defina o pivô X como 1 e a posição X como 0. Isso permite que você exiba o ícone em uma posição agradável, independentemente do tamanho.
Número de itens suspensos exibidos
Ao aumentar o tamanho do item, há menos itens selecionados que podem ser exibidos ao mesmo tempo, então tentaremos aumentar isso.
Essa configuração é especificada em >Dropdown Template.
Como o número de itens a serem exibidos não é especificado pelo número de itens, mas o tamanho é definido pela altura, o valor especificado é "a altura × o número de itens".
Aqui, queremos exibir cerca de 10 peças, então 72 x 10 = 720 set.
A área de exibição é ampliada, mas no momento há apenas 3 itens, portanto, apenas 3 itens são exibidos.
Definir a seleção
Por padrão, três itens da "Opção A ~ Opção C" são definidos.
Esses itens estão Dropdown localizados no componente do objeto Dropdown .
Se você rolar o inspetor para baixo, você encontrará o item "Opções", onde você pode alterar livremente o nome ou adicionar ou excluir.
Definir a seleção inicial
A seleção dos itens é determinada por números.
Dropdown Dropdown Você pode especificar a seleção inicial no valor do componente do objeto.
A numeração do item começa em 0, então defina 3 se quiser que o quarto seja a seleção inicial.
Executar processamento ao selecionar um item
Talvez você queira fazer algo ao selecionar um item na lista suspensa. Isso pode ser implementado da mesma forma que quando um botão é clicado.
O objeto tem uma lista suspensa e um texto um de cada vez. Depois de selecionar um item na lista suspensa, verifique se o conteúdo é exibido em um objeto de texto à direita. Não importa nada além do posicionamento dos objetos, então você pode configurá-lo como quiser.
Primeiro, crie um script em seu projeto. DropdownItemSelector Neste caso, ele é chamado .
Abra o script e adicione o código ao seguinte:
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}";
}
}
Depois de salvar o script, anexe-o ao EventSystem objeto.
Conforme explicado nos botões Dicas para botões, essa dica anexa scripts EventSystem de forma consistente, a menos que haja um motivo específico para fazê-lo.
Anexe um objeto suspenso para obter o valor de e um objeto de texto para definir o valor.
Em seguida, selecione o objeto suspenso com o qual deseja trabalhar e adicione "On Value Change (Int32)" no Dropdown componente Inspector.
No item inferior esquerdo, precisamos colocar o objeto ao qual o script a ser operado está anexado, então o definimos aqui EventSystem .
OnSelectionChanged Selecione de Sem Função DropdownItemSelector .
Tente executá-lo para ver se ele está funcionando corretamente.
Adicionar itens dinamicamente
Você pode especificar quais itens podem ser selecionados no editor, mas pode haver momentos em que o estado muda durante o jogo e você deseja alterar os itens selecionados. Nesse caso, você alterará o item selecionado no programa.
O objeto organiza "drop-down" e "button x2" como mostrado abaixo. Você pode definir livremente parâmetros diferentes do alinhamento.
Crie um script e nomeie-o DropdownDynamic . O código deve ter esta aparência:
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 tem um controle sobre os itens a serem selecionados, para que Add você possa controlar dinamicamente os itens fazendo ou Remove sobre eles.
EventSystem Anexar scripts e objetos ao .
Atribua um método ao evento click dos botões add e delete, respectivamente.
Quando terminar, execute-o. Se o item for apagado no editor, o item não será exibido mesmo se você clicar nele.
Se você clicar no botão Adicionar quatro vezes, poderá ver que quatro itens foram adicionados.
Se você clicar no botão excluir duas vezes, poderá ver que dois itens foram excluídos.