CollectionView Cell에 그림자 넣기

Duna·2021년 7월 22일
0
post-thumbnail

그림자 넣는게 쉽다고 얕보다가 얕됐습니다.

그림자를 넣는 건 쉽지만
CollectionView 선배님은 다릅니다. 달라요.
제가 만들려고 했던 Cell은 이런 느낌이었습니다.

남다른 Round와 Shadow의 조화..

여러분들은 알고 계셨나요? cell은 shadow와 cornerRadius 중에 하나만 고를 수 있습니다.
원픽만 가능합니다.

왜냐구요?

  • cell에 shadow 적용 코드
    layer.masksToBounds = false
    layer.shadowOpacity = 0.8
    layer.shadowOffset = CGSize(width: -2, height: 2)
    layer.shadowRadius = 3
  • cell에 cornerRadius 적용 코드
    layer.masksToBounds = true
    layer.cornerRadius = 10

코드를 보면 아시겠지만, shadow를 적용하려면 masksToBounds를 false로 줘야하고 cornerRadius를 적용하려면 masksToBounds를 true로 줘야합니다.


그럼 shadow와 cornerRadius를 어찌 적용하나요?

우리는 shadow를 적용할 cell에 UIView를 둘 겁니다.
UIView를 베이스로 깔고 그 위에다가 셀을 구성해줄 거예요.
그리고 shadow는 UIView에 적용해줍니다. 저는 shadow적용해주는 코드를 extension으로 빼뒀어요.

extension UIView {
    func setViewShadow(backView: UIView) {
        backView.layer.masksToBounds = true
        backView.layer.cornerRadius = 10
        backView.layer.borderWidth = 1
        
        layer.masksToBounds = false
        layer.shadowOpacity = 0.8
        layer.shadowOffset = CGSize(width: -2, height: 2)
        layer.shadowRadius = 3
    }
}

이렇게 하면 cell에 shadow와 corner가 한 번에 착 생깁니다.

어메이징.

더 좋은 방식이 있다면 말씀해주세요.. 저도 알고 싶습니다..

profile
더 멋진 iOS 개발자를 향해

1개의 댓글

comment-user-thumbnail
2023년 5월 23일

컬렉션 뷰의 셀은 셀 그 자체의 뷰와 contentView라는 프로퍼티 뷰로 이루어져 있기 때문에, 백뷰를 따로 만들지 않고도 그림자 처리가 가능합니다. 구현 방식은 백뷰를 사용한 방식과 같을 것 같아요

답글 달기