ch03_2_정렬과레이아웃_auto layout

레이아웃 흐름 : Direction

• 세로: y축을 따라 개체를 추가, 제거 및 재정렬합니다. 예를 들어 목록 내의 개체, 뉴스 피드 또는 타임라인 내의 게시물 등이 있습니다.
• 수평: x축을 따라 개체를 추가, 제거 및 재정렬합니다. 예: 버튼 행 또는 모바일 탐색 메뉴의 아이콘입니다.
• 줄 바꿈: 프레임의 여러 행과 열로 개체를 정렬합니다. 개체는 가로로 흐르고 다음 줄로 줄 바꿈됩니다. 예: 사진 갤러리 또는 태그 집합.

Canvas stacking order

자동 레이아웃 프레임을 선택한 상태에서 오른쪽 패널에서 클릭하여 자동 레이아웃 설정을 엽니다. canvas stacking 옆에서 다음을 선택합니다.

• 첫 번째: 스택의 첫 번째 레이어가 맨 위에 있습니다.
• 마지막이 맨 위: 스택의 마지막 레이어가 맨 위에 있습니다.

Spacing : 항목 사이의 간격

항목 사이의 간격에는 두 가지 설정이 있습니다.

• 자동: 개체 사이의 간격을 가능한 가장 큰 거리로 설정합니다. 필드에 입력하거나 드롭다운 메뉴에서 선택합니다.Auto
• 지정된 간격: 개체가 얼마나 멀리 떨어져 있는지 지정합니다. 필드에 값을 입력하거나, 화살표 키를 사용하여 값을 조금씩 이동하거나, 커서를 사용하여 필드를 스크러빙합니다.

Padding

Padding은 자동 레이아웃 프레임의 경계와 프레임의 자식 개체 사이의 빈 공간 또는 흰색 공간을 제어합니다. 패딩을 균일하게, 세로, 가로로 설정하거나 위쪽, 오른쪽, 아래쪽 및 왼쪽 안쪽 여백에 대해 다른 값을 가질 수 있습니다.

캔버스 컨트롤에 액세스하려면 자동 레이아웃 프레임을 선택하고 그 위로 마우스를 가져갑니다. 스마트 선택에 있는 것과 유사한 분홍색 핸들이 나타납니다.

• 핸들을 클릭하여 입력 필드를 열고 숫자 값을 입력합니다.
• 또는 핸들을 클릭하고 드래그하여 간격을 변경합니다

오른쪽 패널의 패딩 컨트롤은 기본적으로 세로(위쪽 및 아래쪽) 및 가로(왼쪽 및 오른쪽) 안쪽 여백으로 구분됩니다.

• 개별 패딩을 설정하려면 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩 필드를 클릭하여 사용합니다.
• 균일 패딩을 설정하거나 CSS 단축어를 사용하려면 또는 패딩 필드를 길게 클릭합니다. CSS 속기를 입력할 수도 있습니다. 예를 들어, enter를 입력하면 위쪽, 오른쪽, 아래쪽 및 왼쪽이 각각 1, 2, 3 및 4로 설정됩니다. 입력하면 값이 위쪽/아래쪽: 1 및 왼쪽/오른쪽: 2로 설정됩니다.

Alignment : 자식 개체에 맞춤 설정

자동 레이아웃 프레임 내에서 자식 개체를 정렬하는 방법을 선택합니다. 자동 레이아웃 프레임의 방향과 분포 또는 항목 사이의 간격에 따라 사용 가능한 정렬 옵션이 결정됩니다.

일반 프레임의 개체와 달리 개체의 정렬을 개별적으로 제어할 수 없습니다. 이러한 이유로 부모 자동 레이아웃 프레임에서 자식 개체의 맞춤을 설정합니다.

오른쪽 패널의 정렬 상자를 사용하여 프레임의 자식에 대한 9가지 레이아웃 옵션 중에서 선택합니다.

• 상자를 선택하고 화살표 키를 사용하여 다른 정렬 설정 간에 전환합니다.
• 상자를 선택하고 ///를 눌러 프레임의 가장자리에 맞게 정렬을 설정합니다.W A S D

항목 사이의 간격이 자동으로 설정된 경우 각 방향에 대해 세 가지 옵션을 사용할 수 있습니다.

•  수직 자동 레이아웃: 왼쪽, 가운데, 오른쪽
•  수평 자동 레이아웃: 상단, 중앙, 하단

항목 사이의 간격이 특정 숫자로 설정된 경우 각 방향에 대해 동일한 9개의 옵션을 사용할 수 있습니다.

• 왼쪽 위
• 상단 중앙
• 오른쪽 위
• 왼쪽
• 중
• 오른쪽
• 왼쪽 아래
• 하단 중앙
• 오른쪽 아래

Text baseline alignment

Resizing

자동 레이아웃의 가장 강력한 기능 중 하나는 자동 레이아웃 프레임에서 개체의 크기를 제어하는 기능입니다.

부모 자동 레이아웃 프레임의 크기 조정 동작을 설정하여 자식 개체에 대한 변경 사항에 맞게 조정합니다. 크기 조정 설정은 오른쪽 패널의 드롭다운 메뉴를 사용하여 X축과 Y축의 개체에 개별적으로 적용할 수 있습니다.

드롭다운에서 크기 조정 옵션 위로 마우스를 가져가면 디자인의 테두리 상자의 크기가 조정되고 변경되는 방식을 나타내는 선이 캔버스에 나타납니다.

고정 너비 또는 높이

자동 레이아웃 프레임이 고정 너비 또는 높이로 설정된 경우 프레임의 크기 값은 그 안의 내용에 관계없이 동일하게 유지됩니다. 프레임의 크기는 길이가 변경되는 텍스트 문자열과 같이 프레임 안에 있는 개체의 변경에 반응하지 않습니다.

최소 및 최대 차원

최소 또는 최대 너비와 높이를 자동 레이아웃 프레임과 해당 자식에 설정할 수 있습니다.

• 너비 드롭다운을 열어 최소 너비 추가 및 최대 너비 추가를 찾습니다.
• 높이 드롭다운을 열어 최소 높이 추가 및 최대 높이 추가를 찾습니다.

너비 또는 높이 드롭다운 메뉴에서 옵션을 선택합니다. 표시되는 새 필드에서 값을 입력하거나 드롭다운을 사용하여 숫자 변수를 적용합니다.

개체에 최소 또는 최대 설정이 포함된 경우 해당 너비 또는 높이 아이콘은 양쪽에 하나씩 두 줄로 늘어납니다. 이러한 아이콘 위로 마우스를 가져가면 캔버스에서 차원 제한을 미리 볼 수 있습니다.

 

키보드 단축키 가이드

기본 단축키

행동맥윈도우

 

자동 레이아웃 제안	Ctrl ⇧ Shift A	Ctrl Alt ⇧ Shift A
자동 레이아웃 제거	⌥ Option ⇧ Shift A	Alt ⇧ Shift A
모든 면의 패딩 편집(오른쪽 패널에서)	⌘ Command + 패딩 입력 필드 클릭	Ctrl + 패딩 입력 필드 클릭
자동 레이아웃 추가	⇧ Shift A	⇧ Shift A

정렬 상자에서

오른쪽 패널에서 정렬 상자를 클릭하고 다음 키를 눌러 다음을 수행합니다.

행동맥 및 윈도우

맞춤 설정	↓ / → / ← / ↑
가장자리에 맞춤 설정	W / A / S / D
기준선 맞춤 전환(Toggle baseline alignment)	B
틈 사이 전환	X

캔버스에서

다음 키보드 단축키를 사용하여 캔버스 핸들을 드래그하여 다음을 수행할 수 있습니다.

행동맥윈도우

반대쪽에 패딩 설정	⌥ Option	Alt
모든 면에 패딩 설정	⌥ Option⇧ Shift	Alt⇧ Shift
큰 넛지로 패딩 또는 간격 설정	⇧ Shift	⇧ Shift

이러한 키보드 단축키를 사용하여 자동 레이아웃 프레임의 특정 영역을 클릭하여 다음을 수행할 수 있습니다.

행동맥윈도우

반대쪽에 패딩 값을 입력합니다.	⌥ Option + 패딩 영역 클릭	Alt + 패딩 영역 클릭
모든 면에 패딩 값 입력	⌥ Option⇧ Shift + 패딩 영역 클릭	Alt⇧ Shift + 패딩 영역 클릭
세트 포옹 내용	vertical 또는 horizontal edge를 두 번 클릭합니다.	vertical 또는 horizontal edge를 두 번 클릭합니다.
채우기 컨테이너 설정	⌥ Option + 수직 또는 수평 가장자리를 두 번 클릭합니다.	Alt + 수직 또는 수평 가장자리를 두 번 클릭합니다.

https://youtu.be/PNJxeD29ZTg?list=PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2