Stack

Stack 은 View 들을 수직 또는 수평으로 일관성 있게 배치해줍니다.

Vertical Stack 과 Horizontal Stack 이 있으며, Stack 을 자유롭게 중첩하며, 하나의 디자인 요소를 만들 수 있습니다.

Stack 내부에 들어간 View 는 Auto Layout 의 Size 속성을 따르게 되어, 기본 컨텐츠의 Size 를 가지게 됩니다. 대표적인 예로, Label 의 경우 텍스트 내용에 따라 View 의 크기가 자동으로 조절됩니다.

Stack 을 만들기 위해서는 UI Library 를 열고 H Stack 또는 V Stack 을 선택해주세요.

H Stack 은 Horizontal Stack 을 의미하고, V Stack 은 Vertical Stack 을 의미합니다.

둘 중에 원하는 Stack 을 선택하면 되지만, Inspector 에서 Horizontal, Vertical 을 언제든지 바꿀 수 있으므로, 어떤 걸 선택할지 크게 고민할 필요는 없습니다.

Stack 을 Scene 위에 올려 놓으면 두 개의 Placeholder View 를 가지고 있는 Stack 을 확인할 수 있습니다.

Layerz App Designer 내에서 Placeholder View 는 빈 자리를 임시로 채우고 있는 용도로서 가끔 볼 수 있습니다.

Placeholder View 는 임시 View 이기 때문에, Subview 를 가질 수 없고, 오직 다른 View 로 대체되는 역할만 하게 됩니다. 다른 View 로 대체되기 전에는 Preview Mode 에서 보이지 않습니다.

Placeholder View 를 다른 View 로 대체하기 위해선 UI Library 에서 원하는 View 를 Drag and Drop 으로 옮겨놓으면 됩니다. 선택된 View 가 Subview 로 추가되는 대신에 Placeholder View 가 있던 자리에 해당하는 View 로 대체되게 됩니다.

Floating Toolbar 에서 Stack 다루기

Stack 을 구성하기 위해서 Floating Toolbar 를 사용합니다.

Stack 안에서 Subview 추가하기

Stack 을 선택하세요. Stack 을 한 번에 선택하기 위해선 Outline 뷰에서 원하는 요소를 선택하면 됩니다.

Floating Toolbar 에서 + 버튼이 그려진 네번째 아이콘을 선택하세요.

‘Add from Library’ 와 ‘Add Placeholder’ 두 메뉴를 볼 수 있습니다.

‘Add from Library’ 를 선택하면 UI Library 에서 추가하기를 원하는 View 를 곧바로 추가할 수 있고, ‘Add Placeholder’ 를 선택하면 Placeholder 가 추가됩니다.

Embed in Stack

Stack 을 만들기 위해 Stack 자체로부터 확장해 나갈 수 있지만, 다른 방법이 있습니다.

Stack 과 상관없이 대부분의 View 는 Embed in Stack 메뉴를 통해서, 자신을 Stack 으로 감싸면서 Stack UI 의 일부분으로 만들 수 있습니다.

일반적인 UI 요소들뿐 아니라, Stack 자체도 다른 Stack 에 Embed 할 수 있기 때문에, 복잡한 UI 를 손쉽게 만들 수 있습니다.

마지막으로 Floating Toolbar 에서 Duplicate 버튼과 삭제 버튼을 통해서도 Stack 을 편리하게 편집할 수 있는 걸 알 수 있습니다.

Stack 조절하기

단순히 Stack 에 차곡차곡 UI 를 넣는것만으로는 원하는 UI 를 만들 수 없습니다.

Stack 이 선택된 상태에서 Inspector 를 확인해보세요.

Stack 섹션을 보면 해당 Stack 의 여러가지 요소를 바꿀 수 있습니다.

• Axis : Vertical, Horizontal 을 곧바로 바꿀 수 있습니다.
• Distribution : Stack 내부에 UI 요소들을 어떤 기준으로 공간을 배치할지 정할 수 있습니다. 다음과 같은 선택지가 있으니, 바꿔가면서 적당한 값을 찾아보세요.
  • Fill
  • Fill Equally
  • Fill Proportionally
  • Equal Spacing
  • Equal Centering
• Alignment : Stack 내부에 UI 요소들의 Alignment 를 정할 수 있습니다.
  • Fill
  • Leading/Top
  • First Baseline
  • Center
  • Trailing/Bottom
  • Last Baseline
• Spacing: Stack 내부 UI 요소들 사이 간격을 정할 수 있습니다.