UIViewController PopUp

위와 같은 팝업을 만들어 볼거에요(with. storyBoard)

 

1. viewController 'Attribute Inspector'에서

Transition Style은 Cross Dissolve

Presentation은 Over Full Screen으로 설정해줍니다.

2. 'Identity Inspector'에서 class를 연결시켜주고 storyboardID를 설정해줍니다. 저는 "pop"으로 해볼게요

3. ViewController에 전체를 덮는 뷰를 올려줍니다.(뒤에 까만뷰가 될거에요)

4. 그리고 팝업 내용이 있을 뷰를 원하는 위치에 올려줍니다(여기선 밑에서 위로 올라오는 하얀뷰가 됩니다)

5. 햐얀뷰의 제약중 bottom에 대해서만 밑으로 안보이게 내려줍니다

하얀뷰의 현재 높이가 200이라 했을 때 bottom을 -200으로 설정해주면 밑으로 내려가고 안보이게 돼요.

나중에 실행했을 때 이 값을 이용해서 밑에서 위로 올라오게 보이도록 할겁니다

6. 이제 해당 viewController의 swift 파일을 만들고

7. 까만뷰, 하얀뷰, 버튼 그리고 하얀뷰의 bottom layoutConstraint를 outlet으로 연결해줍니다.

8. 어떻게 보여질지 코드를 작성해 봅시다.

func show() {
  UIView.animate(withDuration: 0, delay: 0, options: .curveEaseInOut) {
    self.blackView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6)
  } completion: { _ in
    UIView.animate(withDuration: 0.5) {
      self.whiteViewBottom.constant = 0
      self.view.layoutIfNeeded()
    }
  } 
}

애니메이션을 이용해 까만뷰가 먼저 보여지고 나면 하얀뷰가 뒤따라 올라오는 코드입니다.

9. 이제 이 팝업을 불러내는 viewController.swift에서 popUp viewController를 불러봅니다.

guard let popUp = self.storyboard?.instantiateViewController(withIdentifier: "pop") as? PopUPVC else { return }
popUp.providesPresentationContextTransitionStyle = true
popUp.definesPresentationContext = true
self.present(popUp, animated: true)

 

이렇게만 해주면 끝 -