SwiftUI 그라데이션 텍스트 구현하기

 

💫 공통으로 사용할 변수

private let sampleText = "🍎 iOS 연구소\n It's Gradient Text View :)"
private let commonGradient = LinearGradient(colors: [.red, .blue, .green, .yellow], startPoint: .leading, endPoint: .trailing)

공통으로 사용할 텍스트와 Gradient뷰를 변수로 할당해 놓았다.

 

🌈 방법 1) Gradient에 Text를 mask해서 보여주기

private var gradientTextView1: some View {
    commonGradient
        .mask(
            Text(sampleText)
                .font(.title)
                .multilineTextAlignment(.center)
        )
}

GradientView에 해당하는 Text를 마스킹하여 보여주는 방법

 

🌈 방법 2) Text에 Gradient한 Text를 다시 overlay해서 보여주기

private var gradientTextView2: some View {
    Text(sampleText)
        .font(.title)
        .multilineTextAlignment(.center)
        .overlay(
            commonGradient
                .mask(
                    Text(sampleText)
                        .font(.title)
                        .multilineTextAlignment(.center)
                )
        )
}

Text에 방법1을 오버레이하여 보여주는 방법

이 방법의 장점은 View에 확장해서 쉽게 사용할 수 있다!!

extension View {
    public func foregroundLinearGradient(
        colors: [Color],
        startPoint: UnitPoint,
        endPoint: UnitPoint) -> some View
    {
        self.overlay(
            LinearGradient(
                colors: colors,
                startPoint: startPoint,
                endPoint: endPoint
            )
            .mask(
                self
            )
        )
    }
}

private var gradientTextView3: some View {
    Text(sampleText)
        .font(.title)
        .multilineTextAlignment(.center)
        .foregroundLinearGradient(
            colors: [.red, .blue, .green, .yellow],
            startPoint: .leading,
            endPoint: .trailing
        )
}

 

🌈 방법 3) iOS 15 이상 버전에서 제공하는 foregroundStyle 사용하기

@available(iOS 15.0, *)
private var gradientTextView4: some View {
    Text(sampleText)
        .font(.title)
        .multilineTextAlignment(.center)
        .foregroundStyle(commonGradient)
}

iOS 15 이상에서 .foregroundStyle()이 있는데 이를 이용하면 쉽게 구현할 수 있다.

방법1, 방법2에서는 이모지도 그라데이션이 적용되었는데 이 방법은 이모지의 컬러를 그대로 유지한다.

 

🔥 전체코드

import SwiftUI

struct GradientTextView: View {
    private let sampleText = "🍎 iOS 연구소\n It's Gradient Text View :)"
    private let commonGradient = LinearGradient(colors: [.red, .blue, .green, .yellow], startPoint: .leading, endPoint: .trailing)
    
    var body: some View {
        VStack {
            gradientTextView1 // Gradient에 Text를 mask해서 보여주기
            
            gradientTextView2 // Text에 Gradient한 Text를 다시 overlay해서 보여주기
            
            gradientTextView3 // 위 방법을 extension에서 구현하기
        
            if #available(iOS 15.0, *) {
                gradientTextView4 // iOS 15 이상 버전에서 제공하는 foregroundStyle 사용하기
            } else {}
        }
    }
    
    private var gradientTextView1: some View {
        commonGradient
            .mask(
                Text(sampleText)
                    .font(.title)
                    .multilineTextAlignment(.center)
            )
    }
    
    private var gradientTextView2: some View {
        Text(sampleText)
            .font(.title)
            .multilineTextAlignment(.center)
            .overlay(
                commonGradient
                    .mask(
                        Text(sampleText)
                            .font(.title)
                            .multilineTextAlignment(.center)
                    )
            )
    }
    
    private var gradientTextView3: some View {
        Text(sampleText)
            .font(.title)
            .multilineTextAlignment(.center)
            .foregroundLinearGradient(
                colors: [.red, .blue, .green, .yellow],
                startPoint: .leading,
                endPoint: .trailing
            )
    }
    
    @available(iOS 15.0, *)
    private var gradientTextView4: some View {
        Text(sampleText)
            .font(.title)
            .multilineTextAlignment(.center)
            .foregroundStyle(commonGradient)
    }
}