[UIKit] UIView 라운드 Shadow 그림자 박스 카드 만들기

그림자 설정

 

카드 형태의 이미지를 만들 때 많이 사용하는 효과를 extension으로 쉽게 구현해 보겠습니다. 위의 이미지에서 보듯이 카드를 이용한 디자인을 할 때 디자이너들이 곡선과 함께 쉐도우를 주는 작업을 많이 합니다. 플랫 한 디자인이 아닌 약간 입체적으로 보이기 위해서 사용하는데 익스텐션을 이용해서 만들어보겠습니다. 다만 특정 UIView를 감싼 컨테이너가 필요하다는 점에 유의해 주세요.

 

 

▼ 실습에 앞서서 다음 두개의 라이브러리를 추가해 줍니다.

---

import SnapKit
import Then

---

 

 

 

 

▼ 그리고 뷰 컨트롤러에 컨테이너와 Box 뷰를 생성하겠습니다. 단순히 Conatiner 뷰를 화면에 붙이고 그 안에 box를 넣은 상태입니다. box의 경우 300의 높이 값을 가지고 상단, 좌우로 100 만큼 떨어진 상태입니다.

---

class ViewController: UIViewController {
    
    
    let container = UIView().then {
        $0.backgroundColor = .white
    }
    
    let box = UIView().then {
        $0.backgroundColor = .white
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(container)
        container.addSubview(box)
        view.backgroundColor = .white
        
        box.snp.makeConstraints {
            $0.top.leading.trailing.equalToSuperview().inset(100)
            $0.height.equalTo(300)
        }
        
        container.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
}

---

 

 

▼ 이제 UIView 익스텐션을 해서 makeRoundShadow라는 함수를 만들어 보겠습니다. 해당 함수는 2개의 파라미터가 기본값을 가지고 있습니다. 좀 더 쉐도우 값을 보정하고 싶다면 두 개의 추가적인 파라미터도 함께 전달할 수 있습니다.

---

extension UIView {
    func makeRoundShadow(radius: CGFloat,
                         shadowOffset: CGSize,
                         opacity: Float = 0.2,
                         shadowRadi: CGFloat = 8){
        
        guard let superV = self.superview else{
            return
        }
        
        self.do {
            $0.clipsToBounds = true
            $0.layer.masksToBounds = true
            $0.layer.cornerRadius = radius
        }
        
        superV.do {
            $0.backgroundColor = .clear
            $0.layer.shadowColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
            $0.layer.shadowOffset = shadowOffset
            $0.layer.shadowOpacity = opacity
            $0.layer.shadowRadius = shadowRadi
        }
    }
}

---

 

 

▼ 이제 직접 box에 makeRoundShadow 함수를 호출해 보겠습니다 R 값은 20으로 하고 쉐도우 오프셋 값은 -10, 10을 각각 주었습니다.

---

class ViewController: UIViewController {
    
    
    let container = UIView().then {
        $0.backgroundColor = .white
    }
    
    let box = UIView().then {
        $0.backgroundColor = .white
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(container)
        container.addSubview(box)
        view.backgroundColor = .white
        
        box.snp.makeConstraints {
            $0.top.leading.trailing.equalToSuperview().inset(100)
            $0.height.equalTo(300)
        }
        
        container.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        // makeRoundShadow 추가
        box.makeRoundShadow(radius: 20, shadowOffset: CGSize(width: -10, height: 10))
    }
}

---

R 값은 20으로 하고 쉐도우 오프셋 값은 -10, 10

---