[Unity] วิธีการทำให้ Grid ใน ScrollView มีระยะห่างที่ถูกต้อง by

29
Feb
0

โดยปกติแล้ว Grid ก็จะมี Cell Width กับ Height ให้เพื่อกำหนดระยะห่างระหว่าง GameObject ด้านในของเรา ซึ่งถ้าเราใช้ร่วมกับ ScrollView ของด้านในจะเลื่อนไปชิดด้านบนสุด เพราะ Grid จะทำการจัดที่ให้ดูจากของที่อยู่ด้านใน

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

มองจาก Scene

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

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

ขาดจ้าาา

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

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

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

เป้ะ

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

[Unity3D][NGUI] ScrollView && Grid by

30
May
0

ใครทีใช้ Unity3D ร่วมกับ NGUI ก็คงจะเคยเจอปัญหาเรื่องของ ScrollView และ Grid กันมาบ้าง วันนี้ผมมาเสนอวิธีแก้ปัญหา ScrollView และ Grid ที่ผมเคยเจอครับ

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

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

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

วิธีแก้ก็ทำตามนี้เลยครับ
ถ้าเป็น Grid แบบนี้
4
ให้ Set ค่า ScrollView ตามนี้ครับ
2
และ Set ค่า Grid ตามนี้ ซึ่งเราต้อง Add Component UIWidget ให้ Grid ด้วยมันจะได้มี Anchor ให้เราใช้ไงครับ
3

แต่ถ้าเป็น Grid แบบนี้
5
ก็ให้ Set ScrollView ตามนี้ครับ
6
และ Grid ตามนี้
7

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

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน