Auto Layout Properties

Auto Layout은 레이아웃을 구성할 때 기능성과 미적 부분을 모두 충족시킬 수 있도록 다양한 커스터마이징 옵션을 제공합니다. 이 속성에는 크기 조정, 방향, 레이아웃 정렬 및 고급 설정이 포함됩니다.

Resizing Properties

크기 조정 속성은 자식 레이어와 부모 컨테이너가 콘텐츠나 레이아웃 변경에 어떻게 반응하여 조정되는지를 제어합니다. 이러한 설정은 오른쪽 패널의 드롭다운 메뉴를 사용하여 가로(Width)와 세로(Height)에 개별적으로 적용할 수 있습니다. 크기 조정 옵션 위에 마우스를 올리면 캔버스에서 해당 옵션의 효과를 미리 확인할 수 있습니다.

Fixed

객체의 크기를 일정하게 유지하며, 콘텐츠의 변경에 영향을 받지 않습니다.

Hug

부모 컨테이너의 크기를 자식 레이어에 맞게 조정하며, 패딩과 간격 크기를 반영합니다.

Fill

자식 객체를 부모 컨테이너의 크기에 맞게 확장합니다.

Fixed

너비 또는 높이에 고정(Fixed) 옵션이 설정된 경우, 부모 프레임은 자식 레이어의 크기 조정에 관계없이 절대적인 크기를 유지합니다.

Hug Contents

Auto Layout (AL) 부모가 Hug로 설정되면, 부모 프레임은 자식 레이어의 크기에 완벽히 맞도록 동적으로 크기를 조정합니다.

Fill Container

자식 레이어가 FILL로 설정되면, 부모의 크기에 맞춰 자식 레이어의 크기가 조정되어 사용 가능한 공간을 채웁니다. 이는 부모 크기에 상대적으로 동작합니다.

Direction Properties

방향 속성은 Auto Layout 컨테이너 내에서 자식 객체를 정렬하는 방식을 정의하여 다양한 디자인 상황에서 유연하게 레이아웃을 구성할 수 있도록 합니다.

Vertical (기본값)

자식 객체를 수직으로 쌓아 정렬합니다.

Horizontal

자식 객체를 수평으로 나란히 정렬합니다.

Wrap

컨테이너 공간이 부족할 경우 객체를 새로운 행이나 열로 이동시킵니다.

Layout Properties

레이아웃 속성은 Auto Layout 컨테이너 내에서 자식 레이어의 정렬(Alignment), 여백(Padding), 간격(Gap)을 세부적으로 제어할 수 있는 기능을 제공합니다. 이러한 설정은 세련되고 일관된 디자인을 가능하게 합니다.

Alignment

컨테이너 내에서 자식 객체의 위치를 결정합니다(예: 상단-좌측, 중앙, 하단-우측).

Padding

컨테이너의 가장자리와 자식 객체 사이의 공간을 정의합니다.

Gap

자식 객체들 간의 간격을 설정하며, 고정 값 또는 동적 값으로 조정 가능합니다.

Auto Layout and Constraints

Auto Layout이 적용되지 않은 컨테이너가 Auto Layout이 적용된 자식 컨테이너를 포함할 경우, 수직 및 수평 제약 조건에 따라 특정 상호작용이 발생합니다.

Vertical Constraints

Auto Layout 컨테이너에 상단 & 하단(T+B) 또는 스케일(Scale)이 할당된 경우, Auto Layout 컨테이너의 높이는 고정(Fixed)으로 설정되어야 합니다. Auto Layout 컨테이너를 다시 Hug로 변경하면 수직 제약 조건이 중앙(Center)으로 재설정됩니다.

Horizontal Constraints

Auto Layout 컨테이너에 좌측 & 우측(L+R) 또는 스케일(Scale)이 할당된 경우, Auto Layout 컨테이너의 너비는 고정(Fixed)으로 설정됩니다. Auto Layout 컨테이너를 다시 Hug로 변경하면 컨테이너의 수평 제약 조건이 중앙(Center)으로 재설정됩니다.

이러한 조정은 Auto Layout과 비(非) Auto Layout 컨테이너 간의 논리적인 상호작용을 가능하게 하여 예측 가능한 작업 흐름을 제공합니다.

Advanced Settings

Auto Layout은 레이아웃의 유연성과 사용자 정의를 향상시키기 위한 추가 고급 설정을 제공합니다. 이러한 옵션을 통해 디자인 내 특정 요소와 동작을 세밀하게 조정할 수 있습니다.

Ignore Auto Layout

"Auto Layout 무시(Ignore Auto Layout)" 기능은 선택한 객체에 대해 Auto Layout 규칙을 무시하도록 설정하여, 전체 컨테이너 구조에 영향을 주지 않고 수동으로 조정할 수 있도록 합니다. ‘Ignore Auto Layout’로 설정된 객체는 독립적으로 제약 조건을 설정할 수 있어, 컨테이너 내 다른 요소의 Auto Layout 속성을 유지하면서도 독특한 레이아웃 시나리오를 구현할 수 있는 유연성을 제공합니다.

Layer Order Control

레이어의 쌓기 순서를 간단히 관리할 수 있는 다양한 옵션을 제공합니다:

• 레이어 패널: 패널에서 레이어를 직접 드래그하여 순서를 변경할 수 있습니다.
• 키보드 단축키: 화살표 키를 사용하여 레이어의 쌓기 순서를 정밀하게 조정할 수 있습니다.
• 마우스 상호작용: 캔버스에서 객체를 클릭하고 드래그하여 인터랙티브하게 위치를 재배치할 수 있습니다.

Instance Overrides

Auto Layout이 적용된 컴포넌트의 인스턴스는 선택적으로 조정할 수 있어 마스터 컴포넌트를 변경하지 않고도 유연성을 제공합니다.

• 크기 조정: 크기 조정 값의 수정은 기존 옵션으로 제한되며, 새로운 고정 값은 추가할 수 없습니다.
• 정렬, 간격, 패딩: 이러한 속성은 인스턴스 내에서 사용자 정의가 가능합니다.
• 방향: 방향 변경은 인스턴스에서 지원되지 않습니다.