UIListLayout은 형제 GuiObjects를 부모 컨테이너 내에서 수평 행 또는 수직 열로 배치합니다. 형제 개체를 추가하거나 제거할 때마다 레이아웃이 그에 맞게 조정됩니다.
UIListLayout을 삽입하면 모든 형제 UI 개체의 Position, Rotation, 및/또는 Size를 오버라이드하거나 영향을 미치므로, 속성 창이나 스크립트에서 이러한 속성에 대한 변경 사항은 정상적인 효과를 가지지 않습니다.
채우기 방향
FillDirection 속성은 목록 레이아웃의 형제들이 렌더링되는 방향을 결정합니다.
정렬은 레이아웃의 SortOrder 속성에 의해 결정되며, 이는 각 항목의 LayoutOrder 정수 값을 기준으로 하는 오름차순이나 항목의 Name에 기반한 알파벳순일 수 있습니다.
요소를 반대로 정렬하려면 수평 목록의 경우 오른쪽에서 왼쪽으로 정렬하기 위해 정렬을 반대로 해야 합니다. 예를 들어, 네 개의 항목이 각각 LayoutOrder가 0, 1, 2, 3인 경우, 각 값을 부정하여 0, -1, -2, -3의 순서를 만듭니다.
정렬
HorizontalAlignment 및 VerticalAlignment 속성은 목록의 형제들이 서로 및 목록의 전반적인 경계 내에서의 X 및 Y 정렬을 결정합니다. 예를 들어, VerticalAlignment가 Center인 수평 채워진 목록은 목록의 형제들을 서로 중앙에 정렬하고 목록을 그 컨테이너 내에서 수직으로 중앙에 배치합니다.
HorizontalAlignment 및 VerticalAlignment는 항목 선 정렬과 약간 다르며, 플렉스 레이아웃에서 동일한 선에 있는 항목을 정렬할 수 있지만, 목록의 전체 경계에 동일한 정렬을 적용하지는 않습니다.
감싸기
Wraps 불리언은 형제가 부모 컨테이너 내에서 기본 크기가 컨테이너의 경계를 초과할 때 다른 줄로 감싸질지를 제어합니다.
패딩
Padding 속성은 각 목록 항목 간의 공간 양을 결정하며, 현재 방향의 컨테이너 크기의 비율 (스케일) 또는 픽셀 크기와 유사한 정적 간격 (오프셋)으로 설정됩니다.
이 속성은 목록의 전체 경계 주위에 패딩을 적용하지 않습니다. 부모의 내용에 대해 위, 아래, 왼쪽 및/또는 오른쪽 패딩을 적용하려면 UIPadding을 참조하십시오.
플렉스 레이아웃
UIListLayout에 플렉스를 통합하는 것은 목록 항목을 동일하게 채우거나 분배하거나 정렬/늘리기 위해 강력한 방법입니다. 또는 가변 공간에 걸쳐 특정 항목을 플렉스 하는 것도 가능합니다.
플렉스는 강력한 도구지만, 의도 없이 UIListLayout에 적용해서는 안 되며, 이는 비플렉스보다 약간의 성능 비용을 추가합니다. 특히 레이아웃 크기를 조정하거나 플렉스 항목을 동적으로 추가/제거할 때 그렇습니다.
또한, 항목이 X 및 Y 방향 모두에서 그리드에 엄격하게 정렬되어야 할 경우에는 그리드 레이아웃이 더 바람직할 수 있습니다. 왜냐하면 그리드 레이아웃은 일관된 셀 크기를 강제하지만 플렉스 레이아웃은 줄당 가변 개수의 항목을 사용할 수 있기 때문입니다.
동일한 채우기 또는 분배
목록 레이아웃의 채우기 방향이 Horizontal로 설정되면, HorizontalFlex 속성은 부모 컨테이너에서 여분의 수평 공간을 분배하는 방법을 지정합니다. 유사하게, 채우기 방향이 Vertical로 설정되면, VerticalFlex 속성은 여분의 수직 공간을 분배하는 방법을 지정합니다.
HorizontalFlex의 실용적인 사용 사례 중 하나는 탭 창 인터페이스로, 플렉스는 탭 수에 관계없이 탭 바를 동일하게 채웁니다. 이 경우, 개발자가 정의한 너비 설정 없이 자동으로 각 탭의 너비를 계산하고 탭 수가 변할 때 자동으로 조정하므로 플렉스를 사용하는 것이 가장 쉽습니다.
항목 선 정렬
ItemLineAlignment 속성은 선 내에서의 형제들의 교차 방향 정렬을 정의하여, 폭/높이가 다른 개체를 정렬하거나 폭/높이가 작은 개체가 전체 선을 채우도록 할 수 있습니다.
ItemLineAlignment의 실용적인 사용 사례 중 하나는 불균형한 크기의 타일 시퀀스를 늘려서 전체 행을 채우는 것입니다 (Stretch), 레이아웃을 더 통일감 있게 만듭니다.
개별 항목 플렉스
전체 레이아웃을 플렉스하는 것은 강력한 유틸리티이지만, 특정 레이아웃은 개별 항목 플렉스에 더 적합합니다. 이러한 레이아웃에서는 목록의 일부 요소가 핵심 크기를 유지하는 반면 다른 항목은 가변 공간을 채우도록 플렉스됩니다. 실용적인 사용 사례 중 하나는 양쪽 끝에 균일한 라벨이 있는 슬라이더 바 위젯과 전체 너비를 채우는 유연한 슬라이더 바입니다.
특정 목록 항목을 유연하게 설정하려면, 유연한 항목의 자식으로 UIFlexItem을 삽입한 다음, 그 FlexMode 속성을 Fill, Grow, Shrink, 또는 Custom으로 설정하십시오.
