Tata letak grid dan tabel | Dokumentasi

Dibandingkan dengan UIListLayout , UIGridLayout dan UITableLayout memungkinkan tata letak yang lebih terstruktur dan terorganisasi.Ini paling cocok untuk antarmuka seperti inventaris toko di mana setiap item dapat dipresentasikan dalam grid ubin berukuran sama, atau item dapat disortir ke dalam baris/kolom terkait.

Desain grid

UIGridLayout posisi saudara GuiObjects dalam grid sel seragam dari ukuran yang sama di dalam wadah orang tua mereka.Sel ditambahkan oleh baris atau kolom berdasarkan tata letak FillDirection sampai sel berikutnya tidak pas, maka baris atau kolom baru dimulai.Untuk kontrol lebih lanjut, Anda dapat menggunakan properti FillDirectionMaxCells untuk menetapkan jumlah maksimum sel per baris atau kolom.

Secara default, posisi saudara dalam urutan nilai yang lebih rendah pergi sebelum nilai yang lebih tinggi, dan urutan di mana nilai yang sama diurutkan tergantung pada urutan di mana Anda menambahkannya.Jika Anda mengubah tata letak SortOrder ke Enum.SortOrder.Name , saudara laki-laki disortir dalam urutan alfabetik.

Setelah Anda menyisipkan UIGridLayout , itu akan menggantikan atau mempengaruhi Position dan/atau Size dari semua objek UI saudara, sehingga perubahan pada properti tersebut di jendela Properti atau dalam skrip tidak akan memiliki efek normal.

UIGridLayout menghormati setiap batasan yang Anda tempatkan pada objek di dalam grid.Sebagai contoh, jika objek memiliki UISizeConstraint dengan properti MinSize yang lebih tinggi dari properti grid CellSize, objek akan menyebar di beberapa sel.

Desain tabel

UITableLayout posisi saudara GuiObjects dan anak-anak mereka ke dalam format tabel.Default FillDirection dari Vertical berarti bahwa saudara kembar pertama ditempatkan ke dalam baris, dan anak-anak saudara kembar ditempatkan secara horizontal untuk membentuk kolom, sehingga setiap sel dalam baris memiliki ketinggian yang sama dan setiap sel dalam kolom memiliki lebar yang sama.

Pola ini meniru struktur baris/kolom HTML standar:


<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>

Kecuali Anda mengaktifkan properti tata letak FillEmptySpaceColumns atau FillEmptySpaceRows , ukuran saudara GuiObjects menentukan dimensi sel.Sebagai contoh, TextLabel dari ukuran UDim2.new(0.25, 0, 0.1, 0) akan membuat sel tabel dengan lebar 25% dan tinggi 10% di dalam wadah orang tua.

Setelah Anda menyisipkan UITableLayout , itu akan menggantikan atau mempengaruhi Position dan/atau Size dari semua objek UI saudara, sehingga perubahan pada properti tersebut di jendela Properti atau dalam skrip tidak akan memiliki efek normal.

UITableLayout menghormati dan responsif terhadap apa pun UISizeConstraint yang Anda tempatkan pada objek di dalam tabel.Sebagai contoh, jika objek memiliki UISizeConstraint dengan properti MinSize di dalam sel kepala, sisa sel dalam kolom akan memiliki ukuran yang sama dengan sel kepala.

Perhatikan bahwa jika properti MaxSize membatasi ukuran sel dari mengisi ruang yang ditugaskan dari baris atau kolom yang lebih lebar dari sel, objek diatur ke bagian atas kiri sel.