[ Swift ] UINavigationController

그전까지 간단한 속담 App을 만들어봤다.

 

이번에는 다른 App을 만들어보기 이전에 UINavigationController에 대해서 알아보자.

 

우선적으로 개념 설명을 위해서 Content View Controller 와 Container View Controller 에 대해서 언급하고 넘어가도록 하겠다.

 

Content View Controller 

• 화면을 구성하는 뷰를 직접 구현하고 관련된 이벤트를 처리하는 뷰 컨트롤러
• 흔히 StoryBoard 생성시 기본으로 생성되는 View Controller 라고 생각하면 편하다.

 

Container View Controller

• 하나 이상의 Child View Controller를 가지고 있다. 즉, 자식 뷰 컨트롤러를 가지고 있다.
• 하나 이상의 Child View Controller 를 과닐하고 레이아웃과 화면 전환을 담당한다.
• 화면 구성과 이벤트 관리는 Child View Controller 에서 한다.
• 즉, 여러개의 View Controller 를 가지고 있는 것이라고 생각하면 된다.
• Container View Controller는 대표적으로 Navigation Controller와 TabBar Controller가 있다.

 

Navigation Controller를 알아보기 전에 Navigation Controller가 포함하는 ViewController들에 대해서 확인을 해보았다.

이제 NavigationController에 대해서 간략히 알아봐 보자.

 

NavigationController는 계층 구조로 구성된 Content를 순차적으로 보여주는 Container View Controller 이다.

쉽게 이미지로 설명을 해보면

 

< Apple Developer의 이미지 >

우선 필자가 공부를 하면서 Apple Developer 문서를 통해서 이미지를 따왔다.

참고로 필자의 간단한 공부 내용이 부족하다 싶으면 아래의 URL을 통해서 Apple Developer 문서를 참고해서 추가 공부를 해도 좋을 듯 싶다.

 

Apple Developer Documentation

 

위의 이미지에서 보는 것과 같이 iPhone의 설정 앱이 NavigationController로 구현된 앱인 것을 확인할 수 있다.

이미지 자체가 영문 버전의 예전 이미지이지만 iPhone을 사용하는 사람들이라면 상당히 많이 본 화면임을 알 수 있다.

 

이미지를 좀더 자세히 설명을 하자면 Setting App에서 General을 선택하게 되면 General View Controller가 표기가 되며, 이전의 View Controller 는 안보이게 된다.

 

그리고 최상단 네비게이션 바에서 뒤로가기 버튼을 클릭할 경우에 다시 이전에 숨겨진 ViewController가 다시 나타나게 된다.

 

NavigationController는 Navigation Stack이라 불리는 정렬된 배열을 사용하여 Child View Controller를 관리한다.

 

배열의 첫 번째 View Controller는 root View Controller를 의미하고, Stack의 가장 밑에 있다는 것을 의미한다.

배열의 마지막 View Controller는 Stack의 최상단을 의미한다.

 

개발자는 segway를 사용하거나 또는 UINavigation Controller 메소드를 사용하여 Stack으로부터 View Controller를 추가하고, 제거할 수 있다.

 

사용자는 back 버튼을 사용하여 최상단 View controller를 제거할 수 있고 left edge swipe 제스쳐를 사용해서도 제거할 수 있다.

 

그럼 Navigation Stack을 어떻게 관리하는지 이미지를 통해 확인해보도록 하자.

 

Navigation Stack은 프로그래밍을 어느정도 아는 사람들과 같이 last in first out 구조인 Stack 구조이다.

즉, 마지막에 들어온게 가장 먼저 나간다는 뜻이다.

 

 

< Navigation Stack >

 

설정 화면은 Navigation View Controller의 첫 번째 화면이기 때문에 가장 아래에 쌓이게 된다.

즉, Root View Controller 이다.

 

그리고 알림 화면은 Child View Controller 이다. 설정화면에서 알림을 클릭하게 되면 알림화면이 표기된다. 

그러면 Navigation Stack에서 설정화면 위에 알림 화면이 쌓이게 되는 의미이다.

이부분을 Navigaion Stack에 Push했다고 말한다.

 

그리고 이후에 11번가 항목을 클릭했을 때에 알림화면이 Push가 된것 처럼 마찬가지로 Navigation Stack의 최상단에 쌓이게 된다.

 

이렇게 트리구조처럼 상위 카테고리에서 점차 하위 카테고리로 넓혀져 가는 구조라고 이해하면 된다.

 

그럼 이제 반대로 상단의 네비게이션 바에서 <알림 버튼을 다시 클릭했을 경우에는

 

< Navigation Stack >

이렇게 11번가 항목이 Navigation Stack에서 빠지게 된다. 이부분을 POP이라고 얘기한다.

위에서 설명했다 싶이 Stack 구조는 last in first out 구조이기 때문이다.

 

그럼 마찬가지로 알림화면에서 다시 <설정 버튼을 클릭하면 동일하게 Navigation Stack에서 알림 항목이 POP 된다고 이해를 하면 될것 같다.

그러면 Navigation Stack에는 Root View Controller인 설정 화면만 남게 된다.

 

이렇게 Navigation Controller는 Navigation Stack을 이용하여 ViewContorller의 화면 전환을 관리한다.

 

추가적으로 Navigation Bar에 대해서 확인을 해보도록 하자.

Navigation Bar는 Navigation Controller로 구현할 시에 화면 상단에 항상 표기되는 bar이다.

 

Root View Controller 외에 모든 View Controller에 back 버튼이 있기 때문에 사용자가 계층구조에서 다시 뒤로 갈 수 있도록 해준다.

 

< Navigation Bar >

해당 이미지도 Apple의 문서에서 따왔다.

 

Navigation bars - Navigation and search - Components - Human Interface Guidelines - Design - Apple Developer

 

보다 자세한 Navigation Bar에 대해서 내용을 알고 싶다면 Apple Developer 문서를 참고하는 것이 매우 좋을 듯 싶다.

 

Navigation Bar는 상단에 backitem Title / TopItem Title / TopItem rightBarButtonItem / TopItem Prompt가 있다.

 

위의 이미지에서 <Mailboxes 버튼이 backitem Title 이고, Inbox 텍스트가 현재 화면을 나타내는 TopItem Title을 의미한다.

TopItem rightBarButtonItem은 Edit 버튼을 의미한다.

또한 현재 위의 이미지에는 없지만 Inbox 위에 Navigation Bar Prompt를 설정할 수 있는 것이 TopItem Prompt 이다.

 

각각의 자식 View Controller 마다 서로 다른 Navigation Bar를 구성 할 수 있다.

 

이렇게 간단하게 NavigationController에 대해서 알아봤다.

 

우선 다른 App을 만들기 전에 개념을 파악을 하고 있어야함으로 이번 글에서는 간단히 개념 정리만 진행을 했다.

 

만약 추가적인 내용을 확인하고 싶다면 필자의 글에 링크가 되어있는 Apple Developer 문서를 참고하는 것이 좋을 듯 싶다.