[UIKit] CollectionView Cell 에 cornerRadius & shadow 같이 적용하기

Cell을 생성하고 conerRadius, shadow를 같이 적용해서 실행해보니 제대로 적용되지 않는 문제를 겪었다.

문제점

cornerRadius를 적용할땐 clipsToBound를 true로 해줘야하고,

shadow를 적용할 땐 masksToBounds 를 false로 해줘야한다.

 

이 두가지를 하나의 뷰에서 하면 안되는것이다!

먼저 실행된 기능만 적용되고 후에 적용한것은 되지도 않는다.

 

그럼 어떻게 할까?

해결

먼저 해결한 화면을 보자.

하나의 뷰에 두가지 기능을 사용할 수 없으니 2개의 뷰를 사용해 각각 적용하는 방식을 선택했다.

 

Cell의 경우 기본적으로 ContentView가 존재하기 때문에...

1. ImageView에 cornerRadius 적용

2. contentView에 shadow 적용

 

그리고 contentView.addSubView(imageView) 를 해서 적용을 해줬다.

class MovieCell: UICollectionViewCell {
    lazy var imageView: UIImageView = {
        let image = UIImageView()
        image.backgroundColor = .gray.withAlphaComponent(0.5)
        image.layer.cornerRadius = 16
        image.clipsToBounds = true
        image.contentMode = .scaleAspectFit
        image.translatesAutoresizingMaskIntoConstraints = false
        return image
    }()
    lazy var titleLabel: UILabel = {
        ...
    }()
    
    
    func configure(title: String) {
		...
        //contentView에 shadow, imageView를 raound 처리 그리고 contentView에 addsubView 하면 다 적용됌
        contentView.layer.shadowColor = UIColor.black.cgColor
        contentView.layer.shadowOffset = CGSize(width: 2, height: 2)
        contentView.layer.shadowOpacity = 1
        contentView.layer.shadowRadius = 4
        contentView.layer.masksToBounds = false
        setupLayout()
    }
    
    private func setupLayout() {
        contentView.addSubview(imageView)
        contentView.addSubview(titleLabel)
        ...
    }
}

---

만약, Cell이 아닌 그냥 뷰에서 한다면..?

 

UI를 감쌀 UIView를 하나 선언하고, 그 안에 사용할 UI를 넣고 위와 같은 방식으로 적용하면 해결될것이다.