ทำแอพด้วย Unity2D Canvas ตอน : List View
ListView คือองค์ประกอบพื้นฐานของโมบายแอพพลิเคชั่น แต่เป็นส่วนประกอบพื้นฐานที่สำคัญมากที่สุด
เหตุผลเพราะว่าการแสดงผลบนโมบายแอพพลิเคชั่นในลักษณะ Listview เป็นการใช้งานที่เรามักจะเห็น
ในเกือบทุกแอพพลิเคชั่น เป็นการออกแบบ UI ที่ลงตัวและนำไปประยุกต์ใช้งานได้กับการแสดงข้อมูลหลากหลายประเภท
และนักพัฒนาส่วนใหญ่ที่เริ่มพัฒนาโมบายแอพพลิเคชั่น มักจะเริ่มและฝึกเขียน ListView ทั้งใน iOS และ Android
สำหรับการเขียน ListView ในโปรแกรม Unity3D โดยใช้ component หลักในตัวโปรแกรมและภาษา C#
ก็สามารถทำได้เหมือนกับโปรแกรมและภาษาอื่น ๆ และไม่ยุ่งยากมากนัก มาเริ่มกันเลยครับ
ตั้งค่าให้ Canvas 2D
1. สร้าง Unity 2D Project ตั้งชื่อว่า ListView
2. คลิกขวาในส่วนของ Hierarchy และสร้าง Panel และ Canvas
3. เลื่อกไปที่ Canvas ในหน้าต่าง Inspector ในส่วนของ Canvas Section ให้ตั้งค่าดังนี้
- Render Mode ตั้งค่าเป็น Screen Space – Camera
- Render Camera ให้เลือกไปที่ Main Camera
- เลือก Math Width Or Height และตั้งค่าเป็น 0.5
4. เลื่อกไปที่ Canvas ในหน้าต่าง Inspector ในส่วนของ Canvas Scaler ให้ตั้งค่าดังนี้
- UI Scale Mode ตั้งค่าเป็น Scale With Screen Size
- Reference Resolution ตั้งค่าเป็น 640×1136 ( iPhone5 & 5S )
สร้างตัว UI ListView
ในหน้าต่าง Hierarchy
- คลิกขวาที่ Canvas สร้าง Panel ตั้งชื่อว่า Viewport
- คลิกขวาที่ Canvas สร้าง Panel ตั้งชื่อว่า ScrollContainer
- คลิกขวาที่ ScrollContainer สร้าง Panel และตั้งชื่อว่า Content
- คลิกขวาที่ Content สร้าง Button และตั้งชื่อว่า ListItem
Add Component ให้ Object ใน ListView
ในหน้าต่าง Hierarchy
- คลิกเลือก ScrollContainer
ในหน้าต่าง Inspector คลิกที่ Add Component-> UI -> Scroll Rect และตั้งค่าดังนี้- – ตั้งค่า Content = Panel Content
- – ตั้งค่า Viewport = Panel Viewport
- คลิกเลือก Content
ในหน้าต่าง Inspector คลิกที่ Add Component-> Layout -> Vertical Layout และตั้งค่าดังนี้- – Child Alignment = Upper Left
- – Child Force Expand = เอาติ๊กถูกออกทั้ง Width และ Height
- คลิกเลือก ListItem
ในหน้าต่าง Inspector คลิกที่ Add Component-> Layout -> Layout Element และตั้งค่าดังนี้- – Min Height = 200
- – Preferred Height = 200
- – Flexible Width = 1
ทดสอบการทำงาน
ไปที่หน้าต่าง Hierarchy คลิกที่ ListView กด Command+D หรือ Ctrl+D สำหรับ Window เพื่อสร้าง
Duplicate ListItem ขึ้นมาให้เกินความสูงของหน้าจอแอพพลิเคชั่น จากนั้นกดปุ่ม Play เพื่อทดสอบการทำงาน
