[iOS] 내비게이션 인터페이스

Navigation Interface

 

내비게이션 인터페이스 (Navigation Interface) 란?

iOS에서 내비게이션 인터페이스는 주로 계층적 구조의 화면전환을 위해 사용되는 드릴 다운 인터페이스(drill-down interface)이다.

드릴 다운 인터페이스란 아래 그림과 같이 각 선택할 수 있는 항목에 대한 세부항목이 존재하는 인터페이스이다.

내비게이션 인터페이스는 내비게이션 컨트롤러를 통해 구현한다.

 

 

 

내비게이션 컨트롤러 (Navigation Controller)

내비게이션 컨트롤러는 컨테이너 뷰 컨트롤러로써, 내비게이션 스택을 사용하여 다른 뷰 컨트롤러를 관리한다.

내비게이션 스택에 담겨서 컨텐츠를 보여주는 뷰 컨트롤러들을 컨텐츠 뷰 컨트롤러라고 한다. 

내비게이션 컨트롤러는 두 개의 뷰를 화면에 표시한다.

1. 내비게이션 스택뷰에 포함된 최상위 (= 현재 화면에 나타나 있는) 컨텐츠 뷰 컨트롤러의 컨텐츠를 나타내는 뷰

2. 내비게이션 컨트롤러가 직접 관리하는 뷰(내비게이션 바 또는 툴바)

추가로 내비게이션 인터페이스의 변화에 따른 특정 액션을 동작하도록 하기 위해 내비게이션 델리게이트 객체를 사용할 수 있다. 

 

 

---

여기서 잠깐 ! ! ! 

 

컨테이너 뷰 컨트롤러 (Container View Controller) ?

하나 이상의 뷰 컨트롤러를 가지고, 이 뷰 컨트롤러 간의 연결 관계를 관리한다.

뷰 컨트롤러에서 다른 뷰 컨트롤러로 자연스럽게 이어지도록 트랜지션을 담당하고, 레이아웃 또한 관리한다.

• Navigation Controller

• TabBar Controller

• Split View Controller

• Page View Controller

• System Container View Controller 

 

컨텐츠 뷰 컨트롤러 (Contents View Controller) ?

화면을 구성하는 뷰를 직접 구현하고 관련된 이벤트를 처리하는 뷰 컨트롤러 (우리가 생각하는 기본적인 뷰 컨트롤러)

• View Controller

• Table View Controller

• Collection View Controller

---

 

다시 돌아와서 ..

 

내비게이션 스택 (Navigation Stack) 이란?

내비게이션 스택은 뷰 컨트롤러를 담을 수 있는 배열과도 같으며, 내비게이션 컨트롤러에 의해 관리된다.

가장 먼저 스택에 추가된, 즉 스택의 가장 하위에 있는 뷰 컨트롤러는 내비게이션 컨트롤러의 루트 뷰 컨트롤러가 된다.

루트 뷰 컨트롤러는 내비게이션 스택에서 pop 되지 않는다.

가장 마지막에 push 된, 즉 가장 상위에 있는 뷰 컨트롤러는 최상위 뷰 컨트롤러로 화면에 나타난다. 

내비게이션 스택은, push / pop 을 통하여 뷰 컨트롤러들을 관리한다.

새로운 뷰 컨트롤러를 스택에 push 하거나, 스택에 있는 뷰 컨트롤러를 삭제하기 위해 pop 을 사용한다.

내비게이션 스택에 push 된 각 뷰 컨트롤러들은 자신이 가지고 있는 뷰 계층 구조를 통해 애플리케이션에 컨텐츠를 표시한다.

 

 

내비게이션 스택에서의 화면 이동

UINavigationController 클래스의 메소드 또는 세그(segue)를 사용하여 내비게이션 스택의 뷰 컨트롤러를 추가/삭제할 수 있다.

또한, 앱 실행 중 사용자가 내비게이션 인터페이스의 back 버튼을 사용하거나, 화면을 swipe 하여 스택에 있는 최상위 뷰 컨트롤러를 삭제하고 그 아래에 가려져 있던 뷰 컨트롤러의 컨텐츠를 보여줄 수 있다.

 

 

내비게이션 스택의 Push

내비게이션 스택에 새로운 뷰 컨트롤러가 푸시될 때, UIViewController 인스턴스가 생성되고, 스택에 추가된다.

왼쪽부터 1, 2, 3

 

1. 내비게이션 스택에 루트 뷰 컨트롤러만 들어가 있는 초기상태이다. 

(내비게이션 컨트롤러를 생성할 때는 반드시 루트 뷰 컨트롤러가 설정되어 있어야 함!)

 

2. '1로 이동' 버튼을 통해 스택에 뷰 컨트롤러 1을 push 한다. 

그러면 뷰 컨트롤러 1의 인스턴스가 생성되고 스택에 추가된다.

뷰 컨트롤러1이 스택 최상위에 위치하게 되고, 화면에 나타난다.

 

3. '2로 이동' 버튼을 통해 스택에 뷰 컨트롤러2를 push 한다. 같은 방식으로 뷰 컨트롤러 2가 화면에 나타난다. 

새로운 뷰 컨트롤러가 추가될 때도 아래에 있는 뷰 컨트롤러(인스턴스)들이 삭제되지 않고 유지된다는 것이 포인트 !

 

 

내비게이션 스택의 pop

스택에 존재하는 뷰 컨트롤러가 pop 될 때, 생성되었던 UIViewController의 인스턴스는 다른 곳에서 참조되고 있지 않다면 메모리에서 해제되고 스택에서 삭제된다.

왼쪽부터 1, 2

1. 상단 내비게이션 바에 있는 '< 뷰 컨트롤러 1' 을 눌러서 뷰 컨트롤러2를 pop 하면, 스택에서 삭제된다. (push 예제의 3번째 사진)

다시 뷰 컨트롤러1이 최상위 뷰 컨트롤러가 되므로, 화면에 나타난다.

 

2. 같은 방식으로 뷰 컨트롤러1을 pop 하면, 루트 뷰 컨트롤러가 최상위 뷰 컨트롤러가 되어 화면에 나타난다.

루트 뷰 컨트롤러는 내비게이션 스택에서 pop 되지 않는다.

(내비게이션 바에도 back 버튼이 생성되어 있지 않음!!!)

 

 

내비게이션 바의 구성

내비게이션 바는 내비게이션 컨트롤러의 관리를 받는 모든 뷰 컨트롤러의 상단에 표시된다.

최상위 뷰 컨트롤러가 변경될 때마다 내비게이션 컨트롤러는 내비게이션 바를 업데이트 한다. 

• 내비게이션 바는 내비게이션 인터페이스에서 상단에 표시된다.

• 내비게이션 바는 내비게이션 아이템을 가질 수 있다.

• 뷰 컨트롤러가 전환될 때마다 내비게이션 바의 컨텐츠 (내비게이션 아이템) 들이 바뀌지만, 내비게이션 바 자체는 내비게이션 컨트롤러가 관리하는 하나의 공통 객체이다.

• 내비게이션 바의 타이틀을 통해 현재 위치(최상위 뷰 컨트롤러)를 알 수 있다.