[SwiftUI] shadow 효과 주는 방법

 

안녕하세요~ 지호구입니다.

오늘은 SwiftUI에서 View에 shadow 효과를 주는 방법을 알아보려합니다 !

 

그냥 View만 뚝딱해도 상관은 없지만 뭔가.. 2% 모자란 느낌이 든 적이 있을겁니다..!

그럴 때 shadow만 추가해줘도 입체감이 들고 좀 더 보기가 좋아진답니다 ㅎㅎ

 

---

 

공식 문서 - shadow

shadow(color:radius:x:y:) | Apple Developer Documentation

 

 

SwiftUI에서는 이 shadow라는 View Modifier를 제공해줍니다.

파라미터로 color, radius, x, y값을 받는데요, 각각의 속성들에 대해 알아보겠습니다.

 

 

color

그림자의 색상

 

radius

그림자의 흐림 정도. 흐릴 수록(값이 클수록) 멀리 퍼짐

 

x, y

그림자의 offset
x가 10이면 View에서 오른쪽으로 10만큼 이동한 위치에서 그림자가 보임

y가 10이면 View에서 아래로 10만큼 이동한 위치에서 그림자가 보임

 

 

글로는 이해가 안되니 공식 문서의 예제를 통해 같이 확인해보시죠 !

 

 

 

파라미터들에 따른 케이스들을 확인하기 위해 9개의 정사각형을 배치했습니다

 

정사각형 위에 숫자들이 있는데요

상단의 숫자는 radius. 그림자의 퍼지는 정도를 나타냅니다

하단의 튜플은 정사각형의 좌측 상단을 (0, 0) 기준으로 한 x, y offset 값 입니다

 

이 값을 비교해서 대략 어디에 어떤 값을 주면 어떻게 되는지를 예상해볼 수 있겠죠 !

 

radius값에 따라서 그림자가 퍼지는 걸 확인할 수 있고

offset에 따라서 그림자의 위치가 이동하는 것을 확인할 수 있습니다

 

추가로, 예제에는 없지만 color에 따라 그림자의 색이 달라집니다

아래는 예제를 구현한 코드입니다

struct Shadow: View {
    let steps = [0, 5, 10]

    var body: some View {
        VStack(spacing: 50) {
            ForEach(steps, id: \.self) { offset in
                HStack(spacing: 50) {
                    ForEach(steps, id: \.self) { radius in
                        Color.blue
                            .shadow(
                                color: .primary,
                                radius: CGFloat(radius),
                                x: CGFloat(offset), y: CGFloat(offset))
                            .overlay {
                                VStack {
                                    Text("\(radius)")
                                    Text("(\(offset), \(offset))")
                                }
                            }
                    }
                }
            }
        }
    }
}

 

steps에 따라

offset이 (0, 0), (5, 5), (10, 10)

radius가 0, 5, 10으로 조합된 9개의 정사각형을 볼 수 있습니다

 

 

오늘 공부한 내용은 여기까지 입니다 !!

오늘도 즐거운 하루 보내세요 !