nota's story

뷰를 전환할 때 모달 뷰(Modal View) 형태로 띄우고 싶을 경우를 위해 포스팅을 해본다. 해놓고 나니 완전 기초 코드였고 도대체 내가 왜 헤맸을까 싶기도 했지만, 처음에는 모달 뷰라는 것이 뭔지도 몰랐고 어버버버 하다가 구글링에 구글링을 거듭해 겨우 해냈던거 ㅜㅜ

0. 목표

우선 하려고 하는 바를 정리해보면, 뷰를 2개 만들고, 뷰1에서 버튼을 클릭하면 뷰2가 모달 뷰로 나타나도록 하고 여기에 전환 효과를 살짝 넣어보는 것이다. 그리고 뷰2에서 닫기 버튼을 클릭하면 모달 뷰가 사라지고 다시 뷰1이 나타나게 한다.

1. 뷰 2개 생성하기

뷰를 2개 만들어준다. 처음에 프로젝트를 생성할 때 view based project로 생성하면, "프로젝트명ViewController"와 함께 스토리보드 혹은 xib파일이 생성되니 이미 뷰 1개는 만든 것이다. 그리고 뷰 하나 추가는 New File을 생성할 때 View Controller Subclass로 생성하면 .h, .m, .xib파일이 하나씩 생성된다. 이로써 뷰 2개 생성은 완료! 아래 코드에서는 편의상 뷰1의 뷰컨트롤러는 뷰1.h, 뷰1.m라 하고, 뷰2의 뷰컨트롤러는 뷰2.h, 뷰2.m 이라고 하자.

2. 뷰1 헤더파일(뷰1.h)에 메서드 선언

이 메서드는 뷰1의 스토리보드나 xib에 만들 버튼에 연결할 메서드이다. 헤더파일에 선언 한 다음에 스토리보드나 xib에서 버튼 만들고, control + 클릭해서 touch on inside 오른쪽 원 부분 클릭하고 끌어서 popupSetting에 연결하면 된다.

3. 뷰1 구현파일(뷰1.m)에 메서드 정의

일단 뷰2를 모달 뷰로 띄울 것이기 때문에, 뷰2.h를 임포트!

메서드 내부에는 딱 저 3줄만 있으면 된다. 심지어 2번째 줄은 전환 효과를 위한 것이고, 전환 효과를 디폴트로 주고 싶으면 굳이 입력하지 않아도 된다.

4. 뷰2 헤더파일(뷰2.h)에 메서드 선언

모달 뷰로 사용될 뷰2에는 해당 모달 뷰를 닫기 위한 버튼을 만든다. 위의 뷰1에서 했던 것 처럼, 메서드를 생성하고 버튼에 메서드를 연결시키면 된다.

5. 뷰2 구현파일에 메서드 정의

모달 뷰 닫기 버튼에 대한 메서드는 심지어 단 한 줄!

이렇게 한 후에 빌드를 해보면 시뮬레이터에서 모달 뷰가 아름답게 떴다가 사라졌다가 하는 것을 볼 수 있다. 잘 안 되면 아마 버튼과 메서드를 연결을 시키지 않아서일 가능성이 높음...

** 모달뷰 전환효과 더 알아보기

기본적으로 사용할 수 있는 모달 뷰 효과는 총 4가지이다. 위에서 이미 사용한 효과는 종이를 말아 올리는 듯한 효과이고, 아래에 있는 3개 효과도 추가로 있다. (디폴트는 CoverVertical이다.)