UIViewController를 이용한 Bottom Popup만들기

요즘 신규로 앱을 만들거나 리뉴얼을 하는 앱들에게 많은 영향을 주는 대표적인 앱이 토스 또는 카카오뱅크인듯. 

하단에서 스르르 하고 올라오는 바텀팝업(Bottom Popup)이 인기를 끌고 있다. 현재 진행중인 프로젝트에서도 대부분 사용자 선택이나 약관들을 이 팝업을 통해 노출하고 있다. 

어제 디자인팀에서 새롭게 추가된 Bottom Popup을 제시했다. 날짜선택 피커뷰를 바텀팝업형태로 제작을 해 달라는 것. 

프로젝트팀 다른 멤버가 이미 만들어놓은 바텀팝업을 따라해서 만들었는데 영 이상하길래 그 차이가 뭔가? 했더니 UIViewController의 Transition Type과 Presentation의 차이때문에 그런 것이다. 

바텀팝업은 일반적으로 UIViewController에서 원하는 모양대로 만들면 되고 이 Controller를 뛰울때는 ViewController의 present()를 이용하면 된다.  

우선, 바텀팝업을 만드는 UI적인 요소는 

1. 뷰컨트롤러의 가장 바닥 뷰(self.view)의 백그라운드를 clearColor로 지정. 

2. UIImageView을 하나 넣고 크기는 self.view와 동일하게 설정, backgroundColor = UIColor.black, alpha = 0.7 로 설정 

3. 팝업영역이 될 UIView를 하나 추가(UIImageView위에) 그 크기는 원하는 만큼 잡고 IBOutlet을 baseView로 잡는다. 오토레이아웃은 좌우여백 0, 하단 여백 0로 잡고, 하단 여백을 IBOutlet으로 잡는다. baseViewBottomConstraint = 0 

4. BaseView영역에 디자인을 입힌다. 

5. viewDidLoad에서 baseView의 코너를 잡는다. 
UIRectCorner로 View.layer.maskCorners = , View.layer.borderWidth = , View.layer.borderCol.or = 를 이용해서 적당한 수치를 주고 baseView를 둥글게 만들면 된다. 

6. ViewWillAppear에서 baseViewBottomConstraint = - 500 (화면에서 안보일정도로...) 잡아 주고 난 다음 

7. viewDidAppear에서 baseViewBottomContraint = 0을 잡는 애니메이션을 시작한다. 
self.baseViewBottomConstraint = 0
UIView.animate(withDuration: 0.3) {
    self.view.layoutIfNeeded()
}
숨길때는 baseViewBottomConstraint = -500 을 애니메인션으로 적용하면 스르르 사라지는 효과를 만들 수 있다. 

8. 가장 중요한 것! 
UIViewController의 present()의 기능을 바꿔주는 것이다. 위에서 설명한 두 가지 옵션을 변경하면 present() 본연의 아래에서 위로 올라오는 애니메이션 대신 자연스럽게 나타났다 사라지는 효과를 가질 수 있다. 

사실 이 포스팅을 작성하는 주된 목적이 바로 아래 두 설정이다. 

ViewController의 Show the Attributes inspector의 하단에 Transition Style을 Cross Dissolve로 변경하고 Presentation을 Over Full Screen으로 변경하면 된다. 

 

별 내용은 아니지만, 다음을 위해 기록해둔다. 

끝.