Menggunakan menu dropdown UI Unity

Halaman Diperbarui : Rabu, 27 Desember 2023

Tanggal pembuatan halaman : Kamis, 24 Maret 2022

Lingkungan verifikasi

Windows

jendela 11

Editor Kesatuan

25f1/3/2020

Prasyarat untuk tip ini

Pengaturan berikut telah dibuat sebelumnya sebagai prasyarat untuk penjelasan tips ini.

Pada awalnya

Dropdown dapat digunakan untuk memungkinkan pengguna memilih salah satu dari beberapa pilihan. Bahkan jika ada banyak item untuk dipilih, hanya item yang dipilih yang ditampilkan di layar, yang berguna untuk menghemat ruang dan memudahkan pengguna untuk memahami apa yang mereka pilih.

Memosisikan drop-down

Pilih "dropdown" dari hierarki untuk menambahkannya ke tampilan.

Sesuaikan posisi drop-down dengan kebijaksanaan Anda. Jika ukurannya tampak kecil, seret bingkai untuk membuatnya lebih besar.

Untuk Dropdown mengatur ukuran teks di dalamnya, pilih Ada di dalam Label , bukan .

Saat Anda menjalankannya, Anda dapat melihat dropdown beraksi. Dalam keadaan awal, ada tiga item untuk dipilih, sehingga Anda dapat beralih pilihan. Namun, jika Anda mengubah ukuran drop-down atau Label ukuran font , itu tidak akan cocok dengan ukuran teks yang ditampilkan di drop-down.

Menyesuaikan ukuran item drop-down

Jika Anda belum mengubah ukuran objek atau ukuran font saat Anda menempatkan dropdown, Anda tidak perlu melakukan ini, tetapi jika Anda melakukannya, Anda harus mengatur item dropdown juga.

Objek drop-down berisi definisi tentang bagaimana item yang dipilih ditampilkan saat ditampilkan. Dropdown Template adalah kasusnya. Jika Anda tidak mengatur beberapa pengaturan, itu tidak akan terlihat cantik.

Pertama-tama, diasumsikan bahwa setiap parameter drop-down yang ditempatkan ditetapkan sebagai berikut. Jika Anda mengatur dengan parameter yang berbeda, ganti angka dan baca. Dalam contoh ini, parameter lain juga ditetapkan, tetapi dihilangkan karena tidak terkait dengan item drop-down.

Nilai	Nama Parameter Objek
Tarik-turun	Tinggi	72
Dropdown > Label	Ukuran font	40

Ukuran font item

Pertama, ubah ukuran font item. Pilih > > >Dropdown Template Content > > Viewport Item Item Labeluntuk objek. Tentukan ukuran font 40, yang sama dengan Label. Jika Anda ingin menunjukkan lebih banyak pilihan, Anda dapat membuatnya sedikit lebih kecil.

Bahkan jika Anda meningkatkan ukuran font, ukuran tampilan satu item tidak berubah, sehingga Anda mungkin tidak dapat melihat apa pun bahkan jika Anda menjalankannya.

Ukuran Barang

Selanjutnya, atur ukuran satu item. Objek yang dipilih > > > >Dropdown . Content Item Template Viewport Atur tinggi ke 72. Jika Anda ingin menunjukkan lebih banyak pilihan, Anda dapat membuatnya sedikit lebih kecil.

Ini membuat elemen item terlihat, tetapi untuk beberapa alasan, bagian atas dan bawah item yang dipilih terpotong sedikit terlepas dari pengguliran.

Untuk memperbaikinya, atur ketinggian > > >Dropdown Viewport ContentTemplate ke Item 72, yang sama dengan . Ini akan memungkinkan Anda untuk melihat item atas dan bawah dengan benar.

Omong-omong, dalam pengaturan Item drop-down default , ketinggian diatur sedikit lebih besar dari Content . Akibatnya, sedikit margin ditampilkan di atas dan di bawah item yang dipilih, mengurangi perasaan tertekan.

Ukuran tanda centang

Ukuran tanda centangnya juga kecil, jadi saya akan memperbaikinya. Objek target adalah "> > Viewport > > > Item CheckmarkContent Item Template ".Dropdown

Jika Anda mengubah lebar dan tinggi, tanda centang juga akan meningkat, jadi atur ke 72 di sini.

Ketika saya menjalankannya, tanda centangnya lebih besar, tetapi posisinya salah, jadi saya akan memperbaikinya juga.

Item Checkmark Pertama, atur pivot X ke 0, lalu atur posisi X ke 0 juga. Ini memungkinkan Anda untuk menempatkannya di tempat yang baik terlepas dari ukuran cek atau label.

Juga, karena tumpang tindih label, Item Lebel pilih untuk membuat posisi kiri sama dengan ukuran tanda centang.

Ukuran bilah gulir

Bilah gulir juga kecil dan sulit diklik, jadi buatlah lebih besar. Semua orang khusus tentang ukurannya, jadi itu bukan sesuatu yang bisa ditentukan. Dalam hal ini, kami menetapkan 48, yang merupakan 2/3 dari ketinggian dropdown.

Objek yang akan dipilih diatur ke nilai lebar dalam >Dropdown Template > Scrollbar.

Ukuran ikon drop-down

Bukan di sisi item, tapi ikon drop-down masih kecil, jadi saya akan mengubahnya. Objek yang akan dipilih adalah >Dropdown Arrow.

Sedangkan untuk ukuran ikon, Anda dapat mengubah ukuran dengan mengatur lebar dan tinggi. Di sini, kami mengaturnya ke 72, yang sama dengan ketinggian dropdown.

Jika ini masalahnya, posisi akan mati, jadi atur pivot X ke 1 dan posisi X ke 0. Ini memungkinkan Anda untuk menampilkan ikon dalam posisi yang bagus terlepas dari ukurannya.

Jumlah item drop-down yang ditampilkan

Dengan meningkatkan ukuran item, ada lebih sedikit item terpilih yang dapat ditampilkan pada satu waktu, jadi kami akan mencoba meningkatkannya. Pengaturan ini ditentukan dalam >Dropdown Template. Karena jumlah item yang akan ditampilkan tidak ditentukan oleh jumlah item, tetapi ukurannya ditentukan oleh tinggi, nilai yang ditentukan adalah "tinggi × jumlah item". Di sini, kami ingin menampilkan sekitar 10 buah, jadi 72 x 10 = 720 atur .

Area tampilan diperbesar, tetapi saat ini hanya ada 3 item, jadi hanya 3 item yang ditampilkan.

Mengatur pilihan

Secara default, tiga item "Opsi A ~ Opsi C" ditetapkan. Barang-barang Dropdown ini terletak di komponen objek Dropdown .

Jika Anda menggulir ke bawah inspektur, Anda akan menemukan item "Opsi", di mana Anda dapat dengan bebas mengubah nama atau menambah atau menghapus.

Mengatur pilihan awal

Pemilihan item ditentukan oleh angka. Dropdown Dropdown Anda dapat menentukan pilihan awal dalam nilai komponen objek. Penomoran item dimulai dari 0, jadi atur 3 jika Anda ingin yang keempat menjadi pilihan awal.

Melakukan pemrosesan saat memilih item

Anda mungkin ingin melakukan sesuatu saat memilih item di menu dropdown. Ini dapat diimplementasikan dengan cara yang sama seperti ketika tombol diklik.

Objek memiliki dropdown dan teks satu per satu. Setelah memilih item di drop-down, pastikan konten ditampilkan dalam objek teks di sebelah kanan. Tidak masalah apa pun selain penempatan objek, jadi Anda dapat mengaturnya sesuka Anda.

Pertama, buat skrip di proyek Anda. DropdownItemSelector Dalam hal ini, dinamai .

Buka skrip dan tambahkan kode berikut ini:

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

Setelah Anda menyimpan skrip, lampirkan ke EventSystem objek. Seperti yang dijelaskan dalam Tips untuk tombol, tip ini secara konsisten melampirkan skrip EventSystem kecuali ada alasan khusus untuk melakukannya.

Lampirkan objek turun bawah untuk mendapatkan nilai dari dan objek teks untuk mengatur nilai.

Selanjutnya, pilih objek drop-down yang ingin Anda kerjakan dan tambahkan "On Value Change (Int32)" di Dropdown komponen Inspector.

Di item kiri bawah, kita perlu meletakkan objek tempat skrip yang akan dioperasikan dilampirkan, jadi kita atur di sini EventSystem .

Pilih dari OnSelectionChanged dari No Function DropdownItemSelector .

Coba jalankan untuk melihat apakah itu berfungsi dengan baik.

Menambahkan item secara dinamis

Anda dapat menentukan item mana yang dapat dipilih di editor, tetapi mungkin ada kalanya status berubah selama permainan dan Anda ingin mengubah item yang Anda pilih. Dalam hal ini, Anda akan mengubah item yang dipilih dalam program.

Objek mengatur "drop-down" dan "tombol x2" seperti yang ditunjukkan di bawah ini. Anda dapat dengan bebas mengatur parameter selain perataan.

Buat skrip dan beri nama DropdownDynamic . Kode akan terlihat seperti ini:

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 memiliki kontrol atas item yang akan dipilih, sehingga Add Anda dapat mengontrol item secara dinamis dengan melakukan atau Remove pada item tersebut.

EventSystem Lampirkan skrip dan objek ke .

Tetapkan metode ke peristiwa klik tombol tambah dan hapus, masing-masing.

Setelah selesai, jalankan. Jika item dihapus di editor, item tidak akan ditampilkan meskipun Anda mengekliknya.

Jika Anda mengklik tombol tambah empat kali, Anda dapat melihat bahwa empat item telah ditambahkan.

Jika Anda mengklik tombol hapus dua kali, Anda dapat melihat bahwa dua item telah dihapus.

Menggunakan tombol di UI Unity

Menggulir sehingga item yang dipilih berada di bagian atas daftar item turun bawah