[SwiftUI] Drawing Paths and Shapes

원문: 튜토리얼 페이지

Drawing Paths and Shapes

combining path와 shapes를 가지고 만들어보는 badge. 근데 보통 아이콘을… 디자이너분께 받아서 쓰지 않나요…? 아닌가

Create Drawing Data for a Badge View

우선은 육각형의 배지를 만들어보자. 튜토리얼 페이지에 나온 이미지는 다음과 같다.

• HexagonParameters.swift 생성 (Swift file)
  • 육각형 모양을 정의할 수 있는 structure 관리를 위해 HexagonParameters.swift 파일을 생성한다.
• HexagonParameters 구조체 내부에 육각형 badge 모양을 위해 필요한 코드를 추가한다.

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)
        )
    ]
}

CGPoint는 Foundation에 포함되지 않기 때문에 CoreGraphics를 추가해준다.

Draw the Badge Background

SwiftUI의 graphics API를 사용해 custom badge 모양을 그려본다.

• BadgeBackground.swift 생성 (SwiftUI View)
• body에서 haxagonParameters의 Path 값을 추력…. 하지만 이해할 수 없었다…

struct BadgeBackground: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                var width: CGFloat = min(geometry.size.width, geometry.size.height)
                let height = width
                let xScale: CGFloat = 0.832
                let xOffset = (width * (1.0 - xScale)) / 2.0
                width *= xScale
                path.move(
                    to: CGPoint(
                        x: width * 0.95 + xOffset,
                        y: height * (0.20 + HexagonParameters.adjustment)
                    )
                )
                
                HexagonParameters.segments.forEach { segment in
                    path.addLine(
                        to: CGPoint(
                            x: width * segment.line.x + xOffset,
                            y: height * segment.line.y
                        )
                    )
                    
                    path.addQuadCurve(
                        to: CGPoint(
                            x: width * segment.curve.x + xOffset,
                            y: height * segment.curve.y
                        ),
                        control: CGPoint(
                            x: width * segment.control.x + xOffset,
                            y: height * segment.control.y
                        )
                    )
                }
            }
            .fill(.linearGradient(
                Gradient(colors: [Self.gradientStart, Self.gradientEnd]),
                startPoint: UnitPoint(x: 0.5, y: 0),
                endPoint: UnitPoint(x: 0.5, y: 0.6)
            ))
        }
        .aspectRatio(1, contentMode: .fit)
    }
    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)
}

Draw the Badge Symbol

튜토리얼 페이지의 프로젝트 파일에서 AppIcon을 가져왔다. 이제 이걸로 badge symbol을 만든다.

• BadgeSymbol 파일 생성 (SwiftUI View)

• RotatedBadgeSymbol 파일 생성 (SwiftUI View)

Combine the Badge Foreground and Background

• Badge 파일 생성 (SwiftUI View)

RotatedSymbol을 8개 돌려서 마크를 만들고, badgeBackground 위에 얹을 수 있도록 ZStack으로 겹치기

마무리

사실 이 챕터는 다음 장을 위해 대충 정리하는 것… 하지만 이해는 하고 싶은데 언제쯤 될까..? 숫자만 나오면 머리에 쥐가 난다.. 😭