[iOS - SwiftUI] 그라데이션 넣는 방법 (Linear Gradation)

그라데이션 적용된 모습

그라데이션 넣는 방법

• SwiftUI의 LinearGradient를 사용하여 그라데이션 적용
  • LienearGradient는 단어 그대로 선형적인 그라데이션이며, 3가지의 init이 존재

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@frozen public struct LinearGradient : ShapeStyle, View, Sendable {
    public init(gradient: Gradient, startPoint: UnitPoint, endPoint: UnitPoint)
    public init(colors: [Color], startPoint: UnitPoint, endPoint: UnitPoint)
    public init(stops: [Gradient.Stop], startPoint: UnitPoint, endPoint: UnitPoint)
}

• 이 LinearGradient를 만약 아래 사진처럼 상단에 넣고 싶다면 ZStack을 활용 코딩

그라데이션 적용된 모습

ZStack {
    ScrollView {
    }
    
    VStack {
    	LienearGradient()
        Spacer() // Gradient를 상단에 배치하기 위함
    }
}

• LinearGradient의 3가지 init중에 색상이 일정한 비율로 변하는 그라데이션이 필요하므로 LinearGradient(gradient:startPoint:)를 사용
  
  • (초기화 방법에 대해서는 아래에서 계속)

LinearGradient(
  gradient: Gradient(colors: [.gray.opacity(0.2), .clear]),
  startPoint: .top, endPoint: .bottom
)

• 아래처럼 작성하면 구현 완료

struct ContentView: View {
    var array = (1...100).map(String.init)
    
    var body: some View {
        ZStack {
            ScrollView {
                Spacer(minLength: 36)
                
                LazyVStack(alignment: .leading, spacing: 36) {
                    ForEach(array, id: \.self) { item in
                        row(item)
                    }
                    .padding(.horizontal, 20)
                }
                
                Spacer(minLength: 32)
            }
            
            VStack(spacing: 0) {
                Divider()
                    .frame(height: 0.5)
                
                LinearGradient(
                    gradient: Gradient(colors: [.gray.opacity(0.2), .clear]),
                    startPoint: .top, endPoint: .bottom
                )
                .frame(height: 36)
                
                Spacer()
            }
        }
        .navigationTitle("그라데이션 예제")
    }
    
    func row(_ item: String) -> some View {
        HStack {
            Text(item)
                .font(.headline)
        }
    }
}

참고) LienearGradient 초기화 3가지 방법

• LinearGradient(gradient:startPoint:): 색상이 일정한 비율로 변해야 할 때 적합

LinearGradient(
  gradient: Gradient(colors: [.gray.opacity(0.2), .clear]),
  startPoint: .top, endPoint: .bottom
)

• LinearGradient(colors:startPoint:endPoint:): 여러 색상을 넣고 싶은 경우 사용

LinearGradient(
    colors: [.yellow, .green, .blue],
    startPoint: .leading,
    endPoint: .trailing
)

• LinearGradient(stops:startPoint:endPoint:): 특정 위치에 특정 색상을 지정하고 싶을 때 사용

LinearGradient(
    stops: [
        Gradient.Stop(color: .pink, location: 0.0),
        Gradient.Stop(color: .purple, location: 0.5),
        Gradient.Stop(color: .black, location: 1.0)
    ],
    startPoint: .topLeading,
    endPoint: .bottomTrailing
)