यूनिटी UI ड्रॉपडाउन का उपयोग करना

सत्यापन वातावरण

विंडोज़

• विंडोज 11

एकता संपादक

• 2020.3.25f1

इस टिप के लिए आवश्यक शर्तें

इन युक्तियों के स्पष्टीकरण के लिए एक शर्त के रूप में निम्नलिखित सेटिंग्स को अग्रिम में बनाया गया है।

• इनपुट सिस्टम पैकेज ़ का परिचय
• कैनवास के साथ कैमरा (2 डी) संरेखित करें

पहले

ड्रॉपडाउन का उपयोग उपयोगकर्ता को कई विकल्पों में से एक का चयन करने की अनुमति देने के लिए किया जा सकता है। यहां तक कि अगर चुनने के लिए कई आइटम हैं, तो केवल चयनित आइटम स्क्रीन पर प्रदर्शित होते हैं, जो स्थान बचाने के लिए उपयोगी है और उपयोगकर्ता के लिए यह समझना आसान बनाता है कि वे क्या चुन रहे हैं।

ड्रॉप-डाउन की स्थिति

इसे दृश्य में जोड़ने के लिए पदानुक्रम से "ड्रॉपडाउन" का चयन करें।

ड्रॉप-डाउन की स्थिति को अपने विवेक ानुसार समायोजित करें। यदि आकार छोटा लगता है, तो इसे बड़ा बनाने के लिए फ्रेम खींचें।

अंदर पाठ का आकार सेट करने के लिए Dropdown , इसके बजाय इसे अंदर Label है का चयन करें।

जब आप इसे चलाते हैं, तो आप कार्रवाई में ड्रॉपडाउन देख सकते हैं। प्रारंभिक स्थिति में, चुनने के लिए तीन आइटम हैं, इसलिए आप चयन को बदल सकते हैं। हालाँकि, यदि आप ड्रॉप-डाउन का आकार या Label फ़ॉन्ट आकार बदलते हैं, तो यह ड्रॉप-डाउन में प्रदर्शित पाठ के आकार से मेल नहीं खाएगा.

ड्रॉप-डाउन आइटम्स का आकार समायोजित करें

यदि आपने ड्रॉपडाउन रखते समय ऑब्जेक्ट का आकार या फ़ॉन्ट आकार नहीं बदला है, तो आपको ऐसा करने की आवश्यकता नहीं है, लेकिन यदि आप ऐसा करते हैं, तो आपको ड्रॉपडाउन आइटम भी सेट करना होगा।

ड्रॉप-डाउन ऑब्जेक्ट में इस बात की परिभाषा होती है कि चयनित आइटम प्रदर्शित होने पर उसे कैसे प्रदर्शित किया जाता है. Dropdown Template मामला है। यदि आप कुछ सेटिंग्स सेट नहीं करते हैं, तो यह सुंदर नहीं दिखेगा।

सबसे पहले, यह माना जाता है कि रखे गए ड्रॉप-डाउन का प्रत्येक पैरामीटर निम्नानुसार सेट किया गया है। यदि आप विभिन्न मापदंडों के साथ सेट कर रहे हैं, तो संख्याओं को बदलें और उन्हें पढ़ें। इस उदाहरण में, अन्य पैरामीटर भी सेट किए गए हैं, लेकिन उन्हें छोड़ दिया गया है क्योंकि वे ड्रॉप-डाउन आइटम से संबंधित नहीं हैं।

आइटम फ़ॉन्ट आकार

सबसे पहले, आइटम का फ़ॉन्ट आकार परिवर्तित करें। ऑब्जेक्ट के लिए > > >Dropdown Template Content > > Viewport Item Item Labelका चयन करें. 40 का फ़ॉन्ट आकार निर्दिष्ट करें, जो लेबल के समान है. यदि आप अधिक विकल्प दिखाना चाहते हैं, तो आप उन्हें थोड़ा छोटा कर सकते हैं।

यहां तक कि अगर आप फ़ॉन्ट आकार बढ़ाते हैं, तो एक आइटम का प्रदर्शन आकार नहीं बदलता है, इसलिए आप इसे चलाने पर भी कुछ भी नहीं देख पाएंगे।

आइटम का आकार

इसके बाद, एक आइटम का आकार सेट करें। चयनित किए जाने वाले ऑब्जेक्ट > > > >Dropdown Template Viewport हैं. Content Item ऊंचाई 72 पर सेट करें। यदि आप अधिक विकल्प दिखाना चाहते हैं, तो आप उन्हें थोड़ा छोटा कर सकते हैं।

यह आइटम के तत्वों को दृश्यमान बनाता है, लेकिन किसी कारण से, चयनित आइटम के शीर्ष और निचले भाग को स्क्रॉल करने की परवाह किए बिना थोड़ा काट दिया जाता है।

इसे ठीक करने के लिए, > > >Dropdown Viewport ContentTemplate की ऊंचाई 72 पर सेट करेंItem, जो कि के समान है। इससे आप ऊपर और नीचे के आइटम को ठीक से देख पाएंगे।

वैसे, डिफ़ॉल्ट ड्रॉप-डाउन सेटिंग्स Item में, ऊंचाई की तुलना में थोड़ी बड़ी सेट की जाती Content है। नतीजतन, चयनित आइटम के ऊपर और नीचे एक मामूली मार्जिन प्रदर्शित होता है, जिससे दबाव की भावना कम हो जाती है।

चेकमार्क का आकार

चेकमार्क का आकार भी छोटा है, इसलिए मैं इसे ठीक कर दूंगा। लक्ष्य ऑब्जेक्ट "Dropdown> > Viewport > > >Content Template Item Item Checkmark" है।

यदि आप चौड़ाई और ऊंचाई बदलते हैं, तो चेक मार्क भी बढ़ जाएगा, इसलिए इसे यहां 72 पर सेट करें।

जब मैं इसे चलाता हूं, तो चेक मार्क बड़ा होता है, लेकिन स्थिति गलत है, इसलिए मैं इसे भी ठीक कर दूंगा।

Item Checkmark सबसे पहले, Pivot X को 0 पर सेट करें, और फिर स्थिति X को 0 पर भी सेट करें। यह आपको चेक या लेबल के आकार की परवाह किए बिना इसे एक अच्छी जगह पर रखने की अनुमति देता है।

इसके अलावा, चूंकि यह लेबल को ओवरलैप करता है, इसलिए Item Lebel बाईं स्थिति को चेक मार्क के आकार के समान बनाने का चयन करें।

स्क्रॉलपट्टी का आकार

स्क्रॉल बार भी छोटा और क्लिक करना मुश्किल है, इसलिए इसे बड़ा बनाएं। हर कोई आकार के बारे में विशेष है, इसलिए यह कुछ ऐसा नहीं है जिसे निर्धारित किया जा सकता है। इस मामले में, हमने 48 सेट किया, जो ड्रॉपडाउन की ऊंचाई का 2/3 है।

चयनित किए जाने वाले ऑब्जेक्ट को >Dropdown Template > Scrollbarमें चौड़ाई मान पर सेट किया जाता है.

ड्रॉप-डाउन आइकन आकार

यह आइटम साइड पर नहीं है, लेकिन ड्रॉप-डाउन आइकन अभी भी छोटा है, इसलिए मैं इसे बदल दूंगा। चयनित किया जाने वाला ऑब्जेक्ट >Dropdown Arrowहै.

आइकन के आकार के लिए, आप चौड़ाई और ऊंचाई सेट करके आकार बदल सकते हैं। यहां, हमने इसे 72 पर सेट किया है, जो ड्रॉपडाउन की ऊंचाई के समान है।

यदि ऐसा है, तो स्थिति बंद हो जाएगी, इसलिए धुरी X को 1 और स्थिति X को 0 पर सेट करें। यह आपको आकार की परवाह किए बिना आइकन को एक अच्छी स्थिति में प्रदर्शित करने की अनुमति देता है।

प्रदर्शित ड्रॉप-डाउन आइटम्स की संख्या

आइटम का आकार बढ़ाकर, कम चयनित आइटम हैं जिन्हें एक समय में प्रदर्शित किया जा सकता है, इसलिए हम इसे बढ़ाने का प्रयास करेंगे। यह सेटिंग >Dropdown Templateमें निर्दिष्ट है. चूंकि प्रदर्शित किए जाने वाले आइटम्स की संख्या आइटम्स की संख्या से निर्दिष्ट नहीं होती है, लेकिन आकार ऊंचाई से सेट होता है, इसलिए निर्दिष्ट मान "आइटम्स की ऊँचाई × संख्या" है. यहां, हम लगभग 10 टुकड़े प्रदर्शित करना चाहते हैं, इसलिए 72 x 10 = 720 सेट करें।

प्रदर्शन क्षेत्र बड़ा है, लेकिन फिलहाल केवल 3 आइटम हैं, इसलिए केवल 3 आइटम प्रदर्शित होते हैं।

चयन सेट करें

डिफ़ॉल्ट रूप से, "विकल्प A ~ विकल्प C" के तीन आइटम सेट हैं। ये आइटम ऑब्जेक्ट Dropdown के घटक में स्थित हैंDropdown।

यदि आप निरीक्षक को नीचे स्क्रॉल करते हैं, तो आपको "विकल्प" आइटम मिलेगा, जहां आप स्वतंत्र रूप से नाम बदल सकते हैं या जोड़ या हटा सकते हैं।

प्रारंभिक चयन सेट करें

आइटम्स का चयन संख्याओं द्वारा निर्धारित किया जाता है. Dropdown Dropdown आप ऑब्जेक्ट के घटक के मान में प्रारंभिक चयन निर्दिष्ट कर सकते हैं। आइटम नंबरिंग 0 से शुरू होती है, इसलिए यदि आप चाहते हैं कि चौथा प्रारंभिक चयन हो तो 3 सेट करें।

किसी आइटम का चयन करते समय प्रसंस्करण निष्पादित करें

जब आप ड्रॉपडाउन में किसी आइटम का चयन करते हैं तो आप कुछ करना चाह सकते हैं. इसे उसी तरह से लागू किया जा सकता है जब एक बटन पर क्लिक किया जाता है।

ऑब्जेक्ट में एक समय में एक ड्रॉपडाउन और एक पाठ होता है। ड्रॉप-डाउन में किसी आइटम का चयन करने के बाद, सुनिश्चित करें कि सामग्री दाईं ओर किसी पाठ ऑब्जेक्ट में प्रदर्शित होती है. यह वस्तुओं के प्लेसमेंट के अलावा कुछ भी मायने नहीं रखता है, इसलिए आप इसे अपनी इच्छानुसार सेट कर सकते हैं।

सबसे पहले, अपने प्रोजेक्ट में एक स्क्रिप्ट बनाएं। DropdownItemSelector इस मामले में, इसका नाम रखा गया है।

स्क्रिप्ट खोलें और कोड को निम्न में जोड़ें:

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

स्क्रिप्ट सहेजने के बाद, इसे ऑब्जेक्ट से अनुलग्न करें EventSystem . जैसा कि टिप्स फॉर बटन में बताया गया है, यह टिप लगातार स्क्रिप्ट EventSystem को संलग्न करती है जब तक कि ऐसा करने का कोई विशिष्ट कारण न हो।

से मान प्राप्त करने के लिए ड्रॉप-डाउन ऑब्जेक्ट और मान सेट करने के लिए पाठ ऑब्जेक्ट अनुलग्न करें.

इसके बाद, उस ड्रॉप-डाउन ऑब्जेक्ट का चयन करें जिसके साथ आप काम करना चाहते हैं और इंस्पेक्टर घटक में Dropdown "ऑन वैल्यू चेंज (Int32)" जोड़ें।

निचले बाएं आइटम में, हमें उस ऑब्जेक्ट को रखने की आवश्यकता है जिसमें स्क्रिप्ट को संचालित किया जाना है, इसलिए हम इसे यहां EventSystem सेट करते हैं।

नो फ़ंक्शन DropdownItemSelector से चुनें OnSelectionChanged ।

यह देखने के लिए इसे चलाने का प्रयास करें कि यह ठीक से काम कर रहा है या नहीं।

गतिशील रूप से आइटम जोड़ें

आप निर्दिष्ट कर सकते हैं कि संपादक में कौन से आइटम चुने जा सकते हैं, लेकिन ऐसे समय हो सकते हैं जब गेम के दौरान स्थिति बदल जाती है और आप अपने द्वारा चुने गए आइटम बदलना चाहते हैं। इस स्थिति में, आप प्रोग्राम में चयनित आइटम परिवर्तित करेंगे.

ऑब्जेक्ट "ड्रॉप-डाउन" और "बटन एक्स 2" की व्यवस्था करता है जैसा कि नीचे दिखाया गया है। आप संरेखण के अलावा अन्य पैरामीटर स्वतंत्र रूप से सेट कर सकते हैं।

एक स्क्रिप्ट बनाएँ और इसे नाम दें DropdownDynamic । कोड इस तरह दिखना चाहिए:

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 चयनित किए जाने वाले आइटम्स पर नियंत्रण है, इसलिए Add आप आइटम्स को करके या Remove उन पर गतिशील रूप से नियंत्रित कर सकते हैं.

EventSystem स्क्रिप्ट और ऑब्जेक्ट ्स को संलग्न करें.

क्रमशः जोड़ें और हटाएं बटन के क्लिक इवेंट के लिए एक विधि असाइन करें।

जब आप काम पूरा कर लें, तो इसे चलाएं। यदि आइटम संपादक में मिटा दिया गया है, तो आइटम को क्लिक करने पर भी वह प्रदर्शित नहीं होगा.

यदि आप जोड़ें बटन को चार बार क्लिक करते हैं, तो आप देख सकते हैं कि चार आइटम जोड़े गए हैं।

यदि आप दो बार हटाएँ बटन क्लिक करते हैं, तो आप देख सकते हैं कि दो आइटम हटा दिए गए हैं.