Raster- und Tabellenlayouts | Dokumentation

Im Vergleich zu UIListLayout ermöglichen UIGridLayout und UITableLayout strukturiertere und organisiertere Layouts. Diese sind am besten geeignet für Schnittstellen wie ein Shop-Inventar, in dem jeder Artikel in einem Raster aus gleich großen Kacheln präsentiert werden kann, oder Artikel in verwandte Zeilen/Spalten sortiert werden können.

Rasterlayout

UIGridLayout positioniert Geschwister-GuiObjects in einem Raster von einheitlichen Zellen gleicher Größe innerhalb ihres übergeordneten Containers. Zellen werden zeilen- oder spaltenweise basierend auf der FillDirection des Layouts hinzugefügt, bis die nächste Zelle nicht mehr passt, dann beginnt eine neue Zeile oder Spalte. Für mehr Kontrolle können Sie die Eigenschaft FillDirectionMaxCells verwenden, um die maximale Anzahl von Zellen pro Zeile oder Spalte festzulegen.

Standardmäßig positioniert UIGridLayout Geschwister-GuiObjects entsprechend ihrer LayoutOrder, wobei niedrigere Werte vor höheren Werten stehen, und gleiche Werte nach der Reihenfolge sortiert werden, in der Sie sie hinzugefügt haben. Wenn Sie die SortOrder des Layouts auf Enum.SortOrder.Name ändern, werden Geschwister in alphabetischer Reihenfolge sortiert.

Sobald Sie ein UIGridLayout einfügen, überschreibt oder beeinflusst es die Position und/oder Size aller Geschwisterbenutzerschnittstelle-Objekte, sodass Änderungen an diesen Eigenschaften im Eigenschaften-Fenster oder innerhalb eines Skripts nicht den normalen Effekt haben.

UIGridLayout respektiert alle Einschränkungen, die Sie auf Objekte innerhalb des Rasters anwenden. Wenn ein Objekt beispielsweise eine UISizeConstraint mit einer MinSize-Eigenschaft hat, die höher ist als die CellSize-Eigenschaft des Rasters, wird das Objekt über mehrere Zellen hinweg angezeigt.

Tabellenlayout

UITableLayout positioniert Geschwister-GuiObjects und deren Kinder in Tabellenformat. Die Standard-FillDirection von Vertical bedeutet, dass Geschwister zuerst in Zeilen positioniert werden, und Kinder dieser Geschwister werden horizontal eingeordnet, um Spalten zu bilden, sodass jede Zelle innerhalb einer Zeile die gleiche Höhe und jede Zelle innerhalb einer Spalte die gleiche Breite hat.

Dieses Muster ahmt die Standard-HTML-Zeilen-/Spaltenstruktur nach:


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

Es sei denn, Sie aktivieren die Eigenschaften FillEmptySpaceColumns oder FillEmptySpaceRows des Layouts, bestimmt die Größe der Geschwister-GuiObjects die Abmessungen der Zellen. Zum Beispiel wird ein TextLabel der Größe UDim2.new(0.25, 0, 0.1, 0) eine Tabellenzelle mit 25% Breite und 10% Höhe innerhalb des übergeordneten Containers erstellen.

Sobald Sie ein UITableLayout einfügen, überschreibt oder beeinflusst es die Position und/oder Size aller Geschwisterbenutzerschnittstelle-Objekte, sodass Änderungen an diesen Eigenschaften im Eigenschaften-Fenster oder innerhalb eines Skripts nicht den normalen Effekt haben.

UITableLayout respektiert und reagiert auf jede UISizeConstraint, die Sie auf Objekte innerhalb der Tabelle anwenden. Wenn ein Objekt beispielsweise eine UISizeConstraint mit einer MinSize-Eigenschaft innerhalb einer Kopfzelle hat, haben die restlichen Zellen innerhalb der Spalte die gleiche Größe wie die Kopfzelle.

Beachten Sie, dass wenn die MaxSize-Eigenschaft die Größe einer Zelle einschränkt, sodass sie den verfügbaren Platz einer Zeile oder Spalte, die breiter als die Zelle ist, nicht ausfüllt, das Objekt sich oben links in der Zelle anpasst.