Auto Layout — Layerz Docs

Layerz App Designer 에서는 모든 디자인 요소가 Auto Layout 으로 구성됩니다.

Auto Layout 은 Parent View 그리고 Sibling View 와 관계를 지정할 수 있고, 컨텐츠에 따라 자동으로 사이즈를 설정하는 특성을 가지고 있습니다.

Auto Layout 을 이용하는 가장 간단한 사용방법은 상단의 Library 로부터 원하는 UI Element 를 Drag and Drop 으로 Scene 위의 원하는 위치에 올려놓으면 됩니다.

Drop 될 때, 주변의 디자인 요소에 따라 가장 적당한 Auto Layout 이 자동으로 적용됩니다.

물론 원하는 Auto Layout 으로 편집할 수 있습니다.

예제를 통해, Auto Layout 에 익숙해지도록 하겠습니다.

Auto Layout 을 사용하는 방법은 다음 네 가지 방식으로 나눠서 설명할 수 있습니다.

자동 배치

Scene 위에 새로운 UI 요소를 추가하는 방법입니다.

UI Library 로부터 원하는 UI 를 Drag and Drop 을 이용하여 원하는 위치에 위치시켜주면, 자동으로 적합한 Auto Layout 이 적용되며 Scene 위에 추가됩니다.

이 때 선택된 View 를 Drag 하면 원하는 위치로 이동시킬 수 있습니다.

Resize Anchor 를 이용해서 크기도 마음대로 조절할 수 있습니다.

Simple Auto Layout

Auto Layout 을 부모뷰에만 적용한다면, Simple Auto Layout Menu 를 사용하는것이 편리합니다.

View 를 선택했을 때 View 하단에 나타나는 Floating Toolbar 에 Simple Auto Layout 설정이 있으며, 이 메뉴에서 원하는 위치를 선택하면 곧바로 적용됩니다.

Simple Auto Layout 은 다음과 같은 옵션으로 구성되어 있습니다.

Fill
Center
Top, Bottom, Leading, Trailing
Top Center, Bottom Center, Leading Center, Trailing Center
Top Leading, Top Trailing, Bottom Leading, Bottom Trailing

Advanced Auto Layout

Auto Layout 이 Parent View 와 관계를 설정하는 Simple Auto Layout 만 있다면, Auto Layout 이라고 부르기 어렵습니다.

Layerz 에서는 주변 Sibling View 와 자유롭게 관계를 편집할 수 있습니다.

Auto Layout 을 추가하는 방법과 삭제하는 방법을 나눠서 설명하겠습니다.

Auto Layout 항목 추가하기

View 하나를 선택하면 View Outline 위에 Resize 를 위한 8개의 Resize Anchor 를 확인할 수 있습니다. 거의 모든 디자인 Editor 가 이렇게 구성되어 있기 때문에, 이 점들에 대해선 직관적으로 알 수 있습니다.

그러면 이제 View 한 가운데에 있는 새로운 점을 확인할 수 있습니다. Auto Layout 설정을 편집할 수 있는 View 라면 이 가운데의 점을 볼 수 있습니다. View 가 Lock 되어 있거나, List 또는 Stack 의 자식일 경우에는 이 점이 보이지 않습니다.

이제 이 점을 선택한 후에 바깥 쪽으로 끌어보면 화살표 하나가 만들어져서 끌려 나오는 걸 볼 수 있습니다. 이 화살표의 끝을 Auto Layout 으로 관계를 맺고 싶은 다른 View 로 끌어와서 손가락을 놓게 되면 화살표로 연결된 두 View 사이에 설정할 수 있는 Auto Layout 에 대한 메뉴를 볼 수 있고, 여기서 원하는 관계를 설정하면 됩니다.

이 때 나오는 메뉴는 다음과 같으며, 언제나 모든 메뉴가 나오지는 않고, 위치에 따라 적합한 메뉴만 표시됩니다.

With Parent View
- Simple
  - Fill
  - Center
- Space
  - Top
  - Bottom
  - Leading
  - Trailing
- Center
  - Center Horizontally
  - Center Vertically
With Sibling View
- Horizontal Spacing
- Vertical Spacing
- Horizontal
  - Leading
  - Center Horizontally
  - Trailing
  - Equal Width
- Vertical
  - Top
  - Center Vertically
  - Bottom
  - Equal Height

Auto Layout 항목 편집하기

Inspector: Location

Auto Layout 이 맺어진 상태에서 개별 View 들을 이동하거나 Resize 할 수 있습니다.

이 때, 좀 더 세밀한 조절을 원한다면 Inspector 의 Location 항목에서 값들을 조절할 수 있습니다.

Inspector 에서는 선택된 View 의 Auto Layout 설정이 모두 표시되어 있습니다.

여기서 Stepper 버튼을 눌러서 Auto Layout 의 Constant 값을 조절할 수 있습니다.

Reset 버튼을 누르면 0으로 초기화됩니다.

여기에 Margin 항목을 키고 끌 수 있습니다.

Margin 은 View 의 속성이며 Margin 값을 이용해서 Children View 의 위치를 일관되게 유지할 수 있습니다.

가장 아래에 있는 Scene 의 경우 이 값은 Safe Area 값으로 정해져 있습니다.

Inspector 에서 조절할 수 있는 값들을 바꿔보면서 어떻게 적용할 수 있는지 실험해 보세요.

Inspector: Size

Size 도 Auto Layout 의 일부입니다.

View 를 Resize Anchor 를 이용해서 Size 를 변경해보면 Inspector 의 Size 값이 변경되는 걸 볼 수 있습니다.

그런데 여기서 표시되는 수치가 정확히 이 View 의 Size 를 의미하지는 않습니다.

이 Size 는 사실은 권장되는 Size 를 나타냅니다.

왜냐하면 Auto Layout 에서는 View 자체의 크기와 상관없이, 외부 요인에 의해 Size 가 정해지는 일도 많기 때문입니다. View 를 좌우로 꽉 채우는 걸 생각해보세요. View 자신의 Size 는 이 때에는 무시됩니다.

그래서 이 Size 는 Size 가 필요할 때에만 사용됩니다.

List 또는 Stack 에 Embed 될 때는 이 Size 가 매우 중요해집니다. 왜냐하면 이 경우 각 View 들의 Size 데로 Layout 하게 되는 경우가 대부분이기 때문입니다.

또한 Label 같이 들어있는 Text 내용에 따라 크기가 자동으로 변경되는 경우도 있습니다. 이 때에는 Auto Size 버튼이 활성화되므로 Text 의 내용과 Auto Layout 설정에 따라 자동으로 View 가 Layout 되는 걸 볼 수 있습니다.

Auto Layout 항목 삭제하기

Auto Layout 항목은 세 개 혹은 네 개도 설정이 될 수 있으며, 필요없는 항목은 삭제가 필요할 때도 있습니다.

이 때는 삭제를 원하는 항목을 오른쪽에서 왼쪽으로 Swipe 하면 삭제 메뉴가 나옵니다.

자동 재배치

Auto Rearrangement

선택된 View 를 이동시킬 때에는 Parent View 를 바꾸지 않은채 이동하게 됩니다.

만약 다른 View 위로 옮기고 싶다면, 다시 한 번 Drag and Drop 을 이용할 수 있습니다.

선택된 View 를 곧바로 Drag 하는 것과 다르게, View 를 Long Touch 하면 선택된 View 가 Lift 됩니다. 이 상태에서 Drag 를 하면 마치 처음 UI Library 에서 Drag 하는 것처럼 어느 View 로든 이동시킬 수 있습니다.

이 때는 다시 자동 배치되므로, 편리하게 Auto Layout 을 변경시킬 때도 이용할 수 있습니다.