Tata Letak Grid dan Tabel

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Dalam perbandingan dengan UIListLayout, UIGridLayout dan UITableLayout memungkinkan tata letak yang lebih terstruktur dan terorganisir. Ini paling cocok untuk antarmuka seperti inventaris toko di mana setiap item dapat disajikan dalam grid ubin yang ukurannya sama, atau item dapat diurutkan ke dalam baris/kolom terkait.

Tata letak grid

UIGridLayout menempatkan saudara GuiObjects dalam grid sel yang seragam dengan ukuran yang sama dalam wadah induknya. Sel ditambahkan berdasarkan baris atau kolom berdasarkan FillDirection hingga sel berikutnya tidak muat, kemudian 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, UIGridLayout menempatkan saudara GuiObjects menurut LayoutOrder mereka di mana nilai yang lebih rendah muncul sebelum nilai yang lebih tinggi, dan nilai yang sama diurutkan tergantung pada urutan saat Anda menambahkannya. Jika Anda mengubah SortOrder tata letak menjadi Enum.SortOrder.Name, saudara akan diurutkan dalam urutan alfabet.

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

UIGridLayout menghormati setiap kendala yang Anda tempatkan pada objek dalam grid. Misalnya, jika sebuah objek memiliki UISizeConstraint dengan properti MinSize yang lebih tinggi dari properti CellSize grid, objek tersebut akan melintasi beberapa sel.

Tata letak tabel

UITableLayout menempatkan saudara GuiObjects dan anak-anak mereka dalam format tabel. FillDirection default yang diatur ke Vertical berarti bahwa saudara pertama kali ditempatkan dalam baris, dan anak-anak dari saudara tersebut ditempatkan secara horizontal untuk membentuk kolom, sehingga setiap sel dalam sebuah baris memiliki tinggi yang sama dan setiap sel dalam sebuah kolom memiliki lebar yang sama.

Pola ini meniru struktur standar baris/kolom 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>

Kecuali Anda mengaktifkan FillEmptySpaceColumns atau FillEmptySpaceRows, ukuran saudara GuiObjects menentukan dimensi sel. Misalnya, TextLabel dengan ukuran UDim2.new(0.25, 0, 0.1, 0) akan menciptakan sel tabel dengan lebar 25% dan tinggi 10% dalam wadah induk.

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

UITableLayout menghormati dan responsif terhadap setiap UISizeConstraint yang Anda tempatkan pada objek dalam tabel. Misalnya, jika sebuah objek memiliki UISizeConstraint dengan properti MinSize yang berada dalam sel header, sisa sel dalam kolom tersebut akan memiliki ukuran yang sama dengan sel header.

Perhatikan bahwa jika properti MaxSize membatasi ukuran sel untuk mengisi ruang yang dialokasikan dari baris atau kolom yang lebih lebar dari sel tersebut, objek akan disejajarkan ke kiri atas dari sel.

Bahasa Indonesia