استفاده از کشویی UI Unity

محیط تایید

ویندوز

• ویندوز 11

ویرایشگر یونیتی

• دانلود: 2020.3.25f1

پیشنیازهای این نکته

تنظیمات زیر از قبل به عنوان پیش نیاز برای توضیح این نکات ساخته شده است.

• معرفی پکیج سیستم ورودی
• تراز کردن دوربین (2D) با بوم

در ابتدا

Dropdowns می تواند مورد استفاده قرار گیرد تا کاربر بتواند یکی از چندین گزینه را انتخاب کند. حتی اگر موارد زیادی برای انتخاب وجود داشته باشد، فقط موارد انتخاب شده بر روی صفحه نمایش داده می شود، که برای صرفه جویی در فضا مفید است و کاربر را برای درک انچه که انتخاب می کند اسان تر می کند.

موقعیت یک افت به پایین

یک "dropdown" را از سلسله مراتب انتخاب کنید تا ان را به view اضافه کنید.

موقعیت کشویی را به صلاحدید خود تنظیم کنید. اگر اندازه کوچک به نظر می رسد، قاب را بکشید تا بزرگتر شود.

برای Dropdown تنظیم اندازه متن در داخل، به جای .Label

هنگامی که ان را اجرا می کنید، می توانید کشویی را در عمل ببینید. در حالت اولیه، سه مورد برای انتخاب وجود دارد، بنابراین شما می توانید انتخاب را تغییر دهید. با این حال، اگر اندازه کشویی یا Label اندازه فونت را تغییر دهید، با اندازه متن نمایش داده شده در کشویی مطابقت ندارد.

تنظیم اندازه موارد کشویی

اگر اندازه شی یا اندازه فونت را هنگام قرار دادن کشویی تغییر نداده اید، لازم نیست این کار را انجام دهید، اما اگر این کار را انجام دهید، باید ایتم کشویی را نیز تنظیم کنید.

شیء کشویی شامل تعریفی از نحوه نمایش ایتم انتخاب شده هنگام نمایش ان است. Dropdown Template این مورد است. اگر چند تنظیمات را تنظیم نکنید، زیبا به نظر نمی رسد.

اول از همه، فرض بر این است که هر پارامتر از کشویی قرار داده شده به شرح زیر است. اگر با پارامترهای مختلف تنظیم می کنید، اعداد را جایگزین کنید و انها را بخوانید. در این مثال، پارامترهای دیگری نیز تنظیم می شوند، اما حذف می شوند زیرا انها مربوط به موارد کشویی نیستند.

اندازه قلم مورد

ابتدا اندازه قلم مورد را تغییر دهید. > > > > >Dropdown Item LabelTemplate Content Viewport Item را برای object انتخاب کنید. اندازه فونت 40 را مشخص کنید که همان Label است. اگر می خواهید انتخاب های بیشتری را نشان دهید، می توانید انها را کمی کوچکتر کنید.

حتی اگر اندازه فونت را افزایش دهید، اندازه صفحه نمایش یک مورد تغییر نمی کند، بنابراین ممکن است حتی اگر ان را اجرا کنید، قادر به دیدن چیزی نباشید.

اندازه مورد

بعد، اندازه یک مورد را تنظیم کنید. اشیاء برای انتخاب > > > >Dropdown Template Viewport هستند. Content Item ارتفاع را روی 72 تنظیم کنید. اگر می خواهید انتخاب های بیشتری را نشان دهید، می توانید انها را کمی کوچکتر کنید.

این باعث می شود عناصر ایتم قابل مشاهده باشد، اما به دلایلی، بالا و پایین مورد انتخاب شده بدون در نظر گرفتن پیمایش کمی قطع می شود.

برای رفع این مشکل، ارتفاع > > >Dropdown Viewport ContentTemplate را روی Item 72 تنظیم کنید که همان است. این به شما اجازه می دهد تا موارد بالا و پایین را به درستی ببینید.

به هر حال، در تنظیمات Item کشویی پیش فرض، ارتفاع کمی بزرگتر از Content تنظیم شده است. در نتیجه، یک حاشیه جزئی در بالا و پایین مورد انتخاب شده نمایش داده می شود و احساس فشار را کاهش می دهد.

اندازه علامت

اندازه علامت نیز کوچک است، بنابراین من ان را تعمیر می کنم. شیء هدف "Dropdown> > Viewport > > >Content Template Item Item Checkmark" است.

اگر عرض و ارتفاع را تغییر دهید، علامت چک نیز افزایش می یابد، بنابراین ان را در اینجا به 72 تنظیم کنید.

هنگامی که من ان را اجرا می کنم، علامت چک بزرگتر است، اما موقعیت اشتباه است، بنابراین من این را نیز تعمیر خواهم کرد.

Item Checkmark ابتدا محور 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 ، مگر اینکه دلیل خاصی برای انجام این کار وجود داشته باشد.

یک شیء کشویی را برای به دست اوردن مقدار از و یک شیء متنی برای تنظیم مقدار پیوست کنید.

بعد، شی کشویی را که می خواهید با ان کار کنید انتخاب کنید و "On Value Change (Int32)" را Dropdown در جزء بازرس اضافه کنید.

در مورد پایین سمت چپ، ما باید شیئی را که اسکریپت به ان متصل است قرار دهیم، بنابراین ان را در اینجا EventSystem تنظیم می کنیم.

انتخاب OnSelectionChanged از No Function DropdownItemSelector

سعی کنید ان را اجرا کنید تا ببینید ایا به درستی کار می کند.

به صورت پویا موارد را اضافه کنید

شما می توانید مشخص کنید که کدام موارد را می توان در ویرایشگر انتخاب کرد، اما ممکن است زمان هایی وجود داشته باشد که وضعیت در طول بازی تغییر کند و شما می خواهید مواردی را که انتخاب می کنید تغییر دهید. در این مورد، مورد انتخاب شده در برنامه را تغییر خواهید داد.

شی ترتیب "کشویی" و "دکمه x2" همانطور که در زیر نشان داده شده است. شما می توانید ازادانه پارامترهایی غیر از تراز را تنظیم کنید.

یک اسکریپت ایجاد کنید و ان را نام 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 پیوست اسکریپت ها و اشیاء به .

یک روش را به ترتیب به رویداد کلیک دکمه های اضافه و حذف اختصاص دهید.

وقتی کارتان تمام شد، ان را اجرا کنید. اگر مورد در ویرایشگر پاک شود، مورد نمایش داده نخواهد شد حتی اگر روی ان کلیک کنید.

اگر چهار بار روی دکمه اضافه کلیک کنید، می توانید ببینید که چهار مورد اضافه شده است.

اگر دو بار روی دکمه حذف کلیک کنید، می توانید ببینید که دو مورد حذف شده اند.