จากรูปของด้านในของเราชิดขอบบนสุดเลย

มองจาก Scene

Script ตัวลูกของเรา สั่งให้ขนาดเล็กกว่าเพื่อเว้นช่องไฟ แต่ก็ไม่ได้เว้นด้านบนแต่อย่างใด

ซึ่งถ้าเราทำการเลื่อน ScrollView ลงเพื่อให้มีพื้นที่ ก็จะพบปัญหาว่าของด้านในของเรานั้นเวลาถูกเลื่อนออกจาก Scroll View จะถูกตัดขาดก่อนที่ควรจะเป็น เพราะเราเลื่อนช่วงการมองเห็นลงมา

ขาดจ้าาา

ทีนี้ วิธีแก้ไขก็ไม่มีอะไรมาก ให้เราสร้าง UIWidget มาครอบไว้นอก ให้ระยะเต็มกินขอบไปด้วยเลย แล้ว Grid จะเว้นพื้นที่ไว้ให้เองอัตโนมัติดังรูป

สร้าง Widget ปรับขนาดให้เกินขอบ

มองจาก Scene จะเป็นแบบนี้

เป้ะ

เพียงเท่านี้ก็จะได้ Grid ที่เลื่อนได้โดยมีตำแหน่งที่สวยงามแล้วล่ะครับ

]]> https://blog.levelup.in.th/2016/02/29/unity-how-to-make-grid-in-scrollview-with-perfect-gap/feed/ 0 https://blog.levelup.in.th/2015/05/30/unity3dngui-scrollview-grid/ https://blog.levelup.in.th/2015/05/30/unity3dngui-scrollview-grid/#comments Sat, 30 May 2015 14:51:36 +0000 http://blog.levelup.in.th/?p=4379 ใครทีใช้ Unity3D ร่วมกับ NGUI ก็คงจะเคยเจอปัญหาเรื่องของ ScrollView และ Grid กันมาบ้าง วันนี้ผมมาเสนอวิธีแก้ปัญหา ScrollView และ Grid ที่ผมเคยเจอครับ

ปัญหาแรกคือ เมื่อ เราสร้างลูกของ Grid แบบ Run Time แล้วสั่ง Grid.Reposition(); และตามด้วยคำสั่ง ScrollView.ResetPosition(); เราก็จะเห็นว่าลูกของ Grid ที่เราพึ่งสร้างนั้นค่อยๆเลือนไปประจำตำแหน่งของมัน

ปัญหาที่สองคือ ถ้าเราสร้างลูกของ Grid มาจำนวนน้อย หรือมีจำนวนไม่มากพอที่จะทำให้ Grid นั้นล้นออกนอก ScrollView แล้วมันก็จะทำให้ ลูกของ Grid นั้นไปอยู่ตรงกลาง ScrollView ดังรูป

ปัญหาที่สามคือ เมื่อเราทำ Application หรือ Game ในหลายๆขนาดหน้าจอ ถ้าเราอยากให้ Grid ของเราอยู่ชิดข้างบนเสมอล่ะ ทำยังไงดี ก็ Grid มันไม่มี Anchor นี่นา

วิธีแก้ก็ทำตามนี้เลยครับ
ถ้าเป็น Grid แบบนี้

ให้ Set ค่า ScrollView ตามนี้ครับ

และ Set ค่า Grid ตามนี้ ซึ่งเราต้อง Add Component UIWidget ให้ Grid ด้วยมันจะได้มี Anchor ให้เราใช้ไงครับ

แต่ถ้าเป็น Grid แบบนี้

ก็ให้ Set ScrollView ตามนี้ครับ

และ Grid ตามนี้

ให้สังเกต ScrollView ตรง Content Origin นะครับ
และให้สังเกต Grid ตรง Pivot, Smooth Tween และ ขนาดของ UIWidget นะครับ