[번역] Constraints 없는 오토레이아웃(Auto Layout Without Constraints)

작성일 :

개요


해당 문서는 학습 목적으로 Apple 공식 문서인 🔗 Auto Layout Guide을 번역한 글입니다. 다소 오역이 있을 수 있어 잘못된 내용이 있을 수 있습니다. 문제가 되거나 오류가 있다면 댓글 부탁드립니다.

StackView


StackView를 활용하면 복잡한 Constraints 없이 Auto Layout을 쉽게 구현할 수 있습니다. 단일 Stack View는 사용자 인터페이스 요소의 행 또는 열을 정의합니다. StackView는 속성은 아래와 같습니다.

  • axis (🔗 UIStackView만 해당) : 스택 뷰의 방향(수직 또는 수평)을 정의합니다.
  • orientation: (NSStackView만 해당) stack view의 방향(세로 또는 가로)을 정의합니다.
  • distribution: 축을 따라 뷰의 레이아웃을 정의합니다.
  • 🔗 alignment: 스택 뷰의 축에 수직인 뷰의 레이아웃을 정의합니다.
  • 🔗 spacing: 인접한 보기 사이의 간격을 정의합니다.

StackView를 사용하려면 Interface Builder에서 세로 또는 가로 Stack View를 캔버스로 드래그합니다. 그런 다음 콘텐츠를 끌어서 스택에 놓습니다.

개체에 고유 콘텐츠 크기가 있는 경우 해당 크기로 스택에 나타납니다. 고유 콘텐츠 크기가 없는 경우 Interface Builder는 기본 크기를 제공합니다. 개체의 크기를 조정할 수 있으며 Interface Builder는 크기를 유지하기 위해 제약 조건을 추가합니다.

레이아웃을 더 세밀하게 조정하려면 속성 관리자를 사용하여 StackView의 속성을 수정할 수 있습니다. 예를 들어, 다음 예제에서는 8pt 간격과 Fills Equally 분포를 사용합니다.

image01

Stack View는 또한 Arrangeed View의 content-hugging 및 compression-resistance 우선순위에 따라 레이아웃을 기반으로 합니다. 크기 속성을 사용하여 수정할 수 있습니다.

NOTE

Arrangeed View에 직접 제약 조건을 추가하여 레이아웃을 추가로 수정할 수 있습니다. 그러나 가능한 충돌을 피하고 싶을 것입니다. 일반적으로 보기의 크기가 지정된 차원에 대한 기본 콘텐츠 크기로 기본 설정되면 해당 차원에 대한 제약 조건을 안전하게 추가할 수 있습니다. 충돌 제약 조건에 대한 자세한 내용은 🔗 Unsatisfiable Layouts을 참조하십시오.

또한 다른 StackView 내에 StackView를 중첩하여 더 복잡한 레이아웃을 구축할 수 있습니다.

image02

일반적으로 StackView를 사용하여 가능한 한 많은 레이아웃을 관리하십시오. Stack View만으로는 목표를 달성할 수 없는 경우에만 제약 조건을 생성합니다.

StackView 사용에 대한 자세한 내용은 🔗 UIStackView Class Reference 또는 🔗 NSStackView Class Reference를 참조하십시오.

NOTE

중첩된 Stack View를 창의적으로 사용하면 복잡한 사용자 인터페이스를 만들 수 있지만 constraints(제약 조건은) 여전히 중요합니다. 최소한 항상 가장 바깥쪽 스택의 위치(및 가능하면 크기)를 정의하는 제약 조건이 필요합니다.