SwiftUI) Drawing and Animation 1 - Drawing Paths and Shapes

드디어 새로운 챕터 입니다 !

Drawing Paths and Shapes | Apple Developer Documentation

드로잉 & 애니메이션 챕터의 첫번째 내용은

Drawing Path And Shapes 인데요 !

 

갑자기 왜 드로잉이냐 ? 저번까지 만들었던 랜드마크 앱에 뱃지를 추가할 예정인 것 같습니다 ^^.

 

위의 내용을 번역해보면,

사용자들이 자신의 목록에 있는 랜드마크를 방문할 때마다 뱃지를 받는다고 합니다.

사용자가 뱃지를 받으려면 뱃지를 만들어야겠죠 ? 

 

Path와 Shape를 결합해서 뱃지를 만들고, 그 위에 위치를 나타대는 다른 Shape을 겹쳐놓는 과정을 안내합니다.

다양한 종류의 랜드마크를 위해 여러 개의 뱃지를 만들고, 반복의 양을 다르게 하거나 각도랑 크기를 변경해 보세요.

라고 하네요 ! 바로 시작해보겠습니다. 뱃지 그리러 고고싱.

 

 

1. 뱃지 뷰를 위한 드로잉 Data 생성하기

뱃지를 만들기 위해서, 뱃지의 배경을 구성할 수 있는 육각형 모양을 그리기 위해 사용할 데이터를 정의해야합니다.

 

 

1. HexagonParameters라는 새로운 파일을 만들고 구조체를 선언해주세요.

2. 그 안에 육각형의 한 변을 나타내는 3개의 Point들을 저장하기 위해 Segment 구조체를 정의합니다 

- CGPoint를 사용하기 위해 CoreGrapiccs를 import.

3. 새로운 배열을 추가하고, 육각형의 각 변마다 하나씩 6개의 세그먼트 데이터를 추가합니다.

- 값들은 왼쪽 상단을 원점으로 하는 단위 사각혀의 비율로 저장.

- x축이 오른쪽 방향으로, y축이 아래쪽 방향으로 양수.

- 나중에는 이러한 비율을 사용하여 지정된 크기의 육각혀의 실제 좌표를 찾는다.

4. 육각형의 모양을 조절할 수 있는 값을 추가합니다.

 

import CoreGraphics

struct HexagonParameters {
    struct Segment {
        let line: CGPoint
        let curve: CGPoint
        let control: CGPoint
    }

    static let adjustment: CGFloat = 0.085

    static let segments = [
        Segment(
            line:    CGPoint(x: 0.60, y: 0.05),
            curve:   CGPoint(x: 0.40, y: 0.05),
            control: CGPoint(x: 0.50, y: 0.00)
        ),
        Segment(
            line:    CGPoint(x: 0.05, y: 0.20 + adjustment),
            curve:   CGPoint(x: 0.00, y: 0.30 + adjustment),
            control: CGPoint(x: 0.00, y: 0.25 + adjustment)
        ),
        Segment(
            line:    CGPoint(x: 0.00, y: 0.70 - adjustment),
            curve:   CGPoint(x: 0.05, y: 0.80 - adjustment),
            control: CGPoint(x: 0.00, y: 0.75 - adjustment)
        ),
        Segment(
            line:    CGPoint(x: 0.40, y: 0.95),
            curve:   CGPoint(x: 0.60, y: 0.95),
            control: CGPoint(x: 0.50, y: 1.00)
        ),
        Segment(
            line:    CGPoint(x: 0.95, y: 0.80 - adjustment),
            curve:   CGPoint(x: 1.00, y: 0.70 - adjustment),
            control: CGPoint(x: 1.00, y: 0.75 - adjustment)
        ),
        Segment(
            line:    CGPoint(x: 1.00, y: 0.30 + adjustment),
            curve:   CGPoint(x: 0.95, y: 0.20 + adjustment),
            control: CGPoint(x: 1.00, y: 0.25 + adjustment)
        )
    ]
}

 

2. 뱃지의 배경 그리기

SwiftUI의 그래픽 API를 사용하여 커스텀 뱃지 모양을 그립니다.

 

1. BadgeBackground라는 뷰를 하나 추가해줍니다.

2. Path 모양을 뱃지에 추가하고, fill() 수정자를 적용하여 모양을 뷰로 변환합니다.

- Path를 사용하여 선, 곡선 및 기타 그리기 기본 요소를 결합하여 뱃지의 육각형 배경과 같이 복잡한 모양을 형성합니다.

 

3. Path에 시작점을 추가합니다. 이 때, 크기가 100 x 100 픽셀인 컨테이너를 가정합니다.

- move(to:) 메서드는 상상 속의 펜이나 연필이 해당 영역 위를 맴돌며 그리기를 시작하기를 기다리는 것처럼 모양 내부에서 그리기 커서를 이동시킵니다.

struct BadgeBackground: View {
    var body: some View {
        Path { path in
            var width: CGFloat = 100.0
            let height = width
            path.move(
                to: CGPoint(
                    x: width * 0.95,
                    y: height * 0.20
                )
            )
        }
        .fill(.black)
    }
}

 

4. 모양 데이터의 각 점에 대한 선을 그려서 대략적인 육각형 모양을 만듭니다.

- addLine(to:) 메서드는 하나의 점을 가져와서 그립니다. addLine(to:)의 연속 호출은 이전 점에서 선을 시작하여 새 점까지 이어집니다.

 

HexagonParameters.segments.forEach { segment in
	path.addLine(
		to: CGPoint(
			x: width * segment.line.x,
			y: height * segment.line.y
		)
	)
}

육각형이 약간 이상하게 보인다면 걱정하지 마세요.

모양의 모서리에 있는 곡선 부분을 무시하기 때문입니다. 이 부분은 다음에 계산할 것입니다.

 

 

5. addQuadCurve(to:control:) 메서드를 사용하여 뱃지의 모서리에 대한 베지어 곡선을 그립니다.

- addLine 아래에 넣어줌.

                path.addQuadCurve(
                    to: CGPoint(
                        x: width * segment.curve.x,
                        y: height * segment.curve.y
                    ),
                    control: CGPoint(
                        x: width * segment.control.x,
                        y: height * segment.control.y
                    )
                )

6. GeometryReader로 Path를 감싸면, containing view의 크기를 사용할 수 있습니다.

- 이렇게 하면 값을 하드코딩하는 대신 컨테이너의 크기를 정의할 수 있습니다.

- width와 height 중 더 작은 값을 사용하면, 컨테이너 뷰가 정사각형이 아니더라도 aspect ratio?를 보존?할 수 있습니다.

GeometryReader { geometry in
	Path {
	...
    var width: CGFloat = min(geometry.size.width, geometry.size.height)
}

- Path를 GeometryReader로 감싸고 내부의 width 값을 설정해줬습니다.

 

7. xScale을 사용하여 x-축을 따라 모양의 크기를 조정한 다음 xOffset을 추가하여 모양을 해당 geometry 안에서 다시 중앙에 배치합니다.

let xScale: CGFloat = 0.832
let xOffset = (width * (1.0 - xScale)) / 2.0
width *= xScale

- 이 코드를 추가해주고, x 좌표 값에 모두 + xOffset을 해줬다.

 

8. 디자인에 맞는 그라데이션으로 단색 검정 배경을 대체합니다.

    static let gradientStart = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)
    static let gradientEnd = Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)

.fill(.linearGradient(
	Gradient(colors: [Self.gradientStart, Self.gradientEnd]),
	startPoint: UnitPoint(x: 0.5, y: 0),
	endPoint: UnitPoint(x: 0.5, y: 0.6)
))

9. gradient 채우기에 aspectRatio(_:contentMode:) 수정자를 적용합니다.

1:1 aspect ratio를 보존하면, 뷰의 부모 뷰가 정사각형이 아닌 경우에도 배지가 뷰 중앙에 위치를 유지할 수 있습니다.

.aspectRatio(1, contentMode: .fit)

 

 

3. 뱃지의 심볼 그리기

Landmarks 배지에는 Landmarks 앱 아이콘에 나타나는 산을 기반으로 한 커스텀 아이콘이 있습니다.

산 기호는 꼭대기의 눈덮인 부분을 나타내는 하나의 모양과, 다가오는 길 가장자리의 식물을 나타내는 다른 모양으로 구성됩니다.

이들을 작은 간격으로 분리된 두 부분적으로 삼각형 모양으로 그려냅니다.

 

 

1. 프로젝트의 에셋 카탈로그에서 빈 AppIcon 항목을 삭제한 다음, 다운로드한 프로젝트의 Resources 폴더에서 AppIcon.appiconset 폴더를 드래그합니다.

 

2. BadgeSymbol이라는 새로운 뷰를 만드세요. 이 뷰는 배지 디자인에서 회전 패턴으로 찍히는 산 모양을 나타냅니다.

 

3. 심볼의 상단부분 그리기 - Path API 사용.

- 추가적으로, spacing, topWidth 및 topHeight 상수와 관련된 숫자의 곱을 조정하여 전반적인 모양이 어떻게 변화하는지 확인해보는 실험을 제안합니다.

 

4. 하단부분 그리기 

- 동일한 경로 내에서 여러 개의 모양을 구분하기 위해 move(to:) 수정자를 사용하여 간격을 삽입합니다.

 

5. 심볼 컬러 채워주기

 

   static let symbolColor = Color(red: 79.0 / 255, green: 79.0 / 255, blue: 191.0 / 255)
   
   var body: some View {
        GeometryReader { geometry in
            Path { path in
                let width = min(geometry.size.width, geometry.size.height)
                let height = width * 0.75
                let spacing = width * 0.030
                let middle = width * 0.5
                let topWidth = width * 0.226
                let topHeight = height * 0.488

                path.addLines([
                    CGPoint(x: middle, y: spacing),
                    CGPoint(x: middle - topWidth, y: topHeight - spacing),
                    CGPoint(x: middle, y: topHeight / 2 + spacing),
                    CGPoint(x: middle + topWidth, y: topHeight - spacing),
                    CGPoint(x: middle, y: spacing)
                ])

                path.move(to: CGPoint(x: middle, y: topHeight / 2 + spacing * 3))
                path.addLines([
                    CGPoint(x: middle - topWidth, y: topHeight + spacing),
                    CGPoint(x: spacing, y: height - spacing),
                    CGPoint(x: width - spacing, y: height - spacing),
                    CGPoint(x: middle + topWidth, y: topHeight + spacing),
                    CGPoint(x: middle, y: topHeight / 2 + spacing * 3)
                ])
            }
            .fill(Self.symbolColor)
        }
    }

 

6. 다음으로, 회전된 심볼을 캡슐화하기 위해 새로운 RotatedBadgeSymbol 뷰를 생성합니다.

- 미리보기에서 각도를 조정하여 회전 효과를 테스트합니다.

struct RotatedBadgeSymbol: View {
    let angle: Angle

    var body: some View {
        BadgeSymbol()
            .padding(-60)
            .rotationEffect(angle, anchor: .bottom)
    }
}

struct RotatedBadgeSymbol_Previews: PreviewProvider {
    static var previews: some View {
        RotatedBadgeSymbol(angle: Angle(degrees: 5))
    }
}

결과는 요렇게 됩니다 !

 

 

4. 뱃지의 전면과 배경을 결합하기

이 배지 디자인에서는 산 모양이 회전되어 배지 배경 위에 여러 번 반복되도록 설계되었습니다.

회전을 위한 새로운 타입을 정의하고 ForEach 뷰를 활용하여 산 모양의 여러 복사본에 동일한 조정(adjustments)을 적용합니다.

 

1. Badge라는 이름의 새로운 뷰를 만들어줍니다.

2. Badge뷰의 body에 BadgeBackground 를 배치해줍니다.

3. 배지의 심볼을 배지 배경 위에 ZStack에 놓아 배치하세요.

struct Badge: View {
    var badgeSymbols: some View {
        RotatedBadgeSymbol(angle: Angle(degrees: 0))
            .opacity(0.5)
    }

    var body: some View {
        ZStack {
            BadgeBackground()

            badgeSymbols
        }
    }
}

4. 주변의 기하학적인 요소를 읽고 심볼의 크기를 조정하여 배지 심볼의 크기를 수정하세요.

struct Badge: View {
    var badgeSymbols: some View {
        RotatedBadgeSymbol(angle: Angle(degrees: 0))
            .opacity(0.5)
    }

    var body: some View {
        ZStack {
            BadgeBackground()

            GeometryReader { geometry in
                badgeSymbols
                    .scaleEffect(1.0 / 4.0, anchor: .top)
                    .position(x: geometry.size.width / 2.0, y: (3.0 / 4.0) * geometry.size.height)
            }
        }
    }
}

 

5. 배지 심볼의 복사본을 회전하여 표시하기 위해 ForEach 뷰를 추가하세요.
- 360도의 완전한 회전을 8개 세그먼트로 분할하여 산 모양 심볼을 반복함으로써 태양과 같은 패턴을 만듭니다.

struct Badge: View {
    var badgeSymbols: some View {
        ForEach(0..<8) { index in
            RotatedBadgeSymbol(
                angle: .degrees(Double(index) / Double(8)) * 360.0
            )
        }
        .opacity(0.5)
    }

    var body: some View {
        ZStack {
            BadgeBackground()

            GeometryReader { geometry in
                badgeSymbols
                    .scaleEffect(1.0 / 4.0, anchor: .top)
                    .position(x: geometry.size.width / 2.0, y: (3.0 / 4.0) * geometry.size.height)
            }
        }
        .scaledToFit()
    }
}

최종 결과물은 이렇게 됩니다.

 

후기

 

사실 이번 튜토리얼은 그냥 따라해보는 재미였던 것 같아요 !! 마치 디자이너가 된 기분이랄까.. 

실제로 저런 태양모양을 직접 만드는 경우도 없을 것 같고.. (?) 혹시몰라..? 

숫자나 계산이 많이 나오고 좀 귀찮긴 하네요...ㅎ

그래도 포스팅 해두고 혹시 나중에 필요한 요소들이 떠오른다면 언젠간 다시 찾을 수도 있겠죠..?

Containing View의 크기를 활용할 수 있는 GeometryReader에 대한 내용은 유용했던 것 같아요.

Drawing에 대한 modifier나 다양한 요소들을 알고 있으면 나중에 커스텀한 뷰를 만들 때도 도움이 될 것 같긴하네요 !