[UIKit] 모서리 깎기와 그림자 설정을 동시에 하기

머리말

문제점

• 그림자 처리를 하려고 하면(.layer.shadow~) 그림자만 남고, 모서리를 깎으려 하면(.layer.cornerRadius) 모서리만 깎여지는 문제가 발생했다.
• 하나의 ImageView에 두 설정을 하려면 양립 불가능하다는 피드백을 받았다.

완성 화면

문제를 해결한 View, 모서리도 깎여져 있고 그림자도 반영이 된 상태이다

 

해결책

• 네 개의 View 안에 각각의 ImageView를 넣었다.
• 여기에 ImageView를 실제로 화면의 모서리를 깎고, 그 상위의 View에 그림자를 넣는 방식으로 문제를 해결했다.

ViewController의 계층 구조

ViewController의 계층 구조

코드

import UIKit

class DatePickerViewController: UIViewController {
	...
    
    @IBOutlet var topLeftView: UIView!
    @IBOutlet var topRightView: UIView!
    @IBOutlet var bottomLeftView: UIView!
    @IBOutlet var bottomRightView: UIView!
    
    @IBOutlet var topLeftImageView: UIImageView!
    @IBOutlet var topRightImageView: UIImageView!
    @IBOutlet var bottomLeftImageView: UIImageView!
    @IBOutlet var bottomRightImageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        designView()
    }
    
    func designView() {
        designImageView(view: topLeftView, image: topLeftImageView)
        designImageView(view: topRightView, image: topRightImageView)
        designImageView(view: bottomLeftView, image: bottomLeftImageView)
        designImageView(view: bottomRightView, image: bottomRightImageView)
    }
    
    // view는 그림자 설정만 하고, 모서리는 실제 image의 것만 조절
    func designImageView(view: UIView, image: UIImageView) {
        image.layer.cornerRadius = 30
        
        view.layer.shadowColor = UIColor.black.cgColor
        view.layer.shadowOffset = CGSize(width: 10, height: 10)
        view.layer.shadowRadius = 5
        view.layer.shadowOpacity = 0.3
        view.clipsToBounds = false
    }
    
    ...
}