[iOS/Swift] 모서리가 둥근, 그림자가 적용된 팝업 뷰 구현하기

💡 [iOS/Swift] 모서리가 둥근, 그림자가 적용된 팝업 뷰 구현하기

Zerobin 앱에서 왼쪽 화면은 리뷰작성시 새싹스탬프를 누르는 화면이고, 오른쪽 화면은 새싹 스탬프에 대한 설명을 나타내는 화면입니다.

 

앱개발을 하면서 왼쪽화면의 ⓘ 버튼을 누르면 다음과 같이 팝업 뷰가 나타나도록 개발해야 했고, 이 과정에서 생겼던 문제들을 다뤄볼게요! 설명을 위해서 왼쪽화면은 MainVC,  ⓘ 버튼은 infoButton, 오른쪽 화면에 나타난 팝업화면을 PopupVC 라고 지칭할게요.

 

먼저, MainVC 에서 PopupVC 를 띄우는 방법을 설명하고 팝업뷰에서 View 의 모서리를 둥글게 처리하고, 그림자를 적용하는 방법을 나눠서 작성할게요. 

 

✔︎ 메인화면에서 팝업 뷰를 띄우는 방법

1. 먼저 두 화면을 스토리보드로 구현합니다.

 

MainVC 는 편한대로 구현하시면 되지만, 팝업 뷰를 띄우기 위한 버튼 하나는 있어야겠죠!?

PopupVC 는 가운데에 infoView 를 두고, 뒤의 배경은 어두운 색으로 지정했습니다.

 

• MainVC = Review Stamp View Controller
• PopupVC = Stamp Info View Controller

 

2. MainVC 에서 infoButton 이 클릭되었을 때 PopupVC 를 overFullScreen 으로 띄워줍니다.

 

modalPresentationStyle 을 overFullScreen 으로 설정하고, present 함수를 통해 뷰를 띄워준다는 뜻입니다.

 

.overFullScreen 으로 설정한 이유는 MainVC 화면을 유지하고 그 위에 PopupVC 를 띄워주기 위해서입니다.

.fullScreen 으로 설정하게 된다면, MainVC 는 뷰계층에서 사라지고, PopupVC 만 나타나게 됩니다..

 

👀 용어정리!
modalPresentationStyle :: View Controller 가 modal 형식으로 띄워질 때의 스타일을 지정할 수 있는 속성이다.
modalPresentationStyle 은 iOS13 에서 기본적인 화면 전환 방식으로 바뀌었고, 기존 view 가 view 계층에서 사라지지 않고, 새로운 view 가 떠있는 형식이다.
modalPresentationStyle 속성으로 설정할 수 있는 타입값은 11가지로 다음 문서에 나와있다.

class MainVC: UIViewController {
    // ...
    // MARK: - Action

    @IBAction func infoButtonTapped(_ sender: Any) {
        let storyBoard = UIStoryboard.init(name: "Main", bundle: nil)
        let popupVC = storyBoard.instantiateViewController(withIdentifier: "PopupVC")
        popupVC.modalPresentationStyle = .overFullScreen
        present(popupVC, animated: false, completion: nil)
    }
}

 

✔︎ 모서리가 둥근, 그림자가 적용된 뷰 구현하기

* 일반적으로 View에 그림자를 적용할 때에는 별도의 처리를 하지 않아도 되지만, View의 모서리를 둥글게 만든경우 그림자를 적용하면 그림자가 정상적으로 나타나지 않습니다.

 

1. 모서리가 둥근 그림자를 적용하기 위한 containerView 를 만든다.

• 그림자를 적용하기 위해서는 shadowColor, shadowOffset, shadowRadius, shadowOpacity 를 설정해주면 됩니다!
• shadowColor :: 그림자 색상, shadowOffset :: 그림자의 위치
• shadowRadius :: 그림자 경계의 선명도, shadowOpacity :: 그림자 투명도

 

2. infoView (기존뷰) 의 모서리를 둥글게 처리한다.

모서리를 둥글게 처리하기 위해 아래 두 작업을 수행해주면 됩니다.

• UIView.layer.cornerRadius 속성을 원하는 radius 값으로 설정합니다.
• UIView.clipsToBounds 속성을 true 로 설정해 레이어 바깥 부분을 잘라냅니다. 

 

3. containerView 에 infoView 를 추가한다.

• 1번 과정에서 containerView 를 만든 후에 추가해도 무방합니다!

 

4. containerView 의 AutoLayout 을 지정한다.

• infoView 에 AutoyLayout 을 지정했더라도, containerView 하위 뷰로 지정했기 때문에 AutoLayout 설정을 다시 해줘야합니다.
• 저는 이부분에서 AutoLayout 설정을 놓쳐서 헤맸었어요! 😢

 

추가적으로, PopupVC 를 종료하기 위해 버튼이나 Tap Gesture 를 추가하면 됩니다~ 

class PopupVC: UIViewController {

    @IBOutlet weak var infoView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // shadow 적용하기 위한 containerView
        let containerView = UIView()
        containerView.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
        containerView.layer.shadowOffset = CGSize(width: 1, height: 4)
        containerView.layer.shadowRadius = 10
        containerView.layer.shadowOpacity = 1
        containerView.addSubview(infoView)
        
        // infoView 모서리 둥글게 만들기
        infoView.layer.cornerRadius = 25
        infoView.clipsToBounds = true
        view.addSubview(containerView)
        
        // containerView 에 대해 Auto Layout 설정
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -10).isActive = true
        containerView.widthAnchor.constraint(equalToConstant: 315).isActive = true
        containerView.heightAnchor.constraint(equalToConstant: 367).isActive = true
    }
    
    @IBAction func closeButtonTapped(_ sender: Any) {
        self.dismiss(animated: false, completion: nil)
    }
}

 

---

참고 문서

• [애플 개발자 문서] modalPresentationStyle :: Instance Property
• [애플 개발자 문서] UIModalPresentationStyle :: modalPresentationStyle 로 설정할 수 있는 값들

 

참고 블로그

• [삼쓰의 개발 블로그] iOS) View rounded + shadow 구현하기
• [ZeddiOS] iOS 13 ) UIModalPresentationStyle (1)
• [FLIP.LOG] [iOS] fullScreen? overFullScreen? over가 붙으면 무엇이 다를까 (UIModalPresentationStyle)