[swift] UIImageView shadow 적용 안되는 이유.. | clipsTobounds

 

오늘은 udp socket 통신을 관련 공부를 c언어로 학습하고 swift로 적용하려던 중에 새롭게 알게된 내용이 있습니다. UIImageView에 쉐도우를 적용하려고 했었는데 적용이 안됬습니다..

 

 

이때 제 이미지 뷰의 선언은 아래와 같습니다.

 

let photoView: UIImageView = {
    let iv = UIImageView()
    iv.image = UIImage(named: "flower")
    iv.clipsToBounds = true
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.layer.cornerRadius = 7
    iv.layer.shadowColor = UIColor.gray.cgColor
    iv.layer.shadowOpacity = 0.7
    iv.layer.shadowOffset = CGSize(width: 1, height: 2)
    iv.layer.shadowRadius = 7
    return iv
  }()

 

저는 분명 이미지뷰의 layer에 shadow를 적용했는데.. shadowRadius를 아무리 큰 값을 줘도 쉐도우가 표시 안 됬습니다. 그 이유는

 

clipsToBounds를 true로 했기 때문입니다.... 단순히 이미지를 imageView의 크기에 맞추려고 했는데.. clipsToBounds는 이미지 뷰를 벗어나는 모든 부분을 잘리는데 쉐도우도 잘립니다. 그래서 저의 대안은 imageView를 포함하는 커스텀 뷰를 만들어 그곳에 shadow를 부여하는 것 입니다.

 

final class PhotoView: UIView {
  //MARK: - Properties
  let photo: UIImageView = {
    let iv = UIImageView()
    iv.image = UIImage(named: "flower")
    iv.contentMode = .scaleAspectFill
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.clipsToBounds = true
    iv.layer.cornerRadius = 7
    return iv
  }()
  
  //MARK: - Initialization
  override init(frame: CGRect) {
    super.init(frame: .zero)
    configure()
  }
  
  required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
  }

 

이미지 뷰 생성할 때 여기서 clipsToBounds true로 설정하지 않으면 cornerRadius를 할당해도 이미지 모서리 부분이 삐죽 튀어나옵니다. 그리고 imageView의 cornerRadius 또한 설정해야 합니다.

 

final class PhotoView: UIView() {
  ...
  private func configure() {
    translatesAutoresizingMaskIntoConstraints = false
    layer.cornerRadius = 7
    layer.shadowColor = UIColor.gray.cgColor
    layer.shadowOpacity = 0.7
    layer.shadowOffset = CGSize(width: 1, height: 2)
    layer.shadowRadius = 7
    addSubview(photo)
    NSLayoutConstraint.activate([
      photo.topAnchor.constraint(equalTo: topAnchor),
      photo.leadingAnchor.constraint(equalTo: leadingAnchor),
      photo.trailingAnchor.constraint(equalTo: trailingAnchor),
      photo.bottomAnchor.constraint(equalTo: bottomAnchor)])
  }

 

여기서 iv의 상위 뷰에 쉐도우를 줍니다. 

그리고 뷰 컨에 추가하면 됩니다.