เค้าโครงกริดและตาราง

เมื่อเปรียบเทียบกับ UIListLayout, UIGridLayout และ UITableLayout ช่วยให้เค้าโครงมีความเป็นระเบียบและมีโครงสร้างมากขึ้น ซึ่งเหมาะสำหรับส่วนติดต่อที่เช่นคลังสินค้าร้านค้า ที่ซึ่งแต่ละรายการสามารถแสดงในกริดของกระเบื้องที่มีขนาดเท่ากัน หรือรายการสามารถจัดเรียงในแถว/คอลัมน์ที่เกี่ยวข้อง

เค้าโครงกริด

UIGridLayout จะจัดตำแหน่ง GuiObjects ที่เป็นพี่น้องในรูปแบบของกริดที่มีเซลล์ที่มีขนาดเท่ากัน ภายในคอนเทนเนอร์พ่อแม่ เซลล์จะถูกเพิ่มโดยอิงจากแถวหรือคอลัมน์ตามทิศทางการเติมของเค้าโครง (FillDirection) จนถึงเซลล์ถัดไปไม่สามารถพอดีได้ จากนั้นจะเริ่มแถวหรือคอลัมน์ใหม่ สำหรับการควบคุมเพิ่มเติม คุณสามารถใช้คุณสมบัติ FillDirectionMaxCells เพื่อกำหนดจำนวนเซลล์สูงสุดต่อแถวหรือคอลัมน์

ตามค่าเริ่มต้น, UIGridLayout จะจัดตำแหน่ง GuiObjects ที่เป็นพี่น้องตามลำดับของ LayoutOrder โดยค่าที่ต่ำกว่าจะมาก่อนค่าที่สูงกว่า และค่าที่เท่ากันจะจัดเรียงตามลำดับที่คุณเพิ่มเข้ามา หากคุณเปลี่ยน SortOrder ของเค้าโครงเป็น Enum.SortOrder.Name, พี่น้องจะถูกจัดเรียงตามลำดับตัวอักษร

เค้าโครงตาราง

UITableLayout จะจัดตำแหน่ง GuiObjects ที่เป็นพี่น้องและลูกของพวกเขาในรูปแบบตาราง ค่าเริ่มต้น FillDirection เป็น Vertical หมายความว่าพี่น้องจะถูกจัดวางเป็นแถวก่อน และลูกของพี่น้องเหล่านั้นจะถูกจัดวางในแนวนอนเพื่อสร้างคอลัมน์ โดยที่เซลล์แต่ละเซลล์ในแถวจะมีความสูงเท่ากัน และเซลล์แต่ละเซลล์ในคอลัมน์จะมีความกว้างเท่ากัน

รูปแบบนี้จะเลียนแบบโครงสร้างแถว/คอลัมน์มาตรฐานของ HTML:

<table>
	<tbody>
		<tr>
		<!-- Row1 -->
			<td>Label 1</td> <!-- TextLabel1 -->
			<td>Label 2</td> <!-- TextLabel2 -->
			<td>Label 3</td> <!-- TextLabel3 -->
		</tr>
		<tr>
		<!-- Row2 -->
			<td>Label 4</td> <!-- TextLabel4 -->
			<td>Label 5</td> <!-- TextLabel5 -->
			<td>Label 6</td> <!-- TextLabel6 -->
		</tr>
		<tr>
		<!-- Row3 -->
			<td>Label 7</td> <!-- TextLabel7 -->
			<td>Label 8</td> <!-- TextLabel8 -->
			<td>Label 9</td> <!-- TextLabel9 -->
		</tr>
	</tbody>
</table>

เว้นแต่คุณจะเปิดใช้งานคุณสมบัติ FillEmptySpaceColumns หรือ FillEmptySpaceRows ของเค้าโครง ขนาดของ GuiObjects ที่เป็นพี่น้องจะกำหนดมิติของเซลล์ ตัวอย่างเช่น, TextLabel ขนาด UDim2.new(0.25, 0, 0.1, 0) จะสร้างเซลล์ตารางที่มีความกว้าง 25% และความสูง 10% ภายในคอนเทนเนอร์พ่อแม่