Intro

shadow modifier를 사용하여 Shape나 View에 그림자 효과를 줄 수 있다.
이번 그림자 주기(1) - Shape에 그림자 주기 에서는 Rectangle Shape에 그림자를 주는 예시들을 보여주려고 한다.
다음글인 그림자 주기(2) - Text View에 그림자 주기 에서는 Text View에 그림자를 주는 예시들을 다루어보겠다.

.shadow modifier

shadow modifier는 view 객체에서 사용할 수 있는 instance method 이다. 정의는 다음과 같다:

func shadow(
	color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33),
    radius: CGFloat,
    x: CGFloat = 0,
    y: CGFloat = 0
) -> some View

Return value는 view 이다.
Pramater는 다음과 같다:

• color: 그림자의 색
• radius: 그림자를 얼마만큼 blur 할지
• x: horizontal offset
• y: vertical offset

우선은 예시로 사용할 project를 만들어보자:

//
//  ContentView.swift
//  shadow-examples
//
//  Created by woo94 on 2023/01/25.
//

import SwiftUI

struct RectView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView: View {
    var body: some View {
        RectView()
    }
}

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

우선 ContentView에서 RectView에 shadow modifier를 줘보자:

//
//  ContentView.swift
//  shadow-examples
//
//  Created by woo94 on 2023/01/25.
//

import SwiftUI

struct RectView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView: View {
    var body: some View {
        RectView()
            .shadow(radius: 10)
    }
}

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

이전에 없던 그림자가 생겼다.

이번에는 parameter 값들을 줘가면서 결과를 확인해보자:

color

//
//  ContentView.swift
//  shadow-examples
//
//  Created by woo94 on 2023/01/25.
//

import SwiftUI

struct RectView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("color")
                .font(.title).bold()
            
            RectView()
                .shadow(radius: 10)
            
            RectView()
                .shadow(color: .blue, radius: 10)
        }
    }
}

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

radius

//
//  ContentView.swift
//  shadow-examples
//
//  Created by woo94 on 2023/01/25.
//

import SwiftUI

struct RectView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView: View {
    var body: some View {
        HStack(spacing: 30) {
            VStack(spacing: 30) {
                Text("color")
                    .font(.title).bold()
                
                RectView()
                    .shadow(radius: 10)
                
                RectView()
                    .shadow(color: .blue, radius: 10)
            }
            
            VStack(spacing: 30) {
                Text("radius")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .green, radius: 10)
                
                RectView()
                    .shadow(color: .green, radius: 30)
            }
        }
    }
}

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

x, y

여기에서는 다양한 사례들을 봐야 하므로 위에까지 작성한 코드는 모두 지워주겠다.

//
//  ContentView.swift
//  shadow-examples
//
//  Created by woo94 on 2023/01/25.
//

import SwiftUI

struct RectView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView: View {
    var body: some View {
        HStack(spacing: 30) {
            VStack(spacing: 30) {
                Text("x: 5")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: 5)
                
                Text("x: 10")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: 10)
            }
            
            VStack(spacing: 30) {
                Text("x: 50")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: 50)
                
                Text("x: 100")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: 100)
            }
        }
    }
}

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

x의 값을 극단적으로 50, 100까지 올렸을 때, shadow의 정체를 파악할 수 있었다. 이들은 view의 뒤에 존재하는 blurred view 이다. 이것의 크기는 view의 크기(100) + shadow modifier에서 준 radius(10) 만큼이다. width: 110, height: 110 이라고 볼 수 있다.

이번에는 y와 음수값을 섞어가면서 같이 사용해보겠다.

//
//  ContentView.swift
//  shadow-examples
//
//  Created by woo94 on 2023/01/25.
//

import SwiftUI

struct RectView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
            .frame(width: 100, height: 100)
    }
}

struct ContentView: View {
    var body: some View {
        HStack(spacing: 30) {
            VStack(spacing: 30) {
                Text("x: 50, y: 50")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: 50, y: 50)
                
                Text("x: -50, y: 50")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: -50, y: 50)
            }
            
            VStack(spacing: 30) {
                Text("x: 50, y: -50")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: 50, y: -50)
                
                Text("x: -50, y: -50")
                    .font(.title).bold()
                
                RectView()
                    .shadow(color: .black, radius: 10, x: -50, y: -50)
            }
        }
    }
}

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

x는 양의 방향이 오른쪽이고, y는 양의 방향이 아래쪽이다.
다음 포스트에서는 글씨가 들어간 view에 그림자를 주는 내용을 다루어보겠다.