iOS) Presentation 과 Transition 그리고 Animation... (1)

iOS 어플리케이션을 사용하다 보면 화려하고 신기한 애니메이션 효과, 화면 전환 효과로 UI/UX의 중요성을 더욱 강조 시켜준다.

Transition과 Animation 기술을 연마하던 중 그 동안 무심코 썼던 VC간 화면 전환에 대해 정리할 필요가 있다고 느껴졌다. 사실 이 글을 쓰기 전까지도 presentation와 Transition의 명확한 구분이 가지 않았다..

iOS를 처음 접했을 땐 스토리보드를 통한 Segue를 사용 했다.

단순히 선을 연결하고 Navigation Controller에 속해 있다면 Show 아니라면 present modally를 선택했을 뿐이였다.

present modally를 선택하면 modalPresentationStyle이 등장 한다.
엥 근데 그 밑에 modalTransitionStyle도 뜬다.
뭐냐 이건...

다른걸 다 떠나서 기본부터 정리하자.

Presentation Context

vc간 화면 전환에서 다른건 다 몰라도 이거 하나 정도는 기억 할만 하다.
Presentation Context는 전환 될 VC의 Frame을 정해준다.
뷰 컨트롤러 계층을 따라서 올라가면서 presentation context로 지정된 vc를 찾는다.
navigation controller에 속해있다면 보통 navigation controller가 Presentation Context이고, 존재 하지 않는다면 rootVC로 선택된다.

View controller 전환

VC간 화면 전환이라고 하면 두 가지 카테고리로 나눠진다.
Show와 Modal이다.
엄밀히 말하자면 vc가 container VC에 Embeded 하여 container VC가 관리 하는 것과 직접 present 하는 것으로 나뉜다.

• Show
  Show는 기본적으로 navgation controller 속해 있는 VC간 화면 전환일 때 navigation stack안에 push를 해준다. Show Detail은 splitVC에서 detail 뷰를 나타 내는데 사용 된다. 즉, Show는 push다.
  show는 navigatio controller가 아닌 일반 VC간의 화면 전환에서는 일반적인 modal과 같다. 따라서 기본적인 modal presentation 방 식이라면 VC가 메모리에서 사라지지 않는다.
• presentation
  Modal은 vc 위에 다른 vc를 띄우는 것이다. 이는 modal present Style에 따라 vc간의 화면 전환 방식이 달라진다.

modal presentation style

case automatic
The default presentation style chosen by the system.
case none
A presentation style that indicates no adaptations should be made.
case fullScreen
A presentation style in which the presented view covers the screen.
case pageSheet
A presentation style that partially covers the underlying content.
case formSheet
A presentation style that displays the content centered in the screen.
case currentContext
A presentation style where the content is displayed over another view controller’s content.
case custom
A custom view presentation style that is managed by a custom presentation controller and one or more custom animator objects.
case overFullScreen
A view presentation style in which the presented view covers the screen.
case overCurrentContext
A presentation style where the content is displayed over another view controller’s content.
case popover
A presentation style where the content is displayed in a popover view.
case blurOverFullScreen
A presentation style that blurs the underlying content before displaying new content in a full-screen presentation.

대표적인 style을 뽑아 보자.

• fullScreen
  말그대로 화면을 꽉 채우는 것이고 이때 기존 vc는 메모리에서 사라진다.
• pageSheet
  기존 vc 위로 새로운 vc가 살짝 얹어져 있는 모양새로 이때 기존 vc는 메모리에서 사라지지 않는다.
• over ...
  over 접두어가 붙은 모든 present 방식 또한 기존 vc가 메모리에서 사라지지 않는다.
• popOver
  view의 위치와 크기를 직접 설정 해야한다. alert 대신 써도 좋을듯 하다.

 

• current Context
  위에 언급한 presentation Context 개념을 여기서 잘 써먹을 수 있다.
  예를 들어 navigation controller에 속해 있는 vc의 presentation context는 navigation controller이다. 따라서 navigation controller(navigation Bar)를 포함한 모든 scene이 전환 될 vc의 frame이 된다.
  var definesPresentationContext: Bool { get set }
  기본적으로 모든 ViewController는 definesPresentationContext 프로퍼티를 가지고 있고 false가 default이다. definesPresentationContext이란 true로 선언된 vc를 presentation context로 만들어 준다.
  viewcontroller 계층을 찾아 올라가면서 가장 먼저 true로 되어있는 프로퍼티를 presentation context로 지정한다. 즉 현재 vc의 definesPresentationContext를 true로 바꿔 놓는다면, 자기 자신부터 찾아 올라가기 때문에 presentation context로 지정 된다.

또한 presentation 방식은 아이폰 보다는 큰 화면인 아이패드에서 실행 할 때 더욱 잘 나타난다.

Transition

사전적 정의로 transition은 전환이다.
말 그대로 presentationStyle을 어떤식으로 전환 시킬지를 나타내는 개념이다.
Presentation과 Transition을 영어로 놓고 봤을땐 알겠는데 한글로 옮겨 적으려니까 매우 추상적이다.
즉, presentation은 vc를 어떤 frame으로 나타낼지에 대한 방법이고 transition은 그 presentation을 어떤 애니메이션으로 전환 시킬 것인지를 설정 해주는 개념이다.