SwiftUI Gradient

Gradient

SwiftUI의 구조체 중 하나로 그라데이션을 적용할 때 사용한다. 파라미터는 colors라는 배열 파라미터가 존재하고 해당 배열안에 원하는 색상을 넣으면 적용이된다.

 

Init

Gradient(colors: [.red, .blue])

이렇게 하면 색상이 빨간색과 파란색으로 된 그라데이션을 만들 수 있다.

 

---

LenearGradient

LenearGradient는 시작점과 끝점으로 축에 따라 색상 함수를 적용하는 그라데이션을 제공한다.

 

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.red, .white]), startPoint: .top, endPoint: .bottom)
        }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

빨간색과 흰색의 조합으로 SafeArea에 색상을 그라데이션으로 표현하였다.

 

 

—Props

—gradient(Gradient) : 그라데이션의 색상을 Gradient 구조체로 선언을 한다.

—startPoint(UnitPoint) : 시작 지점을 정하는 공간이다. .top, .bottom, .leading, .trailing 등 레이아웃을 할 떄 쓰는 언어로 시작지점을 정할 수 있다.

—endPoing(UnitPoint) : 끝 지점을 정하는 공간이다. startPoint와 같은 UnitPoint을 사용한다.

 

---

RadialGradient

RadialGradient는 중심점을 지정하여 시작점으로 정하고 끝 반경까지 그라데이션을 적용하는 것이다. LenearGradient는 직선으로 그라데이션이 적용되면 RadialGradient는 원 모양으로 그라데이션이 적용된다.

 

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        RadialGradient(gradient: Gradient(colors: [.orange, .white]), center: .center, startRadius: 1, endRadius: 200)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

정중앙에서 radius가 1인 부분에서 시작되어 200에서 끝나는 오렌지색과 흰색으로 조합된 그라데이션을 적용하였다.

 

 

—Props

→ gradient(Gradient) : Gradient구조체를 선언하는 공간이다.

→ center(UnitPoint) : 중심점을 선언하는 공간으로 UnitPoint 타입으로 선언한다.

→ startRadius(CGFloat) : 그라데이션이 시작하는 반지름의 길이를 CGFloat로 선언한다.

→ endRadius(CGFloat) : 그라데이션이 끝나는 반지름의 길이를 CGFloat로 선언한다.

 

---

AngularGradient

AngularGradient는 중심점으로 시작되서 시작 각도와 끝 각도를 기준으로 각도가 변경될 때 마다 그라데이션을 적용하는 Gradient이다. 잘 사용하지 않는 그라데이션이다.

 

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        AngularGradient(
            gradient: Gradient(
                colors: [
                    .orange, .white, .orange, .white
                ]),
            center: .center,
            angle: .zero)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

중심점에서 각도가 변경될 때마다 색상이 변경되는 AngularGradient이다.

 

 

—Props

— gradient(Gradient) : 그라데이션 색상을 Gradient 구조체로 선언하는 파라미터이다.

— center(UnitPoint) : 그라데이션의 시작지점을 UnitPoint 자료형으로 선언하는 파라미터이다.

— angle(Angle) : 그라데이션의 색상이 변경되는 각도를 선언하는 파라미터이다. Angle 구조체로 선언하고 default 값은 .zero이다. default 값을 사용하는 경우 생략가능하다.

 

---

Gradient 활용하기

 

Text Gradient

import SwiftUI

struct ContentView: View {
    var body: some View {
        LinearGradient(
            gradient:
                Gradient(
                    colors: [.blue, .green, .yellow, . orange, .red]
                ),
            startPoint: .leading,
            endPoint: .trailing
        )
        .mask(Text("안녕하세요 Daesiker입니다 :)").font(.largeTitle))
        .background(Color.black)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

마스크 옵션을 사용해서 LinearGradient가 Text 컴포넌트만 보이게 적용한 것이다. mask는 기본 뷰 위에 프레임을 덮어서 안보이게 하게 도와주는 속성이다. mask안에 있는 Text 컴포넌트를 제외하고 나머지 공간은 불투명한 View로 덮혀있다고 생각하면된다. 그리고 배경화면은 검정색으로 지정을 하였다.

 

 

Button Gradient

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Gradient") {}
            .frame(width: 300, height: 80, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
            .padding()
            .background(
                LinearGradient(
                    gradient:
                        Gradient(colors: [.blue, .pink]),
                    startPoint: .leading,
                    endPoint: .trailing
                        
            ))
            .foregroundColor(.white)
            .font(.system(size: 50))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Button 컴포넌트의 background 속성에 LinearGradient를 넣어서 배경이 파란색과 분홍색의 그라데이션이 들어간 배경으로 변경해준다.

 

 

Uploaded by Notion2Tistory v1.1.0