iOS)view에 shadow 넣기

오늘은 View에 Shadow 넣는 방법을 정리해보려 합니다. 

1. shadow 넣기

superView 중앙에 100*100 view 를 올렸습니다. 오른쪽은 해당 코드입니다.

Shadow 를 넣는것은 어렵지 않습니다 

func shadow() {
	Exview.layer.shadowOffset = CGSize(width: 1, height: 3)
	Exview.layer.shadowColor = UIColor.black.cgColor
	//opacity 의 경우 default값이 0 이므로 설정 안해주면 그림자가 안보임
	Exview.layer.shadowOpacity = 0.5
	Exview.layer.shadowRadius = 3
	}

1. ShadowOffset 을 통해서 그림자가 그려질 범위를 설정할수 있습니다. (음수도 가능합니다. width: 양수(왼쪽) 음수(오른쪽),height: 양수(아래쪽) 음수(위쪽) )
2. ShadowColor 을 통해서 그림자의 색상을 설정할수 있습니다.
3. ShadowOpacity 를 통해서 그림자의 투명도를 설정할수 있습니다. (기본값은 0 이므로 따로 코드를 써주지 않으면 그림자가 보이지 않을수 있습니다!!)
4. ShadowRadius 를 통해서 그림자의 cornerRadious 를 설정할수 있습니다. 

이렇게 기본적으로 4줄정도면 그림자가 생깁니다!

그런데 가끔 이 그림자가 속을 썩일때가 있습니다... 

2.  clipsToBounds 와 같이 사용하기.

Exview에 cornerRadius 를 줘야 하는상황이라면, 우리는 clipsToBounds 를 같이 설정해주게 될겁니다.

view 안에 있는 요소들이 모서리 바깥쪽으로 빠져 나오는 경우가 있기 때문이죠.

그런데 clipsToBounds 를 여느때와 같이 설정하게되면?? 그림자가 사라지는 것을 확인하실수 있을겁니다.

요론식으로 말이죠!

shadow 함수가 적용 되었는데도 불구하고, configure 함수에서 clipsToBounds 를 true 값으로 주게되면 그림자가 보이지 않게됩니다.

그림자가 나타나지 않는 이유는 shadow 또한 Exview 입장에서 뷰 바깥쪽에 있는 subView 이기 때문에 그림자가 잘려버리는 것이죠.

3.  같이 사용하기

clipsToBounds 와 그림자를 같이 사용하고 싶다면! 

간단하게 2개의 View 를 사용해주면 됩니다. 

이해를 돕기위해 outerView 에 background 색상을 black 로 주었습니다. 실제로는 clear 혹은 지정안해주시면 됩니다.

이렇게 outerView 를 만들고 내부에 실제로 보여질 Exview 를 넣어줘서, Exview 에서는 clipsToBounds 와 cornerRadius 를 사용하고, outerView 에서는 그림자를 만들어줘서 쉽게 구현해줄수 있게 되었습니다.

 

4. stackView 에서 사용하기.

갑자기 왠 스택뷰냐 하실수 있을거라고 생각합니다. 일단 저희가 구현해야 하는 뷰 먼저 확인해 보시죠!

요론 스택뷰를 만들어야 한다면...

사진과 같은 view 를 구현해야 한다면 

1. stackView 를 만들고, stackView 에 View 를 넣어준다
2. stackView 에 그림자를 설정해준다.
3. stackView 에 cornerRadius 를 설정해준다. 
4. 3번에서 설정해준 cornerRadius 를 통해 깍아준 만큼 넘어가는 View 의 모서리도 같이 깍아주기 위해 clipsToBounds 를 true로 설정한다!
5. 그림자가 안보인다!!!!!

이런식으로 되어버리겠죠??? 왜냐하면 그렇다면 위에서 알려준것처럼 위에뷰랑 밑에뷰에 cornerRadius 를 주면 되는거 아니냐! 생각할수 있습니다. 한번 해볼까요??

당황스럽게도 우리가 구현하려 했던 화면이랑 달라지게 됩니다.

cornerRadius 가 네면을 다 깍아서 저희가 구현하려 했던 View 와는 다른 View 가 되었습니다. 

이걸 해결하기 위해서 네면중에서 선택적으로 cornerRadius 를 설정할수 있는 코드가 있습니다.

왼쪽 그림이 작지만, 위에 구현하려 했던 목표 사진과 같습니다.

바로 maskCorners 입니다. 

maskedCorner은 모서리중에서 선택적으로 cornerRadius 를 설정해줄수 있습니다.

배열의 형태로 지정해줄수 있고, 모서리 네 부분을 어떻게 명명하는지 알려드리도록 하겠습니다.

1. 왼쪽 위 모서리 : .layerMinXMinYCorner
2. 오른쪽 위 모서리 : .layerMaxXMinYCorner
3. 왼쪽 아래 모서리: .layerMinXMaxYCorner
4. 오른쪽 아래 모서리 : .layerMaxXMaxXCorner

으로 설정해줄수 있습니다.

 

maskedCorner에 대해 조금더 알아보고 싶으시다면 아래의 공식문서를 확인해 보세요!

https://developer.apple.com/documentation/quartzcore/calayer/2877488-maskedcorners

Apple Developer Documentation

 

이상으로 shadow 에 대한 정리 글이었습니다!