ทำแอพด้วย Unity2D Canvas ตอน : List View

ทำแอพด้วย Unity2D Canvas ตอน : List View

ดาวน์โหลดโปรเจค Unity3D Listview

ListView คือองค์ประกอบพื้นฐานของโมบายแอพพลิเคชั่น แต่เป็นส่วนประกอบพื้นฐานที่สำคัญมากที่สุด
เหตุผลเพราะว่าการแสดงผลบนโมบายแอพพลิเคชั่นในลักษณะ Listview เป็นการใช้งานที่เรามักจะเห็น
ในเกือบทุกแอพพลิเคชั่น เป็นการออกแบบ UI ที่ลงตัวและนำไปประยุกต์ใช้งานได้กับการแสดงข้อมูลหลากหลายประเภท

และนักพัฒนาส่วนใหญ่ที่เริ่มพัฒนาโมบายแอพพลิเคชั่น มักจะเริ่มและฝึกเขียน ListView ทั้งใน iOS และ​ Android
สำหรับการเขียน ListView ในโปรแกรม Unity3D โดยใช้ component หลักในตัวโปรแกรมและภาษา C#
ก็สามารถทำได้เหมือนกับโปรแกรมและภาษาอื่น ๆ และไม่ยุ่งยากมากนัก มาเริ่มกันเลยครับ


ตั้งค่าให้ Canvas 2D

1. สร้าง Unity 2D Project ตั้งชื่อว่า ListView
ทำแอพด้วย-unity3d-ฝึกทำ-listview

2. คลิกขวาในส่วนของ Hierarchy และสร้าง Panel และ Canvas
ทำแอพด้วย-unity3d-ฝึกทำ-listview

3. เลื่อกไปที่ Canvas ในหน้าต่าง Inspector ในส่วนของ Canvas Section ให้ตั้งค่าดังนี้

  • Render Mode ตั้งค่าเป็น Screen Space – Camera
  • Render Camera ให้เลือกไปที่ Main Camera
  • เลือก Math Width Or Height และตั้งค่าเป็น 0.5

ทำแอพด้วย-unity3d-ฝึกทำ-listview

4. เลื่อกไปที่ Canvas ในหน้าต่าง Inspector ในส่วนของ Canvas Scaler ให้ตั้งค่าดังนี้

  • UI Scale Mode ตั้งค่าเป็น Scale With Screen Size
  • Reference Resolution ตั้งค่าเป็น 640×1136 ( iPhone5 & 5S )

ทำแอพด้วย-unity3d-ฝึกทำ-listview


สร้างตัว UI ListView

ในหน้าต่าง Hierarchy

  • คลิกขวาที่ Canvas สร้าง Panel ตั้งชื่อว่า Viewport
  • คลิกขวาที่ Canvas สร้าง Panel ตั้งชื่อว่า ScrollContainer
  • คลิกขวาที่ ScrollContainer สร้าง Panel และตั้งชื่อว่า Content
  • คลิกขวาที่ Content สร้าง Button และตั้งชื่อว่า ListItem

ทำแอพด้วย-unity3d-ฝึกทำ-listview


Add Component ให้ Object ใน ListView

ในหน้าต่าง Hierarchy

  • คลิกเลือก ScrollContainer
    ในหน้าต่าง Inspector คลิกที่ Add Component-> UI -> Scroll Rect และตั้งค่าดังนี้

    • – ตั้งค่า Content = Panel Content
    • – ตั้งค่า Viewport = Panel Viewport

    ทำแอพด้วย-unity3d-ฝึกทำ-listview

  • คลิกเลือก Content
    ในหน้าต่าง Inspector คลิกที่ Add Component-> Layout -> Vertical Layout และตั้งค่าดังนี้

    • – Child Alignment = Upper Left
    • – Child Force Expand = เอาติ๊กถูกออกทั้ง Width และ Height

    ทำแอพด้วย-unity3d-ฝึกทำ-listview

  • คลิกเลือก ListItem
    ในหน้าต่าง Inspector คลิกที่ Add Component-> Layout -> Layout Element และตั้งค่าดังนี้

    • – Min Height = 200
    • – Preferred Height = 200
    • – Flexible Width = 1

    ทำแอพด้วย-unity3d-ฝึกทำ-listview


ทดสอบการทำงาน

ไปที่หน้าต่าง Hierarchy คลิกที่ ListView กด Command+D หรือ Ctrl+D สำหรับ Window เพื่อสร้าง
Duplicate ListItem ขึ้นมาให้เกินความสูงของหน้าจอแอพพลิเคชั่น จากนั้นกดปุ่ม Play เพื่อทดสอบการทำงาน
ทำแอพด้วย-unity3d-ฝึกทำ-listview

ดาวน์โหลดโปรเจค Unity3D Listview

กระทู้ใกล้เคียง

ทำแอพด้วยตัวเอง ใน 1 วัน ด้วย Unity2D และ WordPres... ทำแอพด้วยตัวเอง ใน 1 วัน ด้วย Unity2D และ WordPress Post ทำแอพด้วยตัวเอง Wordpress คือเว็บไซต์แบบ CMS ( Content Management System ) ที่ได้รับความน...
สอน Unity3D C# ตอน 5 จัดการกับ Object ใน Scene ด้ว... สอน Unity3D C# ตอน 5 จัดการกับ Object ใน Scene ด้วยโค๊ด สอน Unity3D C# ตอน 5 จัดการกับ Object ใน Scene ด้วยโค๊ด ในโปรแกรม Unity3D นั้น การจัดการกั...
สอน Unity3D C# ตอน 5 เครื่องมือในการจัดการ view แล... สอน Unity3D C# ตอน 5 เครื่องมือในการจัดการ view และ object สอน Unity3D C# ตอน 5 เครื่องมือในการจัดการ view และ object บทความนี้เป็นหัวข้อพื้นฐานใน...
สอน SQLite ใช้งานฐานข้อมูลแบบออฟไลน์กับ Unity C#... สอน SQLite ใช้งานฐานข้อมูลแบบออฟไลน์กับ Unity C# SQLite เป็นระบบฐานข้อมูลที่ทำงานในลักษณะออฟไลน์หรือเป็นฐานข้อมูลที่ถูกเก็บไว้ในเครื่อง client นิยม...