[UIKit] Cell에 shadow와 cornerRadius가 동시에 안먹힐 때

📱 구현하고 싶은 뷰

이렇게 콜렉션뷰 셀들에 그림자가 져있는 뷰를 만들고 싶다!

 

🟣 Cell에 그림자와 cornerRadius를 동시에 넣어보자

label.layer.shadowOffset = CGSize(width: 10, height: 10)
label.layer.shadowOpacity = 0.23
label.layer.shadowRadius = 4
label.layer.masksToBounds = false
label.layer.cornerRadius = 10

😶 엥! 그림자만 들어가고 radius가 안들어가잖아!

아차차, radius 넣으려면 masksToBounds true 해줘야하지

label.layer.shadowOffset = CGSize(width: 10, height: 10)
label.layer.shadowOpacity = 0.23
label.layer.shadowRadius = 4
label.layer.masksToBounds = false
label.layer.cornerRadius = 10
label.layer.masksToBounds = true

엥! 그림자가 안들어가잖아! 아 근데 masksToBounds를 f 햇다가 t 했다가 뭐한거지 두개 동시에 어떻게 넣지!?!

진짜 어이가없다… 진짜 바보아니야? 왜 도대체 이렇게 해놓은거지?? 일단,,, 결론부터 말하자면, masksToBounds를 true 냐 false냐를 선태해야하므로, 그림자와 radius 둘중 하나만 픽해야한다. 이런 바보같으니라고

ㅂㄷㅂㄷ.. 이게뭐라고 뷰를 두개나 만들어야 하는거지? 진짜 바보다 바보. collectionView 요놈자식은 알면알수록 킹받는 면모가 많다.

 

💡 cell의 그림자와 cornerRadius를 분리시키자

🔖 ContentView위에 addsubView해주기

그니까, 하나의 뷰에 두개 다 넣는게 안되니까, contentView를 이용해야한다.

아시다시피, CollectionViewCell은 cell이 올라가는 ContentView가 있다. 간혹가다가, cell을 addsubview를 할때 view.addsubview() 했다가 안된다고 하는 경우가 많다. 이때는 cell 자체적으로 갖고 있는 contentView가 addsubview하려고하는 뷰를 덮어서 그런것!

❌ addsubview를 그냥했을 때

addSubviews(categoryLabel)
  NSLayoutConstraint.activate([
      categoryLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
      categoryLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
      categoryLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
      categoryLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
  ])

이렇게 연두색 view가 내가원하는 cell의 모양 위에 올라온다. 이놈이 contentView이다.

✅ contentView.addsubview()를 했을때

contentView.addSubviews(categoryLabel)
  NSLayoutConstraint.activate([
      categoryLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
      categoryLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
      categoryLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
      categoryLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
  ])

여기서 contentView에다가 내가 원하는 뷰를 정상적으로 올렸다면 다음 단계를 살펴보자.

🔖 contentView에 cornerRadius를 넣어주고, 내가 만든 label에 그림자를 넣어주자.

이렇게 분리해서 넣어주니까 정상적으로 동시에 두개 모두! 효과를 줄 수 있었다.

나는 label의 크기를 따로 계산해주어야 해서 함수로 따로 빼서 만들었다.

private func configureUI(with label: String) {
    let cellWidth = CalculateSizeManager().calculateCategoryButton(.widthAnchor, with: label)
    let cellHeight = CalculateSizeManager().calculateCategoryButton(.heightAnchor, with: label)

    contentView.layer.cornerRadius = min(cellWidth, cellHeight) / 2
    contentView.layer.masksToBounds = true

    layer.shadowOffset = CGSize(width: 10, height: 10)
    layer.shadowOpacity = 0.5
    layer.shadowRadius = 4
    layer.masksToBounds = false
}

짜잔, 이렇게 cell 내부에서 contentView 에 corner를 , 내가 지금 다루고 있는 cell에 그림자를 넣어주었다. 그랬더니 동시에 출력 성공!

(아 그림자 짤리는거 해결해야겟넹 헤헤 collectionView height가 cell크기에 딱 맞춰져 있어서 그런듯,, 흠)

🔖 다른 방식

이렇게 contentView를 사용하는 방식도 있지만, view 프로퍼티를 만들때 아예 뷰를 두개를 만들어서 하나에는 그림자, 하나에는 cornerRadius를 넣는 경우도 있다. 나는 contentView에 적용하는게 더 깔끔한 방식인듯 싶다!

 

이렇게 이것도 성.. 공.. 🫶 잇힝

모에모에뀽