یونٹی یو آئی ڈراپ ڈاؤن کا استعمال کرتے ہوئے

جب صفحے کی تازہ کاری :
صفحہ تخلیق تاریخ :

تصدیق کا ماحول

Windows
  • ونڈوز 11
یونٹی ایڈیٹر
  • 2020.3.25f1

اس ٹوٹکے کے لئے ضروری شرائط

مندرجہ ذیل ترتیبات ان تجاویز کی وضاحت کے لئے ایک شرط کے طور پر پیشگی کی گئی ہیں.

سب سے پہلے

ڈراپ ڈاؤن کا استعمال صارف کو متعدد اختیارات میں سے کسی ایک کو منتخب کرنے کی اجازت دینے کے لئے کیا جاسکتا ہے۔ یہاں تک کہ اگر انتخاب کرنے کے لئے بہت ساری اشیاء ہیں تو ، صرف منتخب آئٹمز اسکرین پر ظاہر ہوتے ہیں ، جو جگہ بچانے کے لئے مفید ہیں اور صارف کے لئے یہ سمجھنا آسان بناتے ہیں کہ وہ کیا منتخب کررہے ہیں۔

ڈراپ ڈاؤن پوزیشن کریں

اسے منظر میں شامل کرنے کے لئے درجہ بندی سے "ڈراپ ڈاؤن" منتخب کریں۔

ڈراپ ڈاؤن کی پوزیشن کو اپنی صوابدید پر ایڈجسٹ کریں۔ اگر سائز چھوٹا لگتا ہے تو ، اسے بڑا بنانے کے لئے فریم کو گھسیٹیں۔

اندر متن کا سائز سیٹ کرنے کے لئے Dropdown ، اس کے بجائے اندر Label ہے کو منتخب کریں۔

جب آپ اسے چلاتے ہیں تو ، آپ ایکشن میں ڈراپ ڈاؤن دیکھ سکتے ہیں۔ ابتدائی حالت میں ، انتخاب کرنے کے لئے تین اشیاء ہیں ، لہذا آپ انتخاب کو تبدیل کرسکتے ہیں۔ تاہم ، اگر آپ ڈراپ ڈاؤن کا سائز یا Label فونٹ کا سائز تبدیل کرتے ہیں تو ، یہ ڈراپ ڈاؤن میں دکھائے گئے متن کے سائز سے میل نہیں کھائے گا۔

ڈراپ ڈاؤن آئٹمز کا سائز ایڈجسٹ کریں

اگر آپ نے ڈراپ ڈاؤن کرتے وقت آبجیکٹ کا سائز یا فونٹ کا سائز تبدیل نہیں کیا ہے تو ، آپ کو ایسا کرنے کی ضرورت نہیں ہے ، لیکن اگر آپ ایسا کرتے ہیں تو ، آپ کو ڈراپ ڈاؤن آئٹم کو بھی سیٹ کرنے کی ضرورت ہوگی۔

ڈراپ ڈاؤن آبجیکٹ میں اس بات کی تعریف ہوتی ہے کہ منتخب کردہ آئٹم کو کس طرح دکھایا جاتا ہے جب اسے دکھایا جاتا ہے۔ Dropdown Template معاملہ ہے. اگر آپ کچھ ترتیبات سیٹ نہیں کرتے ہیں تو ، یہ خوبصورت نہیں لگے گا۔

سب سے پہلے ، یہ فرض کیا جاتا ہے کہ رکھے گئے ڈراپ ڈاؤن کا ہر پیرامیٹر مندرجہ ذیل طور پر ترتیب دیا گیا ہے۔ اگر آپ مختلف پیرامیٹرز کے ساتھ ترتیب دے رہے ہیں تو ، نمبروں کو تبدیل کریں اور انہیں پڑھیں۔ اس مثال میں ، دیگر پیرامیٹرز بھی مقرر کیے گئے ہیں ، لیکن انہیں خارج کردیا گیا ہے کیونکہ وہ ڈراپ ڈاؤن آئٹمز سے متعلق نہیں ہیں۔

آبجیکٹ پیرامیٹر نام کی قدر
ڈراپ ڈاؤن اونچائی 72
ڈراپ ڈاؤن > لیبل فونٹ کا سائز 40

آئٹم فونٹ کا سائز

سب سے پہلے ، آئٹم کا فونٹ سائز تبدیل کریں۔ آبجیکٹ کے لئے > > >Dropdown Template Content > > Viewport Item Item Labelمنتخب کریں۔ 40 کے فونٹ سائز کی وضاحت کریں ، جو لیبل کے برابر ہے۔ اگر آپ زیادہ انتخاب دکھانا چاہتے ہیں تو ، آپ انہیں تھوڑا سا چھوٹا بنا سکتے ہیں۔

یہاں تک کہ اگر آپ فونٹ سائز میں اضافہ کرتے ہیں تو ، ایک آئٹم کا ڈسپلے سائز تبدیل نہیں ہوتا ہے ، لہذا اگر آپ اسے چلاتے ہیں تو بھی آپ کچھ بھی نہیں دیکھ سکتے ہیں۔

آئٹم کا سائز

اگلا ، ایک آئٹم کا سائز سیٹ کریں۔ منتخب کرنے والے آبجیکٹس > > > >Dropdown Template Viewport ہیں۔ Content Item اونچائی 72 مقرر کریں. اگر آپ زیادہ انتخاب دکھانا چاہتے ہیں تو ، آپ انہیں تھوڑا سا چھوٹا بنا سکتے ہیں۔

اس سے آئٹم کے عناصر نظر آتے ہیں ، لیکن کسی وجہ سے ، منتخب آئٹم کے اوپری اور نچلے حصے کو سکرول کرنے کی پرواہ کیے بغیر تھوڑا سا کاٹ دیا جاتا ہے۔

اسے ٹھیک کرنے کے لئے ، > > >Dropdown Viewport ContentTemplate Item کی اونچائی 72 مقرر کریں ، جو کہ اتنا ہی ہے۔ اس سے آپ اوپر اور نیچے کی اشیاء کو مناسب طریقے سے دیکھ سکیں گے۔

ویسے ، پہلے سے طے شدہ ڈراپ ڈاؤن ترتیبات Item میں ، اونچائی اس سے Content تھوڑا سا بڑا مقرر کیا گیا ہے۔ نتیجے کے طور پر ، منتخب آئٹم کے اوپر اور نیچے تھوڑا سا مارجن ظاہر ہوتا ہے ، جس سے دباؤ کا احساس کم ہوجاتا ہے۔

چیک مارک کا سائز

چیک مارک کا سائز بھی چھوٹا ہے ، لہذا میں اسے ٹھیک کروں گا۔ ہدف آبجیکٹ "Dropdown> > Viewport > > >Content Template Item Item Checkmark" ہے.

اگر آپ چوڑائی اور اونچائی تبدیل کرتے ہیں تو چیک مارک بھی بڑھ جائے گا ، لہذا اسے یہاں 72 پر سیٹ کریں۔

جب میں اسے چلاتا ہوں تو چیک مارک بڑا ہوتا ہے ، لیکن پوزیشن غلط ہوتی ہے ، لہذا میں اسے بھی ٹھیک کروں گا۔

Item Checkmark سب سے پہلے ، محور ایکس کو 0 پر سیٹ کریں ، اور پھر پوزیشن ایکس کو بھی 0 پر سیٹ کریں۔ یہ آپ کو چیک یا لیبل کے سائز سے قطع نظر اسے اچھی جگہ پر رکھنے کی اجازت دیتا ہے۔

اس کے علاوہ ، چونکہ یہ لیبل کو اوورلیپ کرتا ہے ، Item Lebel لہذا بائیں پوزیشن کو چیک مارک کے سائز کے برابر بنانے کا انتخاب کریں۔

Scrollbar سائز

سکرول بار بھی چھوٹا ہے اور کلک کرنا مشکل ہے ، لہذا اسے بڑا بنائیں۔ ہر کوئی سائز کے بارے میں خاص ہے ، لہذا یہ ایسی چیز نہیں ہے جس کا تعین کیا جاسکتا ہے۔ اس معاملے میں ، ہم نے 48 سیٹ کیا ، جو ڈراپ ڈاؤن کی اونچائی کا 2/3 ہے۔

منتخب کی جانے والی آبجیکٹ کو > Scrollbarمیں چوڑائی کی قدر >Dropdown Template سیٹ کیا گیا ہے۔

ڈراپ ڈاؤن آئیکن سائز

یہ آئٹم سائیڈ پر نہیں ہے ، لیکن ڈراپ ڈاؤن آئیکن ابھی بھی چھوٹا ہے ، لہذا میں اسے تبدیل کروں گا۔ منتخب کیا جانے والا آبجیکٹ >Dropdown Arrowہے۔

آئیکن کے سائز کے لئے ، آپ چوڑائی اور اونچائی مقرر کرکے سائز تبدیل کرسکتے ہیں۔ یہاں ، ہم نے اسے 72 پر سیٹ کیا ، جو ڈراپ ڈاؤن کی اونچائی کے برابر ہے۔

اگر ایسا ہے تو ، پوزیشن بند ہوجائے گی ، لہذا محور ایکس کو 1 پر اور پوزیشن ایکس کو 0 پر سیٹ کریں۔ یہ آپ کو سائز سے قطع نظر آئیکن کو اچھی پوزیشن میں ظاہر کرنے کی اجازت دیتا ہے۔

دکھائے جانے والے ڈراپ ڈاؤن آئٹمز کی تعداد

آئٹم کے سائز میں اضافہ کرکے ، کم منتخب آئٹمز ہیں جو ایک وقت میں دکھائے جاسکتے ہیں ، لہذا ہم اسے بڑھانے کی کوشش کریں گے۔ یہ ترتیب >Dropdown Templateمیں بیان کی گئی ہے۔ چونکہ ظاہر کی جانے والی اشیاء کی تعداد آئٹمز کی تعداد سے واضح نہیں ہوتی ہے ، لیکن سائز اونچائی کے لحاظ سے مقرر کیا جاتا ہے ، لہذا بیان کردہ قدر "آئٹمز کی اونچائی × تعداد" ہے۔ یہاں ، ہم تقریبا 10 ٹکڑوں کو ظاہر کرنا چاہتے ہیں ، لہذا 72 x 10 = 720 سیٹ کریں۔

ڈسپلے کا علاقہ بڑھا دیا گیا ہے ، لیکن اس وقت صرف 3 آئٹمز ہیں ، لہذا صرف 3 آئٹمز ظاہر ہوتے ہیں۔

انتخاب سیٹ کریں

پہلے سے طے شدہ طور پر ، "آپشن اے ~ آپشن سی" کے تین آئٹم سیٹ کیے گئے ہیں۔ یہ اشیاء آبجیکٹ 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 ہے جب تک کہ ایسا کرنے کی کوئی خاص وجہ نہ ہو۔

قیمت حاصل کرنے کے لئے ڈراپ ڈاؤن آبجیکٹ اور قیمت مقرر کرنے کے لئے ٹیکسٹ آبجیکٹ منسلک کریں۔

اگلا ، جس ڈراپ ڈاؤن آبجیکٹ کے ساتھ آپ کام کرنا چاہتے ہیں اسے منتخب کریں اور انسپکٹر جزو میں "آن ویلیو چینج (انٹ 32)" Dropdown شامل کریں۔

نچلے بائیں آئٹم میں ، ہمیں وہ آبجیکٹ ڈالنے کی ضرورت ہے جس سے اسکرپٹ منسلک ہے ، لہذا ہم اسے یہاں 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 اسکرپٹ اور اشیاء کو منسلک کریں۔

بالترتیب شامل اور حذف بٹن کے کلک ایونٹ کو ایک طریقہ تفویض کریں۔

جب آپ کام مکمل کر لیں تو اسے چلائیں۔ اگر آئٹم ایڈیٹر میں مٹا دیا گیا ہے تو ، اگر آپ اس پر کلک کرتے ہیں تو بھی آئٹم ظاہر نہیں ہوگا۔

اگر آپ ایڈ بٹن پر چار بار کلک کرتے ہیں تو ، آپ دیکھ سکتے ہیں کہ چار آئٹم شامل کیے گئے ہیں۔

اگر آپ حذف کے بٹن پر دو بار کلک کرتے ہیں تو ، آپ دیکھ سکتے ہیں کہ دو آئٹم حذف کردیئے گئے ہیں۔