#13 Drawing & Custom Graphics
더 복잡한 앱을 개발하기 시작하면 SwiftUI가 제공하는 기본 제공 컨트롤보다 더 많은 custom 을 위한 유연함이 필요하다.
SwiftUI는 앱 내에서 그래픽 생성을 지원하는 풍부한 라이브러리를 제공한다.
그래픽은 사용자에게 정보를 효율적이고 이해하기 쉽게 전달한다.
예를 들어, 동일한 정보를 그래픽으로 보는게 읽는 것 보다 시간이 덜 걸린다.
이 장에서는 공항 앱을위한 몇 가지 awards 그래픽을 만들어 SwiftUI에서 그래픽을 사용해본다.
Creating shapes
starter project 에는 작은 공항을 위한 앱이 있다.
3개의 award 뱃지를 만들 것 이다.
뱃지를 그릴 FirstVisitAward.swift 파일을 만들고 AirportAwards.swift 에 FirstVisitAward를 scrollView 안에 넣어준다.
SwiftUI에서 기본 drawing structure은 Shape 가 있다. (simple primitive shape set)
먼저 사각형을 추가하기 위해 FirstVisitAward.swift 에서 기본 Text를 지우고 Rectagle() 로 바꾼다.
이 사격형은 SwiftUI 에서 도형을 그릴때 default 값이 무엇인지 보여주고 있다.
만약 명시적으로 fill 이나 strock 를 알려주지 않으면 shape 는 현재 foreground color 로 채워질 것이다. (Color.primary)
항상 다크모드에서도 어떻게 보여지는지 확인해야 한다.
.environment(\.colorScheme, .dark)
Xcode 11.4 에서 enviroment 를 바꿔도 background 가 바뀌지 않는 버그가 있어서 preview 를 NavigationView 로 wrap 해서 확인한다.
NavigationView wrapping 해도 바탕 흰색인데..?
Rectangle()
.fill(Color.blue)
.frame(width: 200, height: 200)
defualt 를 override 해서 light 모드던 dark 모드던 같은 색을 띈다.
여기서 modifier 순서가 중요한데 fill은 frame 전에 위치해야 한다.
border(_:width:)를 통해 외곽선을 만들 수 도 있다.
Using gradients
solid color 대신 gradient fill을 사용할 것 이다.
linear-gradient 색들 사이를 부드럽게 전환하며 보여준다. startPoint 와 endPoint 는 UnitPoint 구조체를 사용한다.
이 구조체는 값의 범위를 0 부터 1의 범위로 만들어 정확한 값 없이 범위를 쉽게 정의할 수 있게 해준다.
UnitPoints origin 좌표는 (0,0) 으로 상단왼쪽에 위치하고 오른쪽 아래로 갈수록 증가한다.
starting point 를 bottom left corner 로 정하고 endpoint 를 top right corner 로 지정했다.
linear-gradient 는 무조건 0부터 1까지의 범위로 강제하진 않는다. 시작점과 끝점을 원하는 아무데나 view 밖에서도 정의할 수 있다.
*이 point들은 color의 끝이 아닌 transition의 끝을 뜻한다. Color는 이러한 지점을 지나서 end color까지 진행된다.
Rotating shapes
이번엔 만든 사각형을 회전시키며 새로운 사각형 2개를 만들어 본다.
ForEach 로 만든다.
- 3개의 사각형을 담을 ZStack을 만든다. ZStack은 content를 배치가고 양 축에 정렬한다.
- ForEach 를 통해 순회하며 (0, 1, 2) index 인 i 를 전달한다.
- 사각형을 만드는 코드는 변함이 없지만 i*60 값으로 회전시킨다,
Adding Images
drawing 과 image를 합치는 건 공수를 줄여준다.
크기가 정해져 있는 사각형을 만드는 건 image를 다루는 것을 더 어렵게 만든다.
더 나은 옵션으로는 frame 을 채워서 모든 크기에 맞게 조정하는 것이다. 적응형 view를 만든다
frame modifier를 rectangle 에서 없애고 preview 에는 frame 을 적용해준다.
그리고 image에 resizeable modifier 를 적용하고 회전과 opacity 를 준다.
Scaling drawings in views
실행해보면 뱃지가 타이블과 겹치는 문제가 있다.
회전된 shape 가 사각형 내에 위치하도록 사이즈를 조정해야 한다.
- GeometryReader container는 내부 view 의 size 와 shape 를 가져올 수 있게 하여 constants에 의존하지 않고 코드를 작성할 수 있게 한다.
- geometry의 size 프로퍼티를 사용해서 view 의 너비와 높이를 가져온다.
그리고 0.7만큼 scale 을 낮춰서 frame 을 회전해도 사각형 안에 위치하도록 만든다.
SwiftUI는 바로바로 preview 를 통해 확인할 수 있데 해준다. - image 또한 scaleEffect로 같은 scale 만큼 줄인다.
Other shapes
SwiftUI 는 다른 모양도 제공한다.
- Circle: 원의 반지름은 사각형 frame 의 짧은 모서리의 반에 해당한다
- Ellipse: frame 에 맞게 타원이 만들어 진다.
- Rounded Rectangle: frame 에 맞게 타원이 만들어 진다.
- Capsule: rounded rectangle 인데 corner radius 가 사각형의 짧은 모서리의 절반이다.
scale 이나 다른 effect 는 Rectangle 과 동일하게 적용된다.
복잡한 그림을 그릴땐 Paths 를 이용해라
Drawing lines with paths
custom shape 를 만들고 싶을 때 Paths를 사용한다.
OverNightParkAward.swift 파일을 만들어서 도형을 그려본다.
이전과 동일하게 GeometryReader로 frame 에 관계없는 동적인 view 를 만들어준다.
처음 세 줄은 너비와 높이 사이의 더 작은 치수로 크기를 결정한다.
그런 다음 크기에 따라 근거리 및 원거리 값을 정의한다.
마지막으로 Path 에 Color를 채워주면
.fill(Color.init(red: 0.4, green: 0.4, blue: 0.4))
Drawing dashed line
도로처럼 보이게 하기위해 중간에 점선을 그을 것 이다.
도로 shape 를 ZStack 으로 감싸고 아래에 점섬을 위한 코드를 작성한다.
차량 이미지도 추가한다.
Drawing arcs and curves
path 는 선을 그리는데 적합하다. 곡선을 그릴려면 arcs 와 quadratic curves 를 사용해야 한다.
AirportMealAward.swift 파일을 만든다.
Drawing quadratic curves
quadratic math (이차방정식) 공식에서 이름을 따왔다. SwiftUI는 수학적인 부분을 담당한다.
이차곡선과 같이 3번째 점(control point) 로 당겨진 곡선을 생각하면 된다. 각 끝에서 곡선은 control point에 그려진 선과 평행하게 시작하고 모든 점 사이에서 부드럽게 곡선을 그린다.
addArc 메서드는 원의 부분을 그린다. 원의 중신과 반지름을 정하고 start angle 과 end angle, 시계방향을 알려주면 된다.
Fixing performance problems
SwiftUI 는 그래픽과 애니메이션을 CoreGraphics로 렌더링한다.
각각의 view를 필요할 때 그리는데 현재의 Apple 기기의 하드웨어는 여러개의 뷰를 성능저하 없이 처리할 수 있다.
하지만 어느 정도를 넘어서면 시스템에 과적해서 성능 저하를 확인할 수 있다.
만약 발생하면 drawingGroup modifier를 사용할 수 있다.
이 modifier는 SwiftUI 에게 view 내용을 off screen image 로 먼저 바꿔 놓게 해준다.
이 offscreen composition은 Metal 을 사용한다. 그래서 복잡한 화면에 대해 높은 성능을 낸다.
offscreen composition 은 오버헤드를 만들어 간단한 그래픽에서는 오히려 더 느리다
Key points
- shape는 간단한 control 을 그릴 수 있는 방법을 제공한다.
기본적으로 Rectangle, Circle, Ellipse, RoundedRectangle, Capsule 이 있다. - 디폴트로 Shape 에는 foreground color 가 입혀진다.
- Shape는 solid 나 gradient color 로 채울 수 있다.
- Gradient 는 transition으로 linear, radial, angular 이 있다,
- rotationEffect는 shape 를 축에 따라 회전시킨다.
- ZStack 은 공통되는 축에 따라 그래픽을 함친다.
그래픽과 이미지를 섞을 수 있다. - GeometryReader는 container에 맞게 그래픽이 그려질 수 있도록 해준다.
- Paths는 기본 Shape 보다 더 복잡한 커브나 아치가 들어간 drawing 을 그릴때 사용한다.
- 셰이프와 마찬가지로 셰이프를 수정하고 패스를 채울 수 있습니다.
- drawGroup 은 무거운 그래픽 view의 성능을 향상시킬 수 있지만 오히려 단순한 view 에서는 느려진다
