การใช้ดรอปดาวน์ Unity UI

สภาพแวดล้อมการตรวจสอบ

หน้าต่าง

• หน้าต่าง 11

บรรณาธิการ Unity

• ปี 2020.3.25f1

ข้อกําหนดเบื้องต้นสําหรับเคล็ดลับนี้

การตั้งค่าต่อไปนี้ได้รับการทําล่วงหน้าเป็นข้อกําหนดเบื้องต้นสําหรับคําอธิบายของเคล็ดลับเหล่านี้

• ขอแนะนําแพ็คเกจระบบอินพุต
• จัดตําแหน่งกล้อง (2D) ให้ตรงกับผืนผ้าใบ

ทีแรก

สามารถใช้ดรอปดาวน์เพื่ออนุญาตให้ผู้ใช้เลือกหนึ่งในหลายตัวเลือก แม้ว่าจะมีหลายรายการให้เลือก แต่เฉพาะรายการที่เลือกเท่านั้นที่จะปรากฏบนหน้าจอซึ่งมีประโยชน์ในการประหยัดพื้นที่และทําให้ผู้ใช้เข้าใจสิ่งที่พวกเขากําลังเลือกได้ง่ายขึ้น

วางตําแหน่งดรอปดาวน์

เลือก "ดรอปดาวน์" จากลําดับชั้นเพื่อเพิ่มลงในมุมมอง

ปรับตําแหน่งของเมนูแบบเลื่อนลงตามดุลยพินิจของคุณ หากขนาดดูเหมือนเล็ก ให้ลากเฟรมเพื่อให้ใหญ่ขึ้น

เมื่อต้องการ Dropdown กําหนดขนาดของข้อความภายใน ให้เลือก อยู่ภายใน Label แทนที่จะเป็น

เมื่อคุณเรียกใช้คุณจะเห็นเมนูแบบเลื่อนลงในการดําเนินการ ในสถานะเริ่มต้นมีสามรายการให้เลือกดังนั้นคุณสามารถสลับการเลือกได้ อย่างไรก็ตามหากคุณเปลี่ยนขนาดของดรอปดาวน์หรือ Label ขนาดตัวอักษรของ มันจะไม่ตรงกับขนาดของข้อความที่แสดงในเมนูแบบเลื่อนลง

ปรับขนาดของรายการดรอปดาวน์

หากคุณยังไม่ได้เปลี่ยนขนาดของวัตถุหรือขนาดตัวอักษรเมื่อคุณวางเมนูแบบเลื่อนลงคุณไม่จําเป็นต้องทําเช่นนี้ แต่ถ้าคุณทําเช่นนั้นคุณจะต้องตั้งค่ารายการแบบเลื่อนลงด้วย

วัตถุดรอปดาวน์ประกอบด้วยคําจํากัดความของวิธีการแสดงรายการที่เลือกเมื่อแสดงรายการ Dropdown Template เป็นกรณี หากคุณไม่ได้ตั้งค่าบางอย่างมันจะไม่ดูสวย

ก่อนอื่นสันนิษฐานว่าแต่ละพารามิเตอร์ของดรอปดาวน์ที่วางไว้ถูกตั้งค่าดังนี้ หากคุณกําลังตั้งค่าด้วยพารามิเตอร์ที่แตกต่างกันให้แทนที่ตัวเลขและอ่าน ในตัวอย่างนี้พารามิเตอร์อื่น ๆ จะถูกตั้งค่าด้วย แต่จะถูกละเว้นเนื่องจากไม่เกี่ยวข้องกับรายการดรอปดาวน์

ขนาดแบบอักษรของรายการ

ขั้นแรกให้เปลี่ยนขนาดตัวอักษรของรายการ เลือก > > >Dropdown Template Content > > Viewport Item Item Labelสําหรับวัตถุ ระบุขนาดแบบอักษร 40 ซึ่งเหมือนกับ ป้ายชื่อ หากคุณต้องการแสดงตัวเลือกเพิ่มเติมคุณสามารถทําให้เล็กลงได้เล็กน้อย

แม้ว่าคุณจะเพิ่มขนาดแบบอักษร แต่ขนาดการแสดงผลของรายการหนึ่งจะไม่เปลี่ยนแปลงดังนั้นคุณอาจไม่สามารถเห็นอะไรได้แม้ว่าคุณจะเรียกใช้ก็ตาม

ขนาดรายการ

จากนั้นกําหนดขนาดของรายการหนึ่ง วัตถุที่จะเลือกคือ > > > >Dropdown . Content Item Template Viewport ตั้งค่าความสูงเป็น 72 หากคุณต้องการแสดงตัวเลือกเพิ่มเติมคุณสามารถทําให้เล็กลงได้เล็กน้อย

สิ่งนี้ทําให้องค์ประกอบของรายการมองเห็นได้ แต่ด้วยเหตุผลบางประการด้านบนและด้านล่างของรายการที่เลือกจะถูกตัดออกเล็กน้อยโดยไม่คํานึงถึงการเลื่อน

เมื่อต้องการแก้ไขปัญหานี้ ให้ตั้งค่าความสูง > > >Dropdown Viewport ContentTemplate เป็น Item 72 ซึ่งเหมือนกับ . วิธีนี้จะช่วยให้คุณเห็นรายการด้านบนและด้านล่างได้อย่างถูกต้อง

โดยวิธีการในการตั้งค่า Item แบบเลื่อนลงเริ่มต้นความสูงของถูกตั้งค่าให้ใหญ่กว่า Content เล็กน้อย เป็นผลให้ระยะขอบเล็กน้อยจะปรากฏด้านบนและด้านล่างของรายการที่เลือกลดความรู้สึกกดดัน

ขนาดเครื่องหมายถูก

ขนาดของเครื่องหมายถูกยังเล็กดังนั้นฉันจะแก้ไขได้ วัตถุเป้าหมายคือ "> > Viewport > > > Content Item Template Item Checkmark"Dropdown

หากคุณเปลี่ยนความกว้างและความสูงเครื่องหมายถูกจะเพิ่มขึ้นด้วยดังนั้นตั้งค่าเป็น 72 ที่นี่

เมื่อฉันเรียกใช้เครื่องหมายถูกจะใหญ่กว่า แต่ตําแหน่งไม่ถูกต้องดังนั้นฉันจะแก้ไขปัญหานี้เช่นกัน

Item Checkmarkขั้นแรกให้ตั้งค่า Pivot X เป็น 0 จากนั้นตั้งค่าตําแหน่ง X เป็น 0 เช่นกัน สิ่งนี้ช่วยให้คุณสามารถวางไว้ในที่ที่ดีโดยไม่คํานึงถึงขนาดของเช็คหรือฉลาก

นอกจากนี้เนื่องจากมันทับซ้อนกับฉลากให้เลือก Item Lebel เพื่อทําให้ตําแหน่งด้านซ้ายเหมือนกับขนาดของเครื่องหมายถูก

ขนาดแถบเลื่อน

แถบเลื่อนมีขนาดเล็กและคลิกยากดังนั้นทําให้ใหญ่ขึ้น ทุกคนมีความเฉพาะเจาะจงเกี่ยวกับขนาดดังนั้นจึงไม่ใช่สิ่งที่สามารถกําหนดได้ ในกรณีนี้เราตั้งค่า 48 ซึ่งเป็น 2/3 ของความสูงของเมนูแบบเลื่อนลง

วัตถุที่จะเลือกถูกตั้งค่าเป็นค่าความกว้างใน >Dropdown Template > Scrollbar

ขนาดไอคอนแบบเลื่อนลง

มันไม่ได้อยู่ด้านรายการ แต่ไอคอนแบบเลื่อนลงยังคงมีขนาดเล็กดังนั้นฉันจะเปลี่ยนมัน วัตถุที่จะเลือกคือ >Dropdown Arrow

สําหรับขนาดของไอคอนคุณสามารถเปลี่ยนขนาดได้โดยตั้งค่าความกว้างและความสูง ที่นี่เราตั้งค่าเป็น 72 ซึ่งเท่ากับความสูงของเมนูแบบเลื่อนลง

หากเป็นกรณีนี้ตําแหน่งจะถูกปิดดังนั้นให้ตั้งค่า Pivot 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 ไม่มีฟังก์ชัน 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 แนบสคริปต์และวัตถุกับ .

กําหนดวิธีการให้กับเหตุการณ์การคลิกของปุ่มเพิ่มและลบตามลําดับ

เมื่อคุณทําเสร็จแล้วให้เรียกใช้ หากรายการถูกลบในตัวแก้ไขรายการจะไม่ปรากฏขึ้นแม้ว่าคุณจะคลิกก็ตาม

หากคุณคลิกปุ่มเพิ่มสี่ครั้งคุณจะเห็นว่ามีการเพิ่มสี่รายการ

หากคุณคลิกปุ่มลบสองครั้งคุณจะเห็นว่าสองรายการถูกลบไปแล้ว