─━ IT ━─

[iOS] SwiftUI :: Alignment Guide(정렬 가이드) 탐구 1편

DKel 2020. 12. 31. 08:30
반응형

스위프트에서 정렬 가이드(Alignment Guide)는 강력하지만 거의 사용되지 않습니다.

정렬 가이드는 앵커 설정과 같은 복잡한 옵션들을 피하는데 도움을 줍니다.

아래 예제에서는 정렬에 대한 변경을 자동으로 애니메이션된 정렬 가이드에 대해 알아보려고 합니다.

소스보기 :: alignment-guide-animation.swift

만약, 당신이 정렬 가이드를 사용해본 적이 있다면, 아마도 이 예제에 대해 당황할 수 있습니다.

정렬 가이드의 한계를 시험해본 결과, 정렬 가이드 자체가 암묵적으로 정렬 지침이 있다는 것을 깨달았습니다.

컨테이너 내부의 모든 뷰에는 개발자의 생각과 달리 정렬 가이드가 존재한다는 것입니다.

정렬 가이드란?

정렬 가이드는 결국 정수 값입니다.

뷰에서의 요소들 중 형제 요소들과 관련하여 어떻게 위치를 정할지 결정하는 숫자값을 설정합니다.

선형은 수직 또는 수평일 수 있어 둘의 차이점도 유의해야 합니다.

수평 정렬의 경우, 세개의 뷰 A, B, C가 있다고 가정합시다.

수평 가이드는 A,B,C 각각 0, 20, 10 입니다.

이런 경우 뷰는 뷰 A의 시작점(0)이 뷰 B의 20만큼의 수평점, 뷰 C의 10만큼이 수평점과 정렬되도록 배치됩니다.

A.x = 0, B.x = 20, C.x = 10

수평 정렬에서도 같은 개념으로 동일하게 정렬한 경우 결과는 다음과 같습니다.

이러한 예에서 알 수 있듯이, 수직 컨테이너 Vstack 는 수평 정렬이 필요하고,

수평 컨테이너 HStack은 수직 정렬이 필요합니다.

사진을 보면 알겠지만, 정확하게 정렬하지 않으면 컴포넌트들이 마음대로 위치될 수 있기 때문입니다.

ZStack은?

ZStack 컨테이너의 경우 수직 정렬, 수평 정렬 모두 필요합니다.

헷갈린다.

일단은 우리가 .leading 과 같은 것을 너무 많은 장소에서 지정하고 있습니다.

그러나 각각의 경우 그것은 완전히 다른 의미를 가질 수 있습니다.

텍스트 정렬, 컨테이너 정렬, 프레임 정렬, 암묵적 정렬값, 명시적 정렬값, 정렬 가이드 등 다양한 .leading 선언

이렇게 많이 .leading이 사용되는데 각각의 .leading 들에 대해 전부 다 알아야 합니다.

Container Alignment (컨테이너 정렬)

컨테이너 정렬은 두 가지 목적에 의해 존재합니다.

1) 특정 정렬 가이드를 무시해야 하거나

2) 특정 정렬 가이드를 무시하지 말아야 할 때

선언하여 사용합니다.

그러나, 명시적 지침을 제외한 모든 다른 케이스에 대해 암묵적인 정렬 지침도 정의하기 때문에 유의해야 합니다.

Alignment Guide (정렬 가이드)

정렬 가이드의 값은 해당 값을 담고 있는 매개 변수 .leading과 일치하지 않는 한

이 가이드를 선언한 컴포넌트는 레이아웃 상에서 무시됩니다.

Implicit Alignment Value (암묵적 정렬 값)

정수 값이며, 수정되는 뷰에 대한 가이드의 위치를 나타내는 값입니다.

d.width, d[.leading], d[.center] 등 편리한 사전 설정 값이 있지만,

궁극적으로 정수 값을 반환하고 있습니다. 이 값은 주어진 정렬 가이드에 관련된 기본값 입니다.

Explicit Alignment Value (명시적 정렬 값)

정수 값이며, 수정되는 뷰에 대한 가이드의 위치를 나타내는 값입니다.

이는 명시적 값. 즉, 개발자가 프로그래밍 방식으로 정의한 값 입니다.

Frame Aligmnemt (프레임 정렬)

포함된 모든 뷰가 컨테이너 내부에서 어떻게 정렬되어 있는지 개발자가 선언하여하는 정렬 방식입니다.

Text Alignemnt (텍스트 정렬)

다중 행 텍스트 뷰의 경우 텍스트 뷰 내에서 텍스트 라인이 정렬되는 방식을 지정합니다.

반응형