Swift Shadow(그림자) 설정 알아보기

안녕하세요. 

오늘은 간만에 간단하면서도 은근 자주 쓰이는 그림자 기능에 대해 이야기 해볼까합니다. 

그림자 효과가 어떤 건지 궁금하신 분들을 위해 맛보기를 보여드리면 아래같은거 말하는 겁니다. 

이런거 말하는 겁니다.

 

그래서 오늘은 그림자 기능을 설정할때 각각의 속성들이 어떤 기능을 하는지를 알아볼까합니다. 

 

기본 제공되는 그림자의 속성은 크게 아래 5가지 입니다. 

1. ShadowColor : 그림자 색상

2. ShadowOffset : 그림자 방향 

3. ShadowOpacity : 그림자 강도 (불투명성)

4. ShadowRadius : 그림자 퍼짐 정도 

5. ShadowPath : 그림자 모양 

 

말로는 차이를 알기 어려우니 직접 비교해봅시다.

차이를 보기 위해 색깔만 다른 두개의 UIView 을 만들어 줄께요. 

아래처럼요 

이걸 기본으로 그림자를 설정해봅시다.

시작해 봅시다. 

 

Tip. 기본 모든 UI의 ShadowOpacity 는 0으로 되어있어서 그냥 하면 그림자를 아무리 설정해도 눈에 안보입니다.

(그래서 저희는 아래처럼 미리 설정하고 실험할껍니다.)

leftLbl.layer.shadowOpacity = 1.0 // 기본 0 이기 때문에 실험을 위해 1로 수정

 

 

1. ShadowColor (CGColor)

- 그림자의 색상을 의미합니다. 기본값은 검정색 입니다. 

- left

leftLbl.layer.shadowColor = UIColor.red.cgColor

- right

rightLbl.layer.shadowColor = UIColor.blue.cgColor

- 실행 화면 

ShadowColor

 

2. ShadowOffset (CGSize)

- 그림자의 방향을 의미합니다. 기본값은 (0.0,-3.0) 입니다. 

- left

leftLbl.layer.shadowOffset = CGSize(width: 5.0, height: 1.5)

- right

rightLbl.layer.shadowOffset = CGSize(width: -10.5, height: -5.5)

- 실행 화면 

ShadowOffset

 

3. ShadowOpacity (Float)

- 그림자의 투명도를 의미합니다. 기본값은 0.0 입니다. (최대값 1.0)

- left

leftLbl.layer.shadowOpacity = 1.0

- right

rightLbl.layer.shadowOpacity = 0.1

- 실행 화면 

ShadowOpacity

4. ShadowRadius (CGFloat)

- 그림자의 퍼짐 정도를 의미합니다. 기본값은 3.0 입니다. (이건 직접 보시는게 이해가 빠를겁니다.) 

- left

leftLbl.layer.shadowRadius = CGFloat(1.0)

- right

rightLbl.layer.shadowRadius = CGFloat(5.0)

- 실행 화면 

ShadowRadius

5. ShadowPath (CGPath?)

- 그림자의 모양을 의미합니다. 기본값은 무려 nil (NULL) 입니다. 

- left

leftLbl.layer.shadowPath = CGPath(ellipseIn: CGRect(x: 0,
                                            y: (leftLbl.frame.height - 5),
                                            width: leftLbl.bounds.width + 10,
                                            height: 5),
                                            transform: nil)

- right

rightLbl.layer.shadowPath = nil

- 실행 화면

ShadowPath

 

 

*Tip : 몇몇 UI는 위 기능을 약간 다른 명령어로도 설정할수있습니다. (Ex. UILabel)

 - UILabel 의 경우 그림자 속성중 두가지(ShadowColor / ShadowOffset)를 쉽게 사용하도록 제공합니다. 

- 해당 설정을 할경우 Opacity 가 자동으로 변경되어 따로 설정안해도 그림자가 눈에 보입니다. 

- Color의 경우 타입이 CGColor 에서 UIColor 로 변경됩니다. 

- left

leftLbl.shadowColor = .red
leftLbl.shadowOffset = .init(width: 0.5, height: 0.5)

- right

rightLbl.shadowColor = .green
rightLbl.shadowOffset = .init(width: 5.0, height: 5.0)

- 실행 화면

간단한거 설정시 이게 더 편해요!

 

그림자는 할때마다 속성이 헷갈려서 한번 정리해봤습니다. 

저처럼 헷갈리는 분들에게 도움이 되면 좋겠네요. 

 

아무튼 오늘도 파이팅입니다.