Building Custom Views with SwiftUI

[eeeesong]

Building Custom Views with SwiftUI

[eeeesong]

Stack

HStack과 VStack

• 아랍권 국가에서는 오른쪽 -> 왼쪽 방향으로 글을 읽고, SwiftUI는 이러한 방향 변경에도 완벽하게 대응.
• 그래서 left & right이 아니라, leading trailing으로 표현한다.

Layout Priority

• Stack의 요소들을 화면에 전부 표시하기 어려운 경우를 대비하기 위해, 우선도를 표시해줄 수 있다.

• HStack은 가장 flexible하지 않은 순서대로 공간을 배정해 줄 것이다. 아보카도 이미지 -> Delicious -> Avocado Toast 순서로 배정이 될 것.
• 근데 글자가 잘려야만 한다면 Delicious보다는 Avocado Toast가 살아남는 게 나을 것이므로 우선도를 부여.

Alignments

• 사이즈가 제각각이라 alignment를 하나로 맞췄을 때 아래 라인이 거지같이 나올 수 있다.

• SwiftUI는 이를 간단하게 해결할 수 있도록 lastTextBaseline을 제공한다.
• 이미지는 baseline이 없지만, default로 bottom을 가지지만... 이미지 정렬에 대해 디자이너는 여전히 불만족할 수 있고

• 이렇게까지 설정이 가능하다..!

• 각 Stack끼리 alignment가 맞지 않는 경우에도 해결이 가능하다.
• alignment를 extension하여 custom하게 만들고 설정해줄 수 있다.

[eeeesong]

SwiftUI Graphics

이전에 Core Graphics로 구현하던 것들.

Drawing <-> View

• SwiftUI에서는 Drawing들도 다 View다.
• 일반적인 View들처럼 속성을 적용할 수 있다.

Drawing Model

• 그래디언트나 패턴도 쉽게 적용이 가능하다..!
• 그래디언트 객체를 만들고 Drawing 객체에 집어 넣어주면 뚝딱 완성이다.

반응형 그래디언트 도넛 그래프(?) 만들기

• Path를 이용해서 모양을 그려준다.

• 애니메이션을 넣어 주기 위해 필요한 데이터를 따로 선언해준다.

• 그러면 이제 준비는 끝났고
• 그래디언트를 채워주는 것과
• 나머지 조각들을 모아서 원 모양을 그려주는 2가지가 남았는데...
• 이 때 ZStack을 사용한다.

ZStack

z축 컨트롤을 통해 원근감을 보여줄 수 있다.

• 아래에 쓰인 scaleAndFade는 custom하게 만든 트랜지션 동작이다.

• 트랜지션을 custom하게 만든다는 건 어떤 의미일까?
• 중간 과정들은 프레임워크가 알아서 해줄 것이고, 개발자는 시작과 끝 상태만 말해주면 된다.

• 상태를 전달해주기 위해 ViewModifier 객체를 만들어 주는데, 여기서도 body를 정의해준다.

• 그리고 아래와 같이 전달해주면 알아서 트랜지션화해서 보여줄 것이다.

성능 개선하기

• 각 Drawing은 기본적으로 하나의 NSView로 이뤄지므로, 많아진다면 성능 상의 이슈가 발생할 수 있다.
• 이때, View를 그룹화하여 렌더링 시의 과부하를 줄여줄 수 있다.
• drawingGroup에 넣어주면, View들은 모두 하나의 NSViewer로 플랫화되고, metal로 렌더링된다.

[eeeesong]

마치며..

• SwiftUI의 장점은 View뿐만 아니라 Animation, Transition, Layout 등 보여주기 위한 모든 기능을 한 프레임워크에 모아서 일원화했다는 것이다.
• 개발자는 꺼내 쓰기만 하면 된다!