[SwiftUI] 전경색 그라디언트로 설정하기

@inlinable public func foregroundStyle<S>(_ style: S) -> some View where S : ShapeStyle

foregroundStyle을 사용해서 Color, ShapeStyle을 지정할 수 있음

@frozen public struct LinearGradient : ShapeStyle, View

LinearGradient는 ShapeStyle로서 그래디언트의 방향과 색상을 지정할 수 있다.

 

ex)

.foregroundStyle(
	LinearGradient(colors: [.pink, .purple, .blue],
    		startPoint: .topLeading,
    		endPoint: .bottomTrailing)
)

colors에는 색상을 지정해 주면 되며 인덱스 0번째 부터 startPoint에서 지정한 위치의 색상이 됨. 마찬가지로 마지막에 위치한 Color의 값은 endPoint에 지정한 위치에 지정됨

startPoint는 UnitPoint. 그라디언트가 시작되는 위치로 center, leading, trailing, top, bottom, topLeading, bottomLeading, bottomTrailing을 지정할 수 있음. 

endPoint 또한 startPoint와 마찬가지로 UnitPoint로서 그라디언트가 끝나는 위치를 지정할 수 있음

만약 endPoint를 .leading으로 startPoint를 .trailing으로 지정하는 경우 가장 먼저 지정한 색상이 오른쪽에, 가장 마지막에 지정한 색상이 왼쪽에 위치함

 

            Text("그라데이션 글자")
                .font(.system(size: 50))
                .fontWeight(.black)
                .foregroundStyle(
                    LinearGradient(colors: [.pink, .purple, .blue],
                                   startPoint: .topLeading,
                                   endPoint: .bottomTrailing)
                )
            Circle()
                .foregroundStyle(
                    LinearGradient(colors: [.pink, .purple, .blue],
                                   startPoint: .trailing,
                                   endPoint: .leading)
                )

결과

 

Asset에 Color set을 추가 한 뒤 아래 코드 처럼 사용하는 경우 타입은 옵셔널입 (Color?)

Color("CustomColorName")

foregroundStyle은 옵셔널 Color 값을 사용할 수 있으나 foregroundColor 에서는 불가. 그럴 땐 fill을 사용하면 됩니다. 

 

            Circle()
                .fill(
                    LinearGradient(
                        colors: [Color("CustomColorName1"),
                                Color("CustomColorName2")],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing)
                )

 

fill

• Rectangle, Circle, Path와 같은 Shape 프로토콜을 따르는 구조체에서 사용

Circle()
    .fill(.blue)

 

foregroundColor

• 주로 Text, Shape와 같은 도형, View의 전경색을 지정하는데 사용됨

Circle()
    .frame(width: 100, height: 100)
    .foregroundColor(.green)

Text("Hello, World")
    .foregroundColor(.blue)

 

foregroundStyle

• iOS 15, SwiftUI 3.0에서 추가된 modifier
• LinearGradient, RadialGradient, AngularGradient 와 같은 스타일 객체와 함께 사용됨

        Circle()
            .frame(width: 200, height: 200)
            .fill(AngularGradient(gradient: Gradient(colors: [Color.red, Color.yellow, Color.green, Color.blue, Color.purple, Color.red]), center: .center))

Pexels에서 Vlad Kovriga님의 사진: https://www.pexels.com/ko-kr/photo/339119/