استخدام القائمة المنسدلة Unity UI

بيئة التحقق

نوافذ

• ويندوز ١١

محرر الوحدة

• 2020.3.25f1

المتطلبات الأساسية لهذه النصيحة

تم إجراء الإعدادات التالية مسبقا كشرط أساسي لشرح هذه النصائح.

• تقديم حزمة نظام الإدخال
• محاذاة الكاميرا (2D) مع اللوحة القماشية

في البداية

يمكن استخدام القوائم المنسدلة للسماح للمستخدم بتحديد واحد من عدة خيارات. حتى إذا كان هناك العديد من العناصر للاختيار من بينها ، يتم عرض العناصر المحددة فقط على الشاشة ، وهو أمر مفيد لتوفير المساحة ويسهل على المستخدم فهم ما يختاره.

وضع قائمة منسدلة

حدد "قائمة منسدلة" من التسلسل الهرمي لإضافتها إلى طريقة العرض.

اضبط موضع القائمة المنسدلة حسب تقديرك. إذا بدا الحجم صغيرا، اسحب الإطار لتكبيره.

لتعيين Dropdown حجم النص بالداخل، حدد إنه بالداخل Label بدلا من .

عند تشغيله ، يمكنك رؤية القائمة المنسدلة أثناء العمل. في الحالة الأولية ، هناك ثلاثة عناصر للاختيار من بينها ، بحيث يمكنك تبديل التحديد. ومع ذلك ، إذا قمت بتغيير حجم القائمة المنسدلة أو Label حجم الخط ، فلن يتطابق مع حجم النص المعروض في القائمة المنسدلة.

ضبط حجم العناصر المنسدلة

إذا لم تقم بتغيير حجم الكائن أو حجم الخط عند وضع القائمة المنسدلة ، فلن تحتاج إلى القيام بذلك ، ولكن إذا قمت بذلك ، فستحتاج إلى تعيين عنصر القائمة المنسدلة أيضا.

يحتوي الكائن المنسدل على تعريف لكيفية عرض العنصر المحدد عند عرضه. Dropdown Template هو الحال. إذا لم تقم بتعيين بعض الإعدادات ، فلن تبدو جميلة.

بادئ ذي بدء ، من المفترض أن يتم تعيين كل معلمة من القائمة المنسدلة الموضوعة على النحو التالي. إذا كنت تقوم بالإعداد بمعلمات مختلفة ، فاستبدل الأرقام واقرأها. في هذا المثال، يتم أيضا تعيين معلمات أخرى، ولكن يتم حذفها لأنها غير مرتبطة بالعناصر المنسدلة.

حجم خط العنصر

أولا ، قم بتغيير حجم خط العنصر. حدد > > >Dropdown Template Content > > Viewport Item Item Labelللكائن. حدد حجم خط 40، وهو نفس حجم التسمية. إذا كنت ترغب في إظهار المزيد من الخيارات ، يمكنك جعلها أصغر قليلا.

حتى إذا قمت بزيادة حجم الخط ، فلن يتغير حجم عرض عنصر واحد ، لذلك قد لا تتمكن من رؤية أي شيء حتى إذا قمت بتشغيله.

حجم العنصر

بعد ذلك ، اضبط حجم عنصر واحد. الكائنات المراد تحديدها > >Dropdown Template Viewport > > . Content Item اضبط الارتفاع على 72. إذا كنت ترغب في إظهار المزيد من الخيارات ، يمكنك جعلها أصغر قليلا.

هذا يجعل عناصر العنصر مرئية ، ولكن لسبب ما ، يتم قطع الجزء العلوي والسفلي من العنصر المحدد قليلا بغض النظر عن التمرير.

لإصلاح ذلك ، اضبط ارتفاع > > >Dropdown Viewport ContentTemplate على Item 72 ، وهو نفس . سيسمح لك ذلك برؤية العناصر العلوية والسفلية بشكل صحيح.

بالمناسبة ، في الإعدادات Item المنسدلة الافتراضية ، تم تعيين ارتفاع أكبر قليلا من Content . نتيجة لذلك ، يتم عرض هامش طفيف أعلى وأسفل العنصر المحدد ، مما يقلل من الشعور بالضغط.

حجم علامة الاختيار

حجم علامة الاختيار صغير أيضا ، لذا سأصلحها. الكائن الهدف هو "Dropdown> > Viewport > > > Item CheckmarkTemplate Item Content ".

إذا قمت بتغيير العرض والارتفاع ، فستزداد علامة الاختيار أيضا ، لذا اضبطها على 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 النصية ما لم يكن هناك سبب محدد للقيام بذلك.

قم بإرفاق كائن منسدل للحصول على القيمة منه وكائن نصي لتعيين القيمة.

بعد ذلك ، حدد الكائن المنسدل الذي تريد العمل معه وأضف "عند تغيير القيمة (Int32)" في Dropdown مكون المفتش.

في العنصر السفلي الأيسر ، نحتاج إلى وضع الكائن الذي يتم إرفاق البرنامج النصي المراد تشغيله به ، لذلك قمنا بتعيينه هنا EventSystem .

اختر من OnSelectionChanged من لا توجد وظيفة 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 إرفاق البرامج النصية والكائنات ب .

قم بتعيين طريقة لحدث النقر لزري الإضافة والحذف، على التوالي.

عند الانتهاء ، قم بتشغيله. إذا تم مسح العنصر في المحرر ، فلن يتم عرض العنصر حتى إذا قمت بالنقر فوقه.

إذا قمت بالنقر فوق زر الإضافة أربع مرات ، يمكنك أن ترى أنه تمت إضافة أربعة عناصر.

إذا قمت بالنقر فوق الزر حذف مرتين ، يمكنك أن ترى أنه تم حذف عنصرين.