Site icon บริษัท โค๊ดบี จำกัด

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

codebee

<p><strong>ทำแอพด้วย Unity2D Canvas ตอน &colon; List View<&sol;strong><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;ListView&period;zip" target&equals;"&lowbar;blank">ดาวน์โหลดโปรเจค Unity3D Listview<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p>ListView คือองค์ประกอบพื้นฐานของโมบายแอพพลิเคชั่น แต่เป็นส่วนประกอบพื้นฐานที่สำคัญมากที่สุด<br &sol;>&NewLine;เหตุผลเพราะว่าการแสดงผลบนโมบายแอพพลิเคชั่นในลักษณะ Listview เป็นการใช้งานที่เรามักจะเห็น<br &sol;>&NewLine;ในเกือบทุกแอพพลิเคชั่น เป็นการออกแบบ UI ที่ลงตัวและนำไปประยุกต์ใช้งานได้กับการแสดงข้อมูลหลากหลายประเภท<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>และนักพัฒนาส่วนใหญ่ที่เริ่มพัฒนาโมบายแอพพลิเคชั่น มักจะเริ่มและฝึกเขียน ListView ทั้งใน iOS และ&ZeroWidthSpace; Android<br &sol;>&NewLine;สำหรับการเขียน ListView ในโปรแกรม Unity3D โดยใช้ component หลักในตัวโปรแกรมและภาษา C&num;<br &sol;>&NewLine;ก็สามารถทำได้เหมือนกับโปรแกรมและภาษาอื่น ๆ และไม่ยุ่งยากมากนัก มาเริ่มกันเลยครับ<&sol;p>&NewLine;<p><&sol;br> <&sol;p>&NewLine;<h4>ตั้งค่าให้ Canvas 2D<&sol;h4>&NewLine;<p>1&period; สร้าง Unity 2D Project ตั้งชื่อว่า <strong>ListView<&sol;strong><br &sol;>&NewLine;<img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-1&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;><&sol;p>&NewLine;<p>2&period; คลิกขวาในส่วนของ Hierarchy และสร้าง Panel และ Canvas<br &sol;>&NewLine;<img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-2&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;><&sol;p>&NewLine;<p>3&period; เลื่อกไปที่ Canvas ในหน้าต่าง Inspector ในส่วนของ Canvas Section ให้ตั้งค่าดังนี้<&sol;p>&NewLine;<ul>&NewLine;<li>Render Mode ตั้งค่าเป็น Screen Space &&num;8211&semi; Camera<&sol;li>&NewLine;<li>Render Camera ให้เลือกไปที่ Main Camera<&sol;li>&NewLine;<li>เลือก Math Width Or Height และตั้งค่าเป็น 0&period;5<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-3&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;><&sol;p>&NewLine;<p>4&period; เลื่อกไปที่ Canvas ในหน้าต่าง Inspector ในส่วนของ Canvas Scaler ให้ตั้งค่าดังนี้<&sol;p>&NewLine;<ul>&NewLine;<li>UI Scale Mode ตั้งค่าเป็น Scale With Screen Size<&sol;li>&NewLine;<li>Reference Resolution ตั้งค่าเป็น 640&&num;215&semi;1136 &lpar; iPhone5 &&num;038&semi; 5S &rpar;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-4&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างตัว UI ListView<&sol;h4>&NewLine;<p><strong>ในหน้าต่าง Hierarchy<&sol;strong> <&sol;p>&NewLine;<ul>&NewLine;<li>คลิกขวาที่ Canvas สร้าง Panel ตั้งชื่อว่า Viewport<&sol;li>&NewLine;<li>คลิกขวาที่ Canvas สร้าง Panel ตั้งชื่อว่า ScrollContainer<&sol;li>&NewLine;<li>คลิกขวาที่ ScrollContainer สร้าง Panel และตั้งชื่อว่า Content<&sol;li>&NewLine;<li>คลิกขวาที่ Content สร้าง Button และตั้งชื่อว่า ListItem<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-5&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>Add Component ให้ Object ใน ListView <&sol;h4>&NewLine;<p><strong>ในหน้าต่าง Hierarchy <&sol;strong> <&sol;p>&NewLine;<ul>&NewLine;<li>คลิกเลือก ScrollContainer<br &sol;>&NewLine;ในหน้าต่าง Inspector คลิกที่ Add Component-> UI -> Scroll Rect และตั้งค่าดังนี้<&sol;p>&NewLine;<ul>&NewLine;<li> &&num;8211&semi; ตั้งค่า Content &equals; Panel Content<&sol;li>&NewLine;<li> &&num;8211&semi; ตั้งค่า Viewport &equals; Panel Viewport<&sol;li>&NewLine;<&sol;ul>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-6&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;>&NewLine; <&sol;li>&NewLine;<li>คลิกเลือก Content<br &sol;>&NewLine;ในหน้าต่าง Inspector คลิกที่ Add Component-> Layout -> Vertical Layout และตั้งค่าดังนี้<&sol;p>&NewLine;<ul>&NewLine;<li> &&num;8211&semi; Child Alignment &equals; Upper Left<&sol;li>&NewLine;<li> &&num;8211&semi; Child Force Expand &equals; เอาติ๊กถูกออกทั้ง Width และ Height<&sol;li>&NewLine;<&sol;ul>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-7&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;>&NewLine; <&sol;li>&NewLine;<li>คลิกเลือก ListItem<br &sol;>&NewLine;ในหน้าต่าง Inspector คลิกที่ Add Component-> Layout -> Layout Element และตั้งค่าดังนี้<&sol;p>&NewLine;<ul>&NewLine;<li> &&num;8211&semi; Min Height &equals; 200<&sol;li>&NewLine;<li> &&num;8211&semi; Preferred Height &equals; 200<&sol;li>&NewLine;<li> &&num;8211&semi; Flexible Width &equals; 1<&sol;li>&NewLine;<&sol;ul>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-8&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;>&NewLine; <&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ทดสอบการทำงาน<&sol;h4>&NewLine;<p>ไปที่หน้าต่าง Hierarchy คลิกที่ ListView กด Command&plus;D หรือ Ctrl&plus;D สำหรับ Window เพื่อสร้าง<br &sol;>&NewLine;Duplicate ListItem ขึ้นมาให้เกินความสูงของหน้าจอแอพพลิเคชั่น จากนั้นกดปุ่ม Play เพื่อทดสอบการทำงาน<br &sol;>&NewLine;<img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;07&sol;ทำแอพด้วย-unity3d-ฝึกทำ-listview-9&period;png" alt&equals;"ทำแอพด้วย-unity3d-ฝึกทำ-listview" &sol;><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;ListView&period;zip" target&equals;"&lowbar;blank">ดาวน์โหลดโปรเจค Unity3D Listview<&sol;a><&sol;p><&sol;blockquote>&NewLine;

Exit mobile version