iOS) 제플린에서 쉐도우 설정 및 동적으로 셀크기 설정

제플린에서 쉐도우 설정 및 동적으로 셀크기 설정

backView.layer.cornerRadius = 10
backView.layer.shadowOffset = CGSize(width: 2, height: 2)
backView.layer.shadowRadius = 7
backView.layer.shadowColor = UIColor.black.cgColor
backView.layer.shadowOpacity = 0.14

다음과 같이 매칭이 된다.

우린 extension 으로 편하게 사용할 것!

import Foundation
import UIKit

extension CALayer {
  func applyShadow(
    color: UIColor = .black,
    alpha: Float = 0.5,
    x: CGFloat = 0,
    y: CGFloat = 2,
    blur: CGFloat = 4,
    spread: CGFloat = 0) {
    
    masksToBounds = false
    shadowColor = color.cgColor
    shadowOpacity = alpha
    shadowOffset = CGSize(width: x, height: y)
    shadowRadius = blur / 2.0
    if spread == 0 {
      shadowPath = nil
    } else {
      let dx = -spread
      let rect = bounds.insetBy(dx: dx, dy: dx)
      shadowPath = UIBezierPath(rect: rect).cgPath
    }
  }
}
// 사용 : buttonName.layer.applyShadow(color: .black, alpha: 0.14, x: 1, y: 1, blur: 7, spread: 0)

그림자

contentView 를 둥글게 만들고 cell 의 layer 에 그림자를 추가하는 원리

extension SecondOnboardingVC: UICollectionViewDataSource {
//...
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            guard let firstCell = collectionView.dequeueReusableCell(withReuseIdentifier: "LensKindCVC", for: indexPath) as? LensKindCVC else {
                return UICollectionViewCell()
            }
            firstCell.initCell(image: lensKindList[indexPath.row].image, title: lensKindList[indexPath.row].title)
            
                        //extension applyShadow() 함수
            firstCell.layer.applyShadow(color: .black, alpha: 0.14, x: 2, y: 2, blur: 7, spread: 0)
            firstCell.contentView.layer.cornerRadius = 20
            firstCell.contentView.layer.masksToBounds = true
            
            return firstCell
     }
    

이렇게 그림자를 만들어도

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        if collectionView == firstCollectionView {
            //return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
            return .zero
        } else {
            return .zero
        }
    }

inset 을 주지 않으면 그림자가 잘리고 어색하다.

inset 을 주게되면 원하는 효과를 얻을 수 있다.

대신 inset 을 주었기 때문에 제플린에서 제공하는 사이즈보다 작아진다. 그래서 collectionview 자체를 inset 을 고려해서 좌우상하 간격을 잡아주었다.

UIEdgeinset 으로 잡아주는 간격은 아래에 해당한다.

셀의 동적 사이즈

extension SecondOnboardingVC: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            
                        let width = collectionView.frame.width
//옆 간격 10. + inset 이 좌우니까 5*2.
//20을 제외
            let cellWidth = (width - 20) / 2
            return CGSize(width: cellWidth, height: cellWidth)
        }
//...
}