본문 바로가기

iOS/iOS

iOS) UIView 그림자 만들기

 

 

안녕하세요 :) 소들입니다

요즘 iOS 소소한 기능 포스팅에 재미가 들렸음돠ㅏ

 

오늘 포스팅은 다음과 같이

 

 

 

 

UIView 그림자 만들기

 

ㅎㅎㅎㅎㅎ 매우 간단하니 고우고우!

모든 포스팅은 편의 말투로 합니다~!!

 

 

 

 

 

 

1. 그림자의 시작 위치

 

자, 먼저 그림자의 시작 위치를 정하는 프로퍼티는

 

 

 

 

으로, 자료형이 CGSize임 

뭐 다음과 같이 사용하는데 

 

 

 

이렇게 해 줄 경우, 

 

 View에서부터 x쪽으로 +20, y쪽으로 +15 떨어진 곳부터 그림자를 그리겠다!!!!!

 

머 이런 말임

 

그림으로 보자면

 

 

 

 

이런 느낌 ㅇㅋ!?!

자, 근데 실행해보면 

 

 

 

 

아직 그림자는 그려지지 않음

왜냐면 불투명도를 조절하지 않았거든!!!!!

불투명도를 지정하지 않으면 0, 즉 투명 상태로 지정되어 그림자가 보이지 않음!

 

 

 

 

 

2. 그림자의 불투명도

 

그림자의 불투명도를 조정하는 프로퍼티는 

 

 

 

 

라는 프로퍼티임 ㅎㅎㅎㅎ 

참고로 이 프로퍼티는 0 ~ 1 사이의 값으로 불투명도를 설정할 수 있음

 

 

 

 

자 가운데인 0.5로 적용을 해보면

 

 

 

 

그림자가

 

 

 

 

원하는 위치에 원하는 짠!!!!!

 

근ㄷ.. ㅔ.. 뭔가 부자연스럽다......!

그림자를 둥글둥글하게 cornerRadius 주듯이 자연스럽게 해줘보자.... !!!

 

 

 

 

 

3. 그림자를 둥글게 둥글게

 

그림자를 둥글게 만드는 프로퍼티는

 

 

 

 

이는 기존에 사용하던 CornerRadius와 동일하게 사용하면 됨!!!

 

 

 

자 설정해주면

 

 

 

 

그림자의 모서리가 둥글둥글해지면서

좀 더 자연스러운 그림자가 되었음!!!!! (옅어지는 건 덤인ㄱ ㅏㅎ)

 

 

 

 

 

4. 그림자의 색상을 바꾸자

 

그림자의 색상을 바꾸는 프로퍼티도 있음

 

 

 

참고로 UIColor 아니고 CGColor

쨌든 다음과 같이 지정해주면

 

 

 

 

다음과 같이 그림자의 색상이

 

 

 

 

바뀐다!!!!!1 👀 예쁘군

 

 

 

 

 

5. 그림자의 위치 및 크기를 직접 지정하고 싶은 경우

 

그럴 땐 다음 프로퍼티를 사용함

 

 

 

 

뭐 예시는 다음과 같이 사용하면 되궁

 

 

 

 

여기서 x, y는 위에서 설명한 shadowOffset의 width, height와 동일하고,

그림자의 크기를 width, height로 직접 지정해줄 수 있음

 

 

 

 

짜잔 요런 식으루!!!

(넘 대충했나 ㅎ.. 그림자 너무 몬생김)

 

 

 

 

 

 

6. 만약 위 과정을 다 해도 그림자가 나타나지 않는다면..

 

그건 Layer의 masksToBoundstrue로 되어 있는 경우임

masksToBounds에 대해선 이거 읽으면 되고

간단하게 설명하자면

 

자신의 view bounds 경계 안에 있는 영역만 보여주게 설정

 

하는 프로퍼티임

 

 

따라서 true로 설정되어 있으면

그림자는 기본적으로 view 경계 바깥에 생성되기 때문에 그림자가 보여지지 않음

 

 

 

따라서 이렇게 false로 바꿔주면 잘 보일것임 ㅎㅎ

 

 

 

 

 

 

 

.

.

후후 view를 갖고 노는 건 정말 재밌다 :)

오늘 포스팅 끝!

 

 

 

'iOS > iOS' 카테고리의 다른 글

iOS) Frame vs Bounds 제대로 이해하기 (1/3)  (30) 2020.10.28
iOS) CGPoint, CGSize, CGRect  (2) 2020.10.23
iOS) @IBInspectable, @IBDesignable  (3) 2020.10.21
iOS) UIView 테두리 만들기  (2) 2020.10.20
iOS) 진동 울리기  (0) 2020.10.15


Calendar
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
최근 댓글
Visits
Today
Yesterday