[IOS] 뷰에 그림자 만들기

UIView에는 실제로 뷰를 그리는 역할을 하는 CALayer 타입의 layer라는 프로퍼티가 존재해서

이 layer가 가진 프로퍼티를 사용해 뷰에 그림자를 만들 수 있다.

 

그림자를 만들때 사용하는 주요 프로퍼티는 아래 4개 정도이다.

• shadowOffset: CGSize
• shadowColor: CGColor
• shadowRadius: CGFloat
• shadowOpacity: CGFloat

 

1. shadowOffset

The offset (in points) of the layer’s shadow. Animatable.

레이어 그림자의 오프셋.

오프셋은 사전에서 "상쇄하다" 라는 뜻이지만 컴퓨터 과학에서는 "변위차"라는 의미로 사용된다.

따라서 그림자의 위치가 기존 레이어보다 얼마만큼 떨어진 지점에 위치하는지를 나타내는 프로퍼티이다. 

그 예시로 CGSize(width: 50, height: 50)을 할당하면 기존 레이어의 위치에서 가로로 50, 세로로 50 만큼 떨어진 지점에 레이어와 똑같은 크기의 그림자가 생성된다.

// 왼쪽
shadowView.layer.shadowOffset = CGSize(width: 50, height: 50)
// 오른쪽
shadowView.layer.shadowOffset = CGSize(width:100, height: 100)

 

 

2. shadowColor

The color of the layer’s shadow. Animatable.

그림자의 색. CGColor 타입을 사용한다.

기본값은 불투명한 검은색이다.

// 왼쪽
shadowView.layer.shadowColor = UIColor.black.cgColor
// 오른쪽
shadowView.layer.shadowColor = UIColor.systemBlue.cgColor

 

3. shadowRadius

The blur radius (in points) used to render the layer’s shadow. Animatable.

레이어의 그림자를 그릴때 흐려지는 반경을 의미한다.

값이 커질수록 그림자 반경이 커져 색이 흐려지면서 번지는 효과를 갖는다.

기본값은 3.0으로 설정돼있다.

// 왼쪽
shadowView.layer.shadowRadius = 3
// 오른쪽
shadowView.layer.shadowRadius = 10

4. shadowOpacity

The opacity of the layer’s shadow. Animatable.

그림자의 불투명함 정도를 의미한다.

0.0 ~ 1.0 사이의 값을 가지며 커질수록 그림자의 색이 불투명해진다.

기본값이 0으로 설정돼있다.

// 왼쪽
shadowView.layer.shadowOpacity = 10
// 오른쪽
shadowView.layer.shadowOpacity = 0.5