2. 모달

정의

모달이란, 사용자의 이목을 끌기 위해 사용하는 화면전환 기법입니다.

화면 전환 기법이라고 표현했지만 사실 이목을 집중해야 하는 화면을 다른 화면 위로 띄워(presenting) 표현하는 방식입니다.

모달로 보이는 화면을 사라지게 하려면 반드시 특정 선택을 해야한다는 특징이 있습니다. 그래서 모달은 내비게이션 인터페이스와 달리 정보의 흐름을 가지고 화면을 이동한다기보다는 "꼭 이목을 끌어야하는 화면"에서 사용합니다.

보통 모달로 표현된 화면은 단순하고 사용자가 빠르게 처리할 수 있는 내용을 표현합니다.

Presenting a View Controller

뷰 컨트롤러를 화면상에 나타내는 방식은 2가지

1. 컨테이너뷰 컨트롤러에 임베드
2. 프레젠테이션을 통해 나타내기

프레젠테이션 및 전환 프로세스

• 프레젠테이션 스타일

• 전체화면 프레젠테이션 스타일

  

• 팝오버 스타일 (popover style)

  추가정보, 포커스, 선택한 객체와 관련된 항목 목록을 표시하는데 유용

  팝업 뷰 외부에 탭을 하게되면 자동으로 팝업이 닫힙니다.

  

• 현재 컨텍스트 스타일

  

• 커스텀 프레젠테이션 스타일

  정의한 커스텀 스타일을 사용하여 뷰 컨트롤러를 표시할 수 있습니다.

• 전환 스타일

  뷰 컨트롤러를 표시하는데 사용하는 애니메이션 유형을 결정합니다.

  애니메이터 객체와 전환 델리게이트를 사용하여 커스텀 전환 과정을 생성할 수 있습니다.

  아래는 표준 슬라이드 업 전환 예시입니다.

  

표시하기 VS 보여주기

1. 뷰 컨트롤러 표시하기

• segue 사용하여 표시하기

• showViewController:sender: 메서드

• showDetailViewController:sender: 메서드

• presentViewController:animated:completion:메서드

  → 이건 항상 모달 방식으로 표시합니다.

2. 뷰 컨트롤러 보여주기

• show(:sender:) 메서드
• showDetailViewController(:sender:) 메서드

1. 나타나는 뷰 컨트롤러 객체를 만듭니다. 뷰 컨트롤러를 생성할 때, 작업을 수행하는데 필요한 모든 데이터의 초기화는 여러분의 책임입니다.
2. 새로운 뷰 컨트롤러의 modalPresentationStyle 프로퍼티를 선호하는 프레젠테이션 스타일로 설정합니다.
3. 뷰 컨트롤러의 modalTransitionStyle 프로퍼티를 원하는 전환 애니메이션 스타일로 설정합니다.
4. 현재 뷰 컨트롤러의 showViewController:sender: 와 showDetailViewController:sender: 메서드를 호출하세요.

3. 뷰 컨트롤러를 모달로 표시하기

1. 나타나는 뷰 컨트롤러 객체를 만듭니다. 뷰 컨트롤러를 생성할 때, 작업을 수행하는데 필요한 모든 데이터의 초기화는 여러분의 책임입니다.
2. 새로운 뷰 컨트롤러의 modalPresentationStyle 프로퍼티를 선호하는 스타일로 설정합니다.
3. 뷰 컨트롤러의 modalTransitionStyle 프로퍼티를 원하는 전환 애니메이션 스타일로 설정합니다.
4. 현재 뷰 컨트롤러의 presentViewController:animated:completion: 메서드를 호출합니다.

4. 팝오버에 뷰 컨트롤러 나타내기

팝오버를 나타내려면 추가적인 구성이 필요합니다. 먼저 모달 프레젠테이션 스타일을 'UIModalPresentationPopover'로 설정해야합니다. 이후 속성을 구성할 수 있습니다.

• 뷰 컨트롤러의 preferredContentSize 프로퍼티를 이용해 원하는 크기로 설정할 수 있습니다.
• 뷰 컨트롤러의 popoverPresentationController 프로퍼티에서 접근할 수 있는 연관된 UIPopoverPresentationController 객체를 사용하여 팝오버 고정 점(popover anchor point)을 설정할 수 있습니다.

5. 나타난 뷰 컨트롤러 닫기

dismiss(animated:completion:) 메서드 호출하기

@IBAction func dismissModal(){
		self.dismiss(animated: true, completion: nil)
}

---

참고

화면의 전환 - 모달