Korzystanie z listy rozwijanej interfejsu użytkownika aparatu Unity

Środowisko weryfikacyjne

Windows

• Okna 11

Edytor aparatu Unity

• 2020.3.25f1

Wymagania wstępne dotyczące tej porady

Poniższe ustawienia zostały wcześniej wprowadzone jako warunek objaśnienia tych wskazówek.

• Przedstawiamy pakiet Input System Package
• Dopasuj kamerę (2D) do płótna

Na początku

Listy rozwijane mogą służyć do umożliwienia użytkownikowi wybrania jednej z kilku opcji. Nawet jeśli do wyboru jest wiele elementów, na ekranie wyświetlane są tylko wybrane elementy, co jest przydatne do zaoszczędzenia miejsca i ułatwia użytkownikowi zrozumienie, co wybiera.

Umieszczanie listy rozwijanej

Wybierz "listę rozwijaną" z hierarchii, aby dodać ją do widoku.

Dostosuj położenie listy rozwijanej według własnego uznania. Jeśli rozmiar wydaje się mały, przeciągnij ramkę, aby ją powiększyć.

Aby Dropdown ustawić rozmiar tekstu w środku, wybierz opcję Jest w środku Label zamiast .

Po uruchomieniu możesz zobaczyć listę rozwijaną w akcji. W stanie początkowym do wyboru są trzy elementy, dzięki czemu można przełączać wybór. Jeśli jednak zmienisz rozmiar listy rozwijanej lub Label rozmiar czcionki , nie będzie on odpowiadał rozmiarowi tekstu wyświetlanego na liście rozwijanej.

Dostosowywanie rozmiaru elementów listy rozwijanej

Jeśli nie zmieniłeś rozmiaru obiektu lub rozmiaru czcionki podczas umieszczania listy rozwijanej, nie musisz tego robić, ale jeśli to zrobisz, musisz również ustawić element listy rozwijanej.

Obiekt rozwijany zawiera definicję sposobu wyświetlania wybranego elementu podczas jego wyświetlania. Dropdown Template jest w tym przypadku. Jeśli nie ustawisz kilku ustawień, nie będzie to ładnie wyglądać.

Przede wszystkim zakłada się, że każdy parametr umieszczonej listy rozwijanej jest ustawiony w następujący sposób. Jeśli ustawiasz z innymi parametrami, zastąp liczby i odczytaj je. W tym przykładzie ustawiane są również inne parametry, ale są one pomijane, ponieważ nie są powiązane z elementami listy rozwijanej.

Rozmiar czcionki elementu

Najpierw zmień rozmiar czcionki elementu. Wybierz > > >Dropdown Template Content > > Viewport Item Item Labelobiektu. Określ rozmiar czcionki 40, który jest taki sam jak rozmiar czcionki Etykieta. Jeśli chcesz pokazać więcej wyborów, możesz je nieco zmniejszyć.

Nawet jeśli zwiększysz rozmiar czcionki, rozmiar wyświetlania jednego elementu nie zmieni się, więc możesz nie być w stanie nic zobaczyć, nawet jeśli go uruchomisz.

Rozmiar produktu

Następnie ustaw rozmiar jednego elementu. Obiekty do wybrania są > > > >Dropdown . Content Item Template Viewport Ustaw wysokość na 72. Jeśli chcesz pokazać więcej wyborów, możesz je nieco zmniejszyć.

To sprawia, że elementy elementu są widoczne, ale z jakiegoś powodu góra i dół wybranego elementu są nieco odcięte niezależnie od przewijania.

Aby rozwiązać ten problem, ustaw wysokość > > >Dropdown Viewport ContentTemplate na Item 72, czyli tak samo jak . Umożliwi to prawidłowe wyświetlanie górnych i dolnych elementów.

Nawiasem mówiąc, w domyślnych ustawieniach Item rozwijanych wysokość jest nieco większa niż Content . W rezultacie nad i pod wybranym elementem wyświetlany jest niewielki margines, zmniejszając uczucie nacisku.

Rozmiar znacznika wyboru

Rozmiar znacznika wyboru jest również mały, więc go naprawię. Obiektem docelowym jest '> > Viewport > > > Item CheckmarkContent Item Template '.Dropdown

Jeśli zmienisz szerokość i wysokość, znacznik wyboru również się zwiększy, więc ustaw go tutaj na 72.

Kiedy go uruchomię, znacznik wyboru jest większy, ale pozycja jest nieprawidłowa, więc to też naprawię.

Item Checkmark Najpierw ustaw oś X na 0, a następnie ustaw pozycję X również na 0. Pozwala to na umieszczenie go w dobrym miejscu niezależnie od wielkości kratki lub etykiety.

Ponadto, ponieważ nakłada się na etykietę, wybierz, Item Lebel aby lewa pozycja była taka sama jak rozmiar znacznika wyboru.

Rozmiar paska przewijania

Pasek przewijania jest również mały i trudny do kliknięcia, więc powiększ go. Każdy zwraca uwagę na rozmiar, więc nie jest to coś, co można określić. W tym przypadku ustawiamy 48, czyli 2/3 wysokości listy rozwijanej.

Obiekt, który ma zostać wybrany, jest ustawiany na wartość szerokości w >Dropdown Template > Scrollbar.

Rozmiar ikony listy rozwijanej

Nie ma go po stronie przedmiotu, ale rozwijana ikona jest nadal mała, więc ją zmienię. Obiektem, który ma zostać wybrany, jest >Dropdown Arrow.

Jeśli chodzi o rozmiar ikony, możesz go zmienić, ustawiając szerokość i wysokość. Tutaj ustawiamy go na 72, czyli tyle samo, co wysokość listy rozwijanej.

W takim przypadku pozycja będzie wyłączona, więc ustaw oś X na 1, a pozycję X na 0. Pozwala to na wyświetlenie ikony w ładnej pozycji niezależnie od rozmiaru.

Liczba wyświetlanych pozycji rozwijanych

Zwiększając rozmiar elementu, jest mniej wybranych elementów, które mogą być wyświetlane w tym samym czasie, więc postaramy się to zwiększyć. To ustawienie jest określone w >Dropdown Template. Ponieważ liczba elementów do wyświetlenia nie jest określona przez liczbę elementów, ale rozmiar jest ustawiany przez wysokość, określona wartość to "wysokość × liczba elementów". Tutaj chcemy wyświetlić około 10 sztuk, więc 72 x 10 = 720 ustaw .

Obszar wyświetlania jest powiększony, ale w tej chwili są tylko 3 pozycje, więc wyświetlane są tylko 3 pozycje.

Ustawianie zaznaczenia

Domyślnie ustawione są trzy pozycje "Opcja A ~ Opcja C". Elementy te znajdują Dropdown się w komponencie obiektu Dropdown .

Jeśli przewiniesz inspektora w dół, znajdziesz pozycję "Opcje", w której możesz dowolnie zmieniać nazwę lub dodawać lub usuwać.

Ustawianie początkowego wyboru

Wybór pozycji jest określany przez liczby. Dropdown Dropdown Początkowy wybór można określić w wartości komponentu obiektu. Numeracja elementów zaczyna się od 0, więc ustaw 3, jeśli chcesz, aby czwarty wybór był początkowy.

Wykonaj przetwarzanie podczas wybierania elementu

Możesz chcieć coś zrobić, gdy wybierzesz element z listy rozwijanej. Można to zaimplementować w taki sam sposób, jak po kliknięciu przycisku.

Obiekt ma listę rozwijaną i tekst pojedynczo. Po wybraniu elementu z listy rozwijanej upewnij się, że zawartość jest wyświetlana w obiekcie tekstowym po prawej stronie. Nie ma znaczenia nic poza rozmieszczeniem obiektów, więc możesz ustawić go w dowolny sposób.

Najpierw utwórz skrypt w swoim projekcie. DropdownItemSelector W tym przypadku nazywa się .

Otwórz skrypt i dodaj kod do następujących elementów:

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

Po zapisaniu skryptu dołącz go do obiektu EventSystem . Jak wyjaśniono w poradach dotyczących przycisków, ta wskazówka konsekwentnie dołącza skrypty EventSystem , chyba że istnieje konkretny powód, aby to zrobić.

Dołącz obiekt rozwijany, z którego zostanie pobrana wartość, oraz obiekt tekstowy, z którego zostanie ustawiona wartość.

Następnie wybierz obiekt rozwijany, z którym chcesz pracować, i dodaj "Przy zmianie wartości (Int32)" w Dropdown komponencie Inspector.

W lewym dolnym elemencie musimy umieścić obiekt, do którego dołączony jest skrypt, który ma być obsługiwany, więc ustawiamy go tutaj EventSystem .

Wybierz z OnSelectionChanged Brak funkcji DropdownItemSelector .

Spróbuj go uruchomić, aby sprawdzić, czy działa poprawnie.

Dynamiczne dodawanie elementów

Możesz określić, które przedmioty mogą być wybierane w edytorze, ale może się zdarzyć, że stan zmieni się podczas gry i będziesz chciał zmienić wybrane przedmioty. W takim przypadku zmienisz element wybrany w programie.

Obiekt układa "listę rozwijaną" i "przycisk x2", jak pokazano poniżej. Możesz dowolnie ustawiać parametry inne niż wyrównanie.

Utwórz skrypt i nazwij DropdownDynamic go . Kod powinien wyglądać następująco:

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 ma kontrolę nad elementami, które mają zostać wybrane, dzięki czemu Add można dynamicznie sterować elementami, wykonując je lub Remove na nich.

EventSystem Dołączanie skryptów i obiektów do programu .

Przypisz metodę do zdarzenia kliknięcia odpowiednio przycisków dodawania i usuwania.

Kiedy skończysz, uruchom go. Jeśli element zostanie usunięty w edytorze, nie zostanie wyświetlony, nawet jeśli go klikniesz.

Jeśli klikniesz przycisk dodawania cztery razy, zobaczysz, że dodano cztery elementy.

Jeśli klikniesz dwukrotnie przycisk usuwania, zobaczysz, że dwa elementy zostały usunięte.