iOS의 다양한 뷰 전환 - 1. 모달 뷰 컨트롤러 전환과 효과

모달 뷰 (Modal View) 란?

모달 뷰(Modal View)란 iOS(iPhoneOS) 에서 제공하는 여러 개의 뷰를 전환하기 위한 아주 기본적인 뷰 관리 기법 중 하나입니다. 특히 모달 뷰 컨트롤러(Modal View Controller)는 현재 어플리케이션 흐름을 잠시 중단하고 사용자에게 무언가를 입력을 받게 하거나 표시한 후에 다시 원래의 흐름으로 되돌아가도록 흐름을 변경할 때 사용됩니다. 그림을 보며 설명하겠습니다. 아래 표시된 All Calendar / Add Event 간의 관계가 전형적인 모달 뷰 관계로 볼 수 있습니다.

 

일정을 하나 추가하기 위해서는 다음과 같은 절차가 필요합니다.

• Calender 화면에서 추가하기 버튼을 터치하여 Add Event 화면을 띄웁니다.
• Add Event 화면에서 일정을 입력합니다.
• Done 버튼을 터치하여 Add Event 를 종료시킵니다.
• Calender 화면으로 되돌아 옵니다.

위와 같이 사용자가 일정을 관리하다가  현재의 흐름을 잠시 중단하고 원래의 흐름으로 다시 되돌아 오도록 애플리케이션의 흐름을 구현하고자 할때 모달 뷰를 사용하는 것입니다. 참고로 모달 뷰 모델에서는 호출자(Caller)와 피호출자(Callee)간의 부모(Parent)와 자식(Child) 관계가 생깁니다.

모달 뷰 컨트롤러 띄우기
현재 애플리케이션 흐름에서 모달 뷰 컨트롤러를 띄우기 위해서는 부모 뷰의 인터랙션 내 아래와 같이 구현합니다. 

- (IBAction) buttonPressed:(id)sender
  {
      SecondViewController *viewController = [[SecondViewController alloc] init];    // 새롭게 띄울 뷰 컨트롤러 생성
      [self presentModalViewController:viewController animated:YES];  // 새로운 뷰 컨트롤러를 모달로 표시
  } 

모달 뷰 컨트롤러 닫기
모달 뷰를 닫고 원래의 흐름으로 되돌아 가기 위해서는 모달 뷰의 인터랙션 내 아래와 같이 구현합니다.

- (IBAction) buttonPressed:(id)sender
  {
      [self dismissModalViewControllerAnimated:YES];  // 현재 모달로 띄워진 뷰 컨트롤러를 닫음
  }

모달 뷰 컨트롤러 전환시 효과주기
iOS에서는 기본적으로 모달 뷰를 전환하기 위한 기본적인 전환 애니메이션을 제공합니다. 모달 뷰를 전환하기 위한 애니메이션 효과는 setModalTransitionStyle을 이용하여 아래와 같이 값을 설정하면 전환시 효과가 적용됩니다.

  -(IBAction)buttonPressed:(id)sender
   {
      SecondViewController *viewController = [[SecondViewController alloc] init];
      [viewController setModalTransitionStyle:UIModalTransitionStylePartialCurl];
      [self presentModalViewController:viewController animated:YES];
   }

  // UIModalTransitionStyleCoverVertical : 모달 뷰가 아래서 위로 덮으며 전환됩니다. (기본값)
  // UIModalTransitionStyleFlipHorizontal : 앞면의 부모 뷰가 회전되어 뒷면의 모달 뷰로 전환됩니다
  // UIModalTransitionStyleCrossDissolve : 부모 뷰가 서서히 사라짐과 동시에 모달 뷰로 전환됩니다.
  // UIModalTransitionStylePartialCurl : 부모 뷰가 종이처럼 휘어지며 모달 뷰로 전환됩니다. 

실행화면 - UIModalTransitionPartialCurl