Unity kullanıcı arabirimi açılan listesini kullanma

Sayfa güncel : 27 Aralık 2023 Çarşamba

Sayfa oluşturma tarihi : 24 Mart 2022 Perşembe

Doğrulama ortamı

Windows

pencereler 11

Unity Düzenleyicisi

2020.3.25f1

Bu ipucu için önkoşullar

Bu ipuçlarının açıklanması için ön koşul olarak aşağıdaki ayarlar önceden yapılmıştır.

İlk başta

Açılır menüler, kullanıcının birkaç seçenekten birini seçmesine izin vermek için kullanılabilir. Aralarından seçim yapabileceğiniz çok sayıda öğe olsa bile, ekranda yalnızca seçilen öğeler görüntülenir, bu da yerden tasarruf etmek için kullanışlıdır ve kullanıcının neyi seçtiğini anlamasını kolaylaştırır.

Açılır menüyü konumlandırma

Görünüme eklemek için hiyerarşiden bir "açılır menü" seçin.

Açılır listenin konumunu kendi takdirinize göre ayarlayın. Boyut küçük görünüyorsa, büyütmek için çerçeveyi sürükleyin.

İçindeki metnin boyutunu ayarlamak için Dropdown yerine İçeride'yi Label seçin.

Çalıştırdığınızda, açılır menüyü çalışırken görebilirsiniz. İlk durumda, aralarından seçim yapabileceğiniz üç öğe vardır, böylece seçimi değiştirebilirsiniz. Ancak, açılır listenin boyutunu veya Label yazı tipi boyutunu değiştirirseniz, açılır menüde görüntülenen metnin boyutuyla eşleşmez.

Açılır öğelerin boyutunu ayarlama

Açılır menüyü yerleştirirken nesnenin boyutunu veya yazı tipi boyutunu değiştirmediyseniz, bunu yapmanız gerekmez, ancak değiştirirseniz, açılır öğeyi de ayarlamanız gerekir.

Açılır nesne, seçilen öğenin görüntülendiğinde nasıl görüntülendiğinin tanımını içerir. Dropdown Template durum böyledir. Birkaç ayar yapmazsanız, hoş görünmeyecektir.

Her şeyden önce, yerleştirilen açılır listenin her parametresinin aşağıdaki gibi ayarlandığı varsayılır. Farklı parametrelerle ayar yapıyorsanız, sayıları değiştirin ve okuyun. Bu örnekte, diğer parametreler de ayarlanmıştır, ancak açılan öğelerle ilgili olmadıkları için bunlar atlanmıştır.

Nesne Parametresi	Adı Değeri
Açılır menü	yükseklik	72
Açılır > Etiketi	Yazı boyutu	40

Öğe yazı tipi boyutu

İlk olarak, öğenin yazı tipi boyutunu değiştirin. Nesne için > > >Dropdown Template Content > > Viewport Item Item Labelseçin. Etiket ile aynı olan 40 yazı tipi boyutunu belirtin. Daha fazla seçenek göstermek istiyorsanız, bunları biraz daha küçük yapabilirsiniz.

Yazı tipi boyutunu artırsanız bile, bir öğenin görüntü boyutu değişmez, bu nedenle çalıştırsanız bile hiçbir şey göremeyebilirsiniz.

Ürün boyutu

Ardından, bir öğenin boyutunu ayarlayın. Seçilecek nesneler > > > >Dropdown . Content Item Template Viewport Yüksekliği 72 olarak ayarlayın. Daha fazla seçenek göstermek istiyorsanız, bunları biraz daha küçük yapabilirsiniz.

Bu, öğenin öğelerini görünür kılar, ancak bazı nedenlerden dolayı, seçilen öğenin üst ve alt kısımları kaydırmadan bağımsız olarak biraz kesilir.

Bunu düzeltmek için > > >Dropdown Viewport ContentTemplate yüksekliğini 72 olarak Item ayarlayın. Bu, üst ve alt öğeleri düzgün bir şekilde görmenizi sağlayacaktır.

Bu arada, varsayılan açılır ayarlarda Item , yüksekliği 'den Content biraz daha büyük olarak ayarlanır. Sonuç olarak, seçilen öğenin üstünde ve altında hafif bir kenar boşluğu görüntülenir ve bu da baskı hissini azaltır.

Onay işareti boyutu

Onay işaretinin boyutu da küçük, bu yüzden düzelteceğim. Hedef nesne "> > Viewport > > >Item CheckmarkContent Item Template"Dropdown dir.

Genişliği ve yüksekliği değiştirirseniz, onay işareti de artacaktır, bu nedenle burada 72 olarak ayarlayın.

Çalıştırdığımda onay işareti daha büyük, ancak konum yanlış, bu yüzden bunu da düzelteceğim.

Item Checkmark Önce X pivotunu 0 olarak ayarlayın ve ardından X konumunu da 0 olarak ayarlayın. Bu, çekin veya etiketin boyutundan bağımsız olarak iyi bir yere yerleştirmenizi sağlar.

Ayrıca, etiketle çakıştığından, Item Lebel sol konumu onay işaretinin boyutuyla aynı yapmak için seçin.

Kaydırma çubuğu boyutu

Kaydırma çubuğu da küçüktür ve tıklatılması zordur, bu nedenle büyütün. Herkes boyut konusunda özeldir, bu yüzden belirlenebilecek bir şey değildir. Bu durumda, açılır listenin yüksekliğinin 2/3'ü olan 48'i ayarlıyoruz.

Seçilecek nesne, > >Dropdown Template Scrollbariçinde bir genişlik değerine ayarlanır.

Açılır simge boyutu

Öğe tarafında değil, ancak açılır simge hala küçük, bu yüzden değiştireceğim. Seçilecek nesne >Dropdown Arrow.

Simgenin boyutuna gelince, genişliği ve yüksekliği ayarlayarak boyutu değiştirebilirsiniz. Burada, açılır listenin yüksekliğiyle aynı olan 72'ye ayarladık.

Bu durumda, konum kapalı olacaktır, bu nedenle X pivotunu 1'e ve X konumunu 0'a ayarlayın. Bu, simgeyi boyutundan bağımsız olarak güzel bir konumda görüntülemenizi sağlar.

Görüntülenen açılır öğe sayısı

Öğenin boyutunu artırarak, aynı anda görüntülenebilecek daha az seçili öğe vardır, bu yüzden bunu artırmaya çalışacağız. Bu ayar >DropdownTemplate'de belirtilmiştir. Görüntülenecek öğelerin sayısı, öğe sayısı ile belirtilmediğinden, ancak boyut yüksekliğe göre ayarlandığından, belirtilen değer "öğe sayısı × yüksekliği" dir. Burada, yaklaşık 10 parça sergilemek istiyoruz, bu yüzden 72 x 10 = 720 ayarlayın.

Ekran alanı büyütüldü, ancak şu anda yalnızca 3 öğe var, bu nedenle yalnızca 3 öğe görüntüleniyor.

Seçimi ayarlama

Varsayılan olarak, "Seçenek A ~ Seçenek C" nin üç öğesi ayarlanmıştır. Bu öğeler, Dropdown nesnenin Dropdown bileşeninde bulunur.

Denetçiyi aşağı kaydırırsanız, adı özgürce değiştirebileceğiniz veya ekleyebileceğiniz veya silebileceğiniz "Seçenekler" öğesini bulacaksınız.

İlk seçimi ayarlama

Öğelerin seçimi sayılarla belirlenir. Dropdown Dropdown İlk seçimi, nesnenin bileşeninin değerinde belirtebilirsiniz. Madde numaralandırması 0'dan başlar, bu nedenle dördüncüsünün ilk seçim olmasını istiyorsanız 3'ü ayarlayın.

Bir öğe seçerken işlem gerçekleştirme

Açılır menüden bir öğe seçtiğinizde bir şeyler yapmak isteyebilirsiniz. Bu, bir düğmeye tıklandığında olduğu gibi uygulanabilir.

Nesnenin bir açılır menüsü ve birer birer metni vardır. Açılır menüden bir öğe seçtikten sonra, içeriğin sağdaki bir metin nesnesinde görüntülendiğinden emin olun. Nesnelerin yerleştirilmesi dışında hiçbir şey önemli değildir, bu yüzden istediğiniz gibi ayarlayabilirsiniz.

İlk olarak, projenizde bir komut dosyası oluşturun. DropdownItemSelector Bu durumda, adlandırılır .

Komut dosyasını açın ve kodu aşağıdakilere ekleyin:

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

Komut dosyasını kaydettikten sonra nesneye EventSystem ekleyin. Düğmeler için ipuçlarında açıklandığı gibi, bu ipucu, belirli bir neden olmadıkça komut dosyalarını EventSystem tutarlı bir şekilde ekler.

Değeri almak için bir açılır nesne ve değeri ayarlamak için bir metin nesnesi ekleyin.

Ardından, çalışmak istediğiniz açılır nesneyi seçin ve Inspector bileşenine Dropdown "Değer Değişikliğinde (Int32)" ekleyin.

Sol alt öğeye, çalıştırılacak betiğin eklendiği nesneyi koymamız gerekiyor, bu yüzden buraya EventSystem ayarladık .

İşlev Yok'tan OnSelectionChanged DropdownItemSelector seçin.

Düzgün çalışıp çalışmadığını görmek için çalıştırmayı deneyin.

Öğeleri dinamik olarak ekleme

Düzenleyicide hangi öğelerin seçilebileceğini belirleyebilirsiniz, ancak oyun sırasında durumun değiştiği ve seçtiğiniz öğeleri değiştirmek istediğiniz zamanlar olabilir. Bu durumda, programda seçilen öğeyi değiştireceksiniz.

Nesne, aşağıda gösterildiği gibi "açılır menü" ve "düğme x2"yi düzenler. Hizalama dışındaki parametreleri serbestçe ayarlayabilirsiniz.

Bir komut dosyası oluşturun ve adlandırın DropdownDynamic . Kod şöyle görünmelidir:

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 Seçilecek öğeler üzerinde bir kontrole sahiptir, böylece Add öğeleri yaparak veya Remove üzerlerinde dinamik olarak kontrol edebilirsiniz.

EventSystem öğesine komut dosyaları ve nesneler ekleyin.

Sırasıyla ekle ve sil düğmelerinin click olayına bir yöntem atayın.

İşiniz bittiğinde çalıştırın. Öğe düzenleyicide silinirse, tıklatsanız bile görüntülenmez.

Ekle düğmesine dört kez tıklarsanız, dört öğenin eklendiğini görebilirsiniz.

Sil düğmesine iki kez tıklarsanız, iki öğenin silindiğini görebilirsiniz.

Unity kullanıcı arabiriminde düğmeleri kullanma

Seçili öğe, açılan öğeler listesinin en üstünde olacak şekilde kaydırın