[iOS/Swift] 커스텀 모달 만들기, Custom Modal Animation

모달 예시

 오늘은 위에 동작하는 모습과 같이 Custom Modal을 만들어 보겠습니다. 개발자마다 만드는 방법이 다양하게 있고 제가 사용하는 방법도 쉽게 만들 수 있는 방법이라 이미 아시겠지만 기록 차원에서 작성합니다.

 

 관련된 검색어로는 custom modal, half modal, modal 등이 있으니 찾아보시면서 원하는 결과를 얻으시면 될 것 같습니다. 처음 이걸 만든 이유는 그때 당시 실력이 없던 저는 남들이 만든 라이브러리를 사용했지만 원하는대로 디자인을 변경하는 부분에서 어려움을 겪었고 half-modal과 같은 방식으로도 구현이 필요해서 연습겸 만들어보자! 라는 생각으로 진행했습니다.

 

 요즘은 UISheetPresentationController | Apple Developer Documentation라고 iOS 15 부터 이런것도 생겼으니 half-modal 방식은 이걸 참고 해보시고.. 

 

 아무튼 우리는 half가 아닌 작~은 modal 창이 뜨길 원하는데요. 원리는 간단합니다. 'Button을 누르면 아래에서 올라오게 한다.' 사실 처음 하시는 분들은 응용법이 생각이 안나서 그렇지 이미 많이 해보신 분들은 바로 이해하셨다고 봅니다.

 

 기본적인 이해를 위해서

버튼을 만들고 showModalAction이라고 Action을 연결했습니다.

modal로 사용하고 싶은 View를 하나 생성했습니다. 그리고 modalView라는 이름으로 IBOutlet를 주었고 너비/높이/가운데 정렬을 제약조건을 걸었습니다. 보시면 바텀 하단 제약조건은 superview를 기준으로 0을 주었습니다.

 

다음은 modal을 닫기 위한 Button을 만들었습니다. 이제 modal을 숨길 예정입니다. 

 

 높이를 300으로 주었기 때문에 Bottom 제약조건을 -300으로 View를 숨겼습니다.

 

그럼 이렇게 어플을 실행시켜도 보이지 않고 잘 숨어있는 모습을 확인할 수 있습니다.

 이제는 애니메이션을 주기 위해서 Bottom Constraint 제약 조건을 IBOutlet으로 가지고 옵니다. 제약조건이 많아서 복잡하기 때문에 잘 가지고 와야합니다.

 

이제 showModalAction에 코드를 입력합니다.

// Bottom 제약조건 높이 조절
self.modalViewBottomConstraint.constant = self.view.frame.height / 2 - (self.modalView.frame.height / 2)
// 애니메이션 실행
UIView.animate(withDuration: 0.3, delay: 0, animations: {
    self.view.layoutIfNeeded()
}, completion: nil)

첫 번째 줄에서 제약조건을 변경합니다. 계산 식을 적용한 이유는

1. bottom 제약조건은 modal 아래를 기준으로 하기 때문에 우선 self.view 높이의 절반까지 올린다.

2. modal은 bottom superview 기준으로 self.view 절반까지 올라온다.

3. 여기까지하면 중앙을 기준으로 modal이 위로 올라간 모습이기 때문에 다시 조금 내려준다.

4. 그래서 modal 절반 높이만큼 다시 아래로 내려준다. (전체 화면 절반 높이 - 모달 화면 절반 높이)

그냥 단순하게 숫자를 주면 좋겠지만 기기마다 높이가 다르니 저런식으로 식을 세워서 사용해야합니다.

 

좌 : 계산식을 모두 적용한 모습 / 우 : (self.view / 2)만 적용한 모습

 

// 제약조건
self.modalViewBottomConstraint.constant = -self.modalView.frame.height
// 애니메이션
UIView.animate(withDuration: 0.3, delay: 0, animations: {
    self.view.layoutIfNeeded()
}, completion: nil)

closeButtonAction에는 다음과 같이 작성합니다. bottom 제약 조건을 modalView 높이만큼 내려줍니다.

여기까지만 작성해도 기본적으로 modal을 등장시키고 내릴 수 있습니다. 

 

여기서 공통적으로 적용된 코드가 있는데요

UIView.animate(withDuration: 0.3, delay: 0, animations: {
        self.view.layoutIfNeeded()
    }, completion: nil)

바로 애니메이션을 적용하는 코드입니다. 이것도 알아보면 너무 많이 때문에 간단하게 알아보겠습니다.

withDuration : 실행 시간입니다. 초를 입력해주면 그 시간동안 애니메이션이 작동합니다. 2를 주면 2초동안 modalView가 올라오고 있을 겁니다. 

delay : 지연 시간입니다. 3을 입력하면 3초후에 애니메이션이 시작됩니다. 

animations : 애니메이션이 수행되는 부분입니다. 저는 제약조건 변경하는 부분을 밖으로 빼긴했지만 안으로 넣어도 같이 작동합니다.

self.view.layoutIfNeeded : [iOS - swift] layoutIfNeeded() 이해하고 사용하기 (layoutSubviews , Update Cycle, Main Run Loop) (tistory.com) 여기가 더 정리가 잘 되어있으니 참고하시면되겠습니다.

 

이렇게 만들면 어느정도 완료이고 다음부터는 응용입니다. 저는 그림자용 View를 하나 더 만들어 투명도를 조작해 뒷 배경 흐림처리를 해주는 방법을 사용하기도하고 ViewController로 따로 작성하여 공통적으로 modalView를 사용하기도 합니다.