Building Custom View with SwiftUI(WWDC19) - 2

지난 편에 이어서 SwiftUI의 Layout을 더 알아보자.

지난편에서 SwiftUI의 기본적인 Layout을 보았다면, 이번에는 좀 더 복잡한 View를 살펴본다.

 

들어가기 앞서.. -복습

UIKit과는 다르게 SwiftUI는 View자체의 Size로 layout을 설정한다.

우리가 익히 알던 Constraint가 없는 것이다.

따라서...

Frame은 더이상 제약조건(Constraint)이 아니라 하나의 View로 인식해야한다.

Child들에게 사이즈를 제안을 할 수 있지만 결국 Child가 자신의 크기를 선택한다.

물론, 부모보다 Child가 더 큰 사이즈를 가지게 되면 짤려 보이겠지만.. 부모가 child의 사이즈를 결정할 수 없다는 게 포인트!

 

SwiftUI로 어떻게 구현할 수 있을까?

Stack

SwiftUI에서는 위와 같이 복잡한 뷰를 가지기 위해 Stack을 사용한다.

우리가 익히 사용하던 Stack과 비슷하다.

UIkit에서 Constraint를 주던 방식 대신에, Spacer(빈 공간을 차지하는 View)나 Stack의 alignment를 사용한 것이 인상적이다.

 

Stack Child 경쟁

Stack안의 child들은 동등한 위치에서 동일한 공간을 가지고 경쟁을 해야한다.

위의 HStack은 lineLimit가 1줄로 고정이 되어있다. 

그 의미는 만약 자리가 없다면 child가 짤려 보일 수 있다는 말이다.

이 과정에서 Child들은 어떤 것이 먼저 짤릴지 경쟁한다.

어떤 방식으로 경쟁을 하는 걸까?

 

Stack 구성 단계

1. 먼저 Stack은 내부 공간 요구사항을 파악하고 제안된 너비에서 이를 뺀 나머지(아직 할당되지 않은 공간) 을 Child에게 제공한다)

2. 할당 되지 않은 공간을 3개의 Child가 있으므로 3등분한다.

3. Child 중에 가장 유연하지 않은 Size를 가진 Child의 사이즈로 먼저 제안한다.

여기서는 Image가 20x20으로 고정이 되어 있으므로 image가 되겠다.

4. 할당 되지 않은 공간 중에 Image size를 뺀다.

이 과정을 반복함.

 

5. StackView 설정.

이제 Child의 Size가 다 정해졌다. Stack은 Spacing이나 alignment를 적용하고 child를 감싸는 자신의 View를 만든다.

 

위와 같은 순서를 따르기 때문에 만약 공간이 충분하지 않다면 Avocado Toast가 짤려서 보이는 것이다.

하지만 우리는 Avocado Toast를 보여주고 싶을 수도 있지 않은가?

이를 해결하기 위해 layoutpriority를 줄 수 있다.

 

Alignment

Alignment는 SwiftUI 이전에도 익숙하게 다뤄와서 다를게 없을 것이라 생각 할 수 있다.

하지만 앞선 예시에서 Delicious의 크기를 작게 만든 다음, bottom으로 alignment를 주면 baseLine이 엉망이 되어버린다.

 

다행히, SwiftUI에서는 이에 대한 해결법을 제시해 준다.

 

first 혹은 lastTextBaseline에 맞추도록 alignment를 설정 할 수 있다.

 

이미지는요?

이미지에는 Text가 없지만 모든 alignment에는 기본 값이 있고, lastTextBaseline Default 값은 View의 아래쪽 가장자리이다.

So.. 걍 쓰면된다.

 

좀 더 나아가서 밑과 같이 baseline에서 퍼센트를 지정하여 좀더 디자인적으로 예쁘게 만들 수 도 있다.

 

Alignment는 Custom

위와 같은 상황에서 어떻게 두개의 노란 라인을 맞출 수 있을까?

이럴 때 Custom Alignment를 만들어서 해결 할 수 있다.

위 코드를 하나씩 살펴보자.

 

1. VerticalAlignment을 Extension하고 AlignmnetID를 채택한 Enum값을 만든다.

Struct을 이용해 만들 수도 있지만, Enum을 주로 이용한다고 한다

 

2. SwiftUI에게 Default Value를 어떻게 계산할지 함수를 만들어 알려준다.

사실 return 되는 기본값은 inner Stack에서 딱히 사용되지 않기 때문에 어떤 값을 넣든지 중요하지는 않다.

다만, bottom을 맞춘다는 느낌으로 bottom을 주었다.

 

3. Enum을 인자로 받는 static 값을 정의한다.

4. 설정한 값을 기존의 HStack에 적용한다.

갑자기 나누기 2요?

어려워 보이지만, 알고 보면 쉽다. HStack을 반으로 나눈 만큼으로 정렬한다고 생각하면 된다.

이를 적용할 View에다가 alignmentGuide를 이용해 적용시켜주면된다. 

 

SwiftUI가 StackView를 이용해 어떻게 View를 Custom하는지 알아보았다.

다음 글 SwiftUI의 Graphical Effect를 알아보자.

 

https://developer.apple.com/videos/play/wwdc2019/237/?time=1274 

Building Custom Views with SwiftUI - WWDC19 - Videos - Apple Developer