SwiftUI / Shape

-학습내용-

주제: Shape

• SwiftUI에서 기본적으로 사용하는 도형에 대한 학습
• path를 활용하여 커스텀 도형 만들기
• Gradient를 사용하여 그라데이션 색상 입히기

---

CodeReview

SwiftUI Basic Shape
SwiftUI에서 기본적으로 사용할 수 있는 도형의 코드는 아래와 같다.
1. Rectangle(사각형)
2. Circle(원)
3. Ellipse(타원)
4. RoundedRectangle(모서리가 둥근 사각형)
5. Capsule(양 끝이 둥근 캡슐형)
위의 도형들은 모두 frame(width:, height:)코드로 사이즈를 조정할 수 있고, foregroundStyle코드로 색상이나 스타일 등을 지정해줄 수 있다.

기본 도형 선언	결과 화면

---

1. path로 삼각형 만들기

Path는 View타입으로, 위치 값을 가진 선, 곡선 및 기타 정보를 가진 목록이다.
Shape가 상대 경로를 받아 도형을 그리는 것과 달리 절대경로 안에서 좌표값에 맞추어 도형을 그린다.

// Path의 사용방법
struct PathView: View {
	var body: some View {
    	Path { path in
        	// 도형을 작성할 코드
 		}
 	}
}

삼각형을 작성하기 위해 우선 기준이 되는 x의 좌표를 지정해준다.

// Path의 사용방법
struct PathView: View {
	var body: some View {
    	Path { path in
        	// 커서의 시작점 설정
        	path.move(to: CGPoint(x: 200, y: 0))
 		}
 	}
}

그 뒤 삼각형을 그리기 위해 addLine코드로 좌표값을 지정해준다.

// Path의 사용방법
struct PathView: View {
	var body: some View {
    	Path { path in
        	path.move(to: CGPoint(x: 200, y: 0))
            // 라인이 커서 위치에서 시작하여 어디서 끝나는지 좌표 지정
            path.addLine(to: CGPoint(x: 200, y: 200))
            path.addLine(to: CGPoint(x: 0, y: 200))
            // 위의 코드처럼 시작점을 직접 이어줘도 되지만, path.closeSubpath() 코드로 자동으로 잇는 방법도 있다.
 		}
 	}
}

위의 코드를 작성한 실행결과는 아래와 같다.

결과값	선이 그려지는 과정

---

2. Path를 활용한 곡선 그리기

곡선을 그리기 위해 우선 Shape타입을 준수하는 구조체를 선언한다.

import SwiftUI

struct Raindrop: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            // 곡선을 그릴 코드
        }
    }
}

곡선을 그리는 방법은 삼각형 때와 크게 다르지 않지만, 직선이 아닌 곡선을 만들기 위해 addQuadCurve메소드를 활용한다.
이 기능은 Path에 곡선을 추가하는 기능으로, 시작점과 끝점을 지정하고 커브의 기준점을 설정하여 곡선을 그린다.

import SwiftUI

struct Raindrop: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            // rect를 활용하여 좌표 지정
            path.move(to: CGPoint(x: rect.size.width / 2, y: 0))
            // addQuadCurve 메소드로 곡선을 작성
            path.addQuadCurve(to: CGPoint(x: rect.size.width / 2, y: rect.size.height), control: CGPoint(x: rect.size.width, y: rect.size.height))
            path.addQuadCurve(to: CGPoint(x: rect.size.width / 2, y: 0), control: CGPoint(x: 0, y: rect.size.height))
        }
    }
}

완성된 곡선:

---

3. Gradient를 사용하여 색 바꾸기

Gradient의 기본 형태

SwiftUI에서는 배경색을 그라데이션을 이용하여 지정해줄 수 있다.
1. LinearGradient(선형 그라데이션)

LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .topLeading, endPoint: .bottom)

2. RadialGradient(원형 그라데이션)

RadialGradient(gradient: Gradient(colors: [Color.red, Color.blue]), center: .center, startRadius: 20, endRadius: 200)

3. AngularGradient(각도 그라데이션)

AngularGradient(gradient: Gradient(colors: [Color.red, Color.orange, Color.yellow, Color.green...]), center: .center)
// AngularGradient는 angle값을 적용할 수도 있다.
AngularGradient(gradient: Gradient(colors: [Color.red, Color.blue]), center: .center, angle: .degrees(90))

LinearGradient	RadialGradient	AngularGradient	AngularGradient(angle적용)

---

4. foregroundStyle, Gradient

Shape타입인 도형에 foregroundStyle과 Gradient를 활용하여 그라데이션 색상을 넣을 수 있다.

import SwiftUI

struct ContentView: View {
    var body: some View {
    	// foregroundStyle을 이용한 다양한 컬러 적용
        VStack {
            Rectangle().frame(width: 50, height: 50)
                .foregroundStyle(Color.yellow)
            
            Circle().frame(width: 50, height: 50)
                .foregroundStyle(AngularGradient(gradient: Gradient(colors: [Color.pink, Color.blue]), center: .center, angle: .degrees(90)))
            
            Ellipse().frame(width: 70, height: 50)
            	.foregroundStyle(RadialGradient(gradient: Gradient(colors: [Color.green, Color.purple]), center: .center, startRadius: 5, endRadius: 20))
            
            RoundedRectangle(cornerRadius: 10).frame(width: 50, height: 50)
                .foregroundStyle(LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .topLeading, endPoint: .bottom))
            
            Capsule().frame(width: 80, height: 50)
                .foregroundStyle(AngularGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .red]), center: .center))
		}
        .padding(50)
    }
}

색 적용 결과:

---

-오늘의 학습 후기-

오늘은 SwiftUI에서 기본 도형과 커스텀 도형을 만드는 방법을 배우고, 그라데이션 색상을 적용하는 방법에 대해 학습했다.
지금까지 커스텀도형을 만들어본 적이 없었는데, 이번 기회를 통해 어떻게 만드는지 배울 수 있어 좋았고, 여러 색상을 입혀보며 재미를 느꼈다.
커스텀도형에 대해 추후 어떻게 이용하게 될지 모르지만 잊지 않도록 잘 기억해둬야겠다고 생각했다.