שימוש ברשימה הנפתחת Unity UI

עודכן דף : יום רביעי, 27 בדצמבר 2023

תאריך יצירת דף : יום חמישי, 24 במרץ 2022

סביבת אימות

חלונות

חלונות 11

עורך Unity

2020.3.25F1

תנאים מוקדמים לטיפ זה

ההגדרות הבאות נעשו מראש כתנאי מוקדם להסבר על טיפים אלה.

בהתחלה

ניתן להשתמש בתפריטים נפתחים כדי לאפשר למשתמש לבחור אחת מכמה אפשרויות. גם אם יש פריטים רבים לבחירה, רק הפריטים שנבחרו מוצגים על המסך, דבר שימושי לחיסכון במקום ומקל על המשתמש להבין במה הוא בוחר.

מיקום רשימה נפתחת

בחר "רשימה נפתחת" מההירארכיה כדי להוסיף אותה לתצוגה.

התאם את מיקום התפריט הנפתח לשיקול דעתך. אם הגודל נראה קטן, גרור את המסגרת כדי להגדיל אותה.

כדי Dropdown להגדיר את גודל הטקסט בפנים, בחר It's inside Label במקום .

כאשר אתה מפעיל אותו, תוכל לראות את התפריט הנפתח בפעולה. במצב ההתחלתי, ישנם שלושה פריטים לבחירה, כך שתוכל להחליף את הבחירה. עם זאת, אם תשנה את גודל הרשימה הנפתחת או Label את גודל הגופן של , הוא לא יתאים לגודל הטקסט המוצג ברשימה הנפתחת.

התאמת הגודל של פריטים נפתחים

אם לא שינית את גודל האובייקט או את גודל הגופן בעת מיקום הרשימה הנפתחת, אינך צריך לעשות זאת, אך אם תעשה זאת, יהיה עליך להגדיר גם את הפריט הנפתח.

האובייקט הנפתח מכיל הגדרה של אופן ההצגה של הפריט שנבחר בעת הצגתו. Dropdown Template הוא המקרה. אם לא תגדיר כמה הגדרות, זה לא ייראה יפה.

קודם כל, ההנחה היא כי כל פרמטר של התפריט הנפתח להציב מוגדר כדלקמן. אם אתה מגדיר עם פרמטרים שונים, החלף את המספרים וקרא אותם. בדוגמה זו, מוגדרים גם פרמטרים אחרים, אך הם מושמטים מכיוון שהם אינם קשורים לפריטים הנפתחים.

ערך	שם פרמטר	אובייקט
רשימה נפתחת	גובה	72
תווית > נפתחת	גודל גופן	40

גודל גופן פריט

תחילה, שנה את גודל הגופן של הפריט. בחר > > >Dropdown Template Content > > Viewport Item Item Labelעבור האובייקט. ציין גודל גופן של 40, הזהה לתווית. אם אתה רוצה להראות יותר אפשרויות, אתה יכול לעשות אותם קצת יותר קטן.

גם אם תגדיל את גודל הגופן, גודל התצוגה של פריט אחד לא ישתנה, כך שייתכן שלא תוכל לראות דבר גם אם תפעיל אותו.

גודל פריט

לאחר מכן, הגדר את הגודל של פריט אחד. האובייקטים לבחירה הם > > > >Dropdown Template . Content Item Viewport הגדר את הגובה ל- 72. אם אתה רוצה להראות יותר אפשרויות, אתה יכול לעשות אותם קצת יותר קטן.

זה הופך את האלמנטים של הפריט גלויים, אבל מסיבה כלשהי, החלק העליון והתחתון של הפריט שנבחר נחתכים קצת ללא קשר לגלילה.

כדי לתקן זאת, הגדר את הגובה של > > >Dropdown Viewport ContentTemplate ל- 72, שהוא זהה לItem- . פעולה זו תאפשר לך לראות את הפריטים העליונים והתחתונים כראוי.

אגב, בהגדרות ברירת המחדל הנפתחות 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 אם ברצונך שהרביעי יהיה הבחירה הראשונית.

ביצוע עיבוד בעת בחירת פריט

ייתכן שתרצה לעשות משהו בעת בחירת פריט בתפריט הנפתח. זה יכול להיות מיושם באותו אופן כמו בעת לחיצה על כפתור.

האובייקט כולל רשימה נפתחת וטקסט אחד בכל פעם. לאחר בחירת פריט ברשימה הנפתחת, ודא שהתוכן מוצג באובייקט טקסט משמאל. זה לא משנה שום דבר מלבד המיקום של האובייקטים, אז אתה יכול להגדיר את זה איך שאתה רוצה.

תחילה, צור קובץ Script בפרוייקט שלך. DropdownItemSelector במקרה זה, הוא נקרא .

פתח את קובץ ה- Script והוסף את הקוד לפריטים הבאים:

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 ללא פונקציה 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 צרף סקריפטים ואובייקטים ל- .

הקצו שיטה לאירוע הלחיצה של לחצני ההוספה והמחיקה, בהתאמה.

כשתסיים, הפעל אותו. אם הפריט נמחק בעורך, הפריט לא יוצג גם אם תלחץ עליו.

אם תלחץ על לחצן ההוספה ארבע פעמים, תוכל לראות שנוספו ארבעה פריטים.

אם תלחץ פעמיים על לחצן המחיקה, תוכל לראות ששני פריטים נמחקו.

שימוש בלחצנים בממשק המשתמש של Unity

גלול כך שהפריט שנבחר יופיע בראש רשימת הפריטים הנפתחים