[iOS - swift] shadow 그림자 효과 top, left, right, bottom 방향 주는 방법 (layer.shadow)

사각형 아래에 그림자 효과

layer.shadow 속성 사용

• layer.borderWidth: 정해주지 않으면 그림자 미 표출되기 때문에 주의
• layer.masksToBounds = false: 해당 view의 frame밖에 contents들을 mask처리할 것인지

layer.masksToBounds = true 설정한 경우 (아래 그림자 mask되어 안보이는 형태)

• layer.shadowColor: 그림자 색상
• layer.shadowOffset: 그림자는 현재 view의 테두리에 겹쳐있는 상태이므로 offset을 통해 이동해야 그림자 표출
• layer.shadowOpacity: 그림자 투명도 (0 ~ 1) 
• layer.shadowRadius: 그림자의 corner radius

class ViewController: UIViewController {

    lazy var emptyView: UIView = {
        let view = UIView()

        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(emptyView)

        emptyView.snp.makeConstraints { maker in
            maker.center.equalToSuperview()
            maker.width.height.equalTo(200)
        }

        /// shadow가 있으려면 layer.borderWidth 값이 필요
        emptyView.layer.borderWidth = 1
        /// 테두리 밖으로 contents가 있을 때, 마스킹(true)하여 표출안되게 할것인지 마스킹을 off(false)하여 보일것인지 설정
        emptyView.layer.masksToBounds = false
        /// shadow 색상
        emptyView.layer.shadowColor = UIColor.black.cgColor
        /// 현재 shadow는 view의 layer 테두리와 동일한 위치로 있는 상태이므로 offset을 통해 그림자를 이동시켜야 표출
        emptyView.layer.shadowOffset = CGSize(width: 0, height: 20)
        /// shadow의 투명도 (0 ~ 1)
        emptyView.layer.shadowOpacity = 0.8
        /// shadow의 corner radius
        emptyView.layer.shadowRadius = 5.0
    }
}

extension으로 4방향 그림자 효과 정의

extension UIView {
    enum VerticalLocation {
        case bottom
        case top
        case left
        case right
    }

    func addShadow(location: VerticalLocation, color: UIColor = .black, opacity: Float = 0.8, radius: CGFloat = 5.0) {
        switch location {
        case .bottom:
             addShadow(offset: CGSize(width: 0, height: 10), color: color, opacity: opacity, radius: radius)
        case .top:
            addShadow(offset: CGSize(width: 0, height: -10), color: color, opacity: opacity, radius: radius)
        case .left:
            addShadow(offset: CGSize(width: -10, height: 0), color: color, opacity: opacity, radius: radius)
        case .right:
            addShadow(offset: CGSize(width: 10, height: 0), color: color, opacity: opacity, radius: radius)
        }
    }

    func addShadow(offset: CGSize, color: UIColor = .black, opacity: Float = 0.1, radius: CGFloat = 3.0) {
        self.layer.masksToBounds = false
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOffset = offset
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = radius
    }
}

• 위 extension으로 오른쪽으로 그림자 표출

        emptyView.layer.borderWidth = 1
        emptyView.addShadow(location: .right)