본문 바로가기
🌱

뷰에 그림자주기

by 방우 2022. 8. 14.

읽기전 머리 속에 넣을 개념(이 포스팅의 개념들은 bound를 사용)

 

bound => 슈퍼뷰와 상관없는 자신의 좌표계, 직역 그대로 크기도 자신의 경계값 크기를 가짐

frame -> 슈퍼뷰로부터의 좌표계, 영어 뜻에서 알 수 있듯이 뷰를 감싸는 사각형의 액자


 

그림자를 주려면 cliptoBounds 혹은 maskToBound를 이용해야한다.

 

그림자를 준 나의 코드블럭 

func configureContainView() {
        containerView.layer.borderColor = UIColor.lightGray.cgColor
//        containerView.layer.borderWidth = 0.2
        containerView.backgroundColor = .white
        containerView.layer.cornerRadius = cornerRadiusValue
        containerView.layer.masksToBounds = false
        containerView.layer.shadowOpacity = 0.4
        containerView.layer.shadowOffset = CGSize.zero
        containerView.layer.shadowRadius = 8
    }

 

그림자 줌

clipsToBounds

- UIView의 프로퍼티

- 기본값은 false

- 애플 공식문서

 이 값을 true로 설정하면 하위 뷰가 뷰의 경계로 잘립니다. False로 설정하면, 프레임이 보기의 보이는 경계를 넘어서는 서브뷰는 잘리지 않습니다. 기본값은 false입니다. UIScrollView와 같은 UIView의 일부 하위 클래스는 기본값을 true로 재정의합니다.

 

뭐라는거지

 

위가 슈퍼뷰(갈색), 아래가 서브뷰(파랑)

 

=> 즉 false면 파랑이가 갈색이의 밖으로 넘어간 부분을 그린다는 거고, true면 안 그린다는 거임

주체가 누구임? 슈퍼뷰임 그러니까 자신의 영역 밖의 파랑이 부분을  그리고 싶다면 갈색이에 대하여 clipToBounds를 true로 걸어주면 됨

 

그럼 파랑이는 잘린거야...?

 

NO

 

안 그려진 것 일 뿐, 아래 스샷 참고 (예전 포스팅을 수정해야겟당)

 

위의 코드 블럭에서 쓰고 싶다면 MasksToBounds 대신 containerView.clipsToBounds = false 를 쓰면 된다.

 


 

 

MasksToBounds

- CALayer의 프로퍼티

- UIView의 layer를 통해서 접근 

- 애플 공식문서

하위 레이어가 레이어의 경계로 잘리는지 여부를 나타내는 Bool. 애니메이션 가능.

이 속성의 값이 참이면, 코어 애니메이션은 레이어의 경계와 일치하고 모서리 반경 효과를 포함하는 암시적 클리핑 마스크를 만듭니다. 마스크 속성의 값도 지정되면, 두 개의 마스크를 곱하여 최종 마스크 값을 얻습니다. 이 속성의 기본값은 false입니다.

 

즉 내가 코드블럭에서 설정해준 그림자가 view를 넘어서 그려지는 이유는, 경계 layer을 넘어 그려지도록 mastsToBounds를 false로 설정했기 때문이다. 만약 true로 설정하면? 그림자가 사라짐 

여기서도 설정해주는 주체는 superView의 layer~

 


 

위의 연한글씨의 mask에 대한 기능을 좀더 알고싶다면 아래 블로그를 참고해봐도 좋을 것 같다

https://rhkrthdud7.tistory.com/7

 

CoreGraphics (1) - Layer Masking

안녕하세요 :) 오늘은 제가 최근에 삽질(?)을 했던 부분에 대해서 정리를 해보겠습니다 기본적으로 레이어 마스킹을 하는 방법은 마스킹하고자 하는 레이어에 마스킹용 레이어를 주면 됩니다 뭔

rhkrthdud7.tistory.com

 

참고자료

https://developer.apple.com/documentation/quartzcore/calayer/1410896-maskstobounds

 

Apple Developer Documentation

 

developer.apple.com

https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds

 

Apple Developer Documentation

 

developer.apple.com

 

 

아니..배너 뭔데...영화 포스터... 왜 무서운데...

'🌱' 카테고리의 다른 글

UIButtonConfiguration  (0) 2022.08.15
Dynamic Type  (0) 2022.08.15
PHPickerViewController  (0) 2022.08.14
데이터 통신과 테이블 뷰 트러블슈팅  (0) 2022.08.09
separator inset 적용  (0) 2022.08.08