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

내비게이션 인터페이스의 개념

-계층적 구조의 화면 전환을 위해 사용되는 드릴 다운 인터페이스(drill-down interface) 입니다.

-드릴 다운 인터페이스: 각 선택할 수 있는 항목에 대한 세부항목이 존재하는 인터페이스

 

내비게이션 컨트롤러

-컨테이너 뷰 컨트롤러: 내비게이션 스택에 담겨서 콘텐츠를 보여주게 되는 뷰 컨트롤러들

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

-내비게이션 컨트롤러가 화면에 표시하는 두 개의 뷰

• 내비게이션 스택뷰에 포함된 최상위 컨텐트 뷰 컨트롤러의 콘텐츠를 나타내는 뷰
• 내비게이션 컨트롤러가 직접 관리하는 뷰(내비게이션바 또는 툴바)

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

 

내비게이션 스택

-내비게이션 스택은 뷰 컨트롤러를 담을 수 있는 배열과도 같습니다.

-push/pop을 통해 아이템(뷰 컨트롤러)을 관리합니다.

• push: 새로운 뷰 컨트롤러를 내비게이션 스택에 추가
• pop: 내비게이션 스택에 있는 뷰 컨트롤러를 삭제

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

 

내비게이션 스택을 구성하는 컨트롤러

-루트 뷰 컨트롤러: 내비게이션 스택에 가장 하위에 있는 뷰 컨트롤러로, 가장 먼저 스택에 추가된 뷰 컨트롤러입니다. 내비게이션 스택에서 pop되지 않습니다.

-최상위 뷰 컨트롤러: 내비게이션 스택의 가장 상위에 있는 뷰 컨트롤러로, 가장 마지막에 푸시된 뷰 컨트롤러입니다. 화면에 보여지게 되는 부분입니다.

 

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

내비게이션 스택의 푸시(push)

1. 가장 먼저 내비게이션 스택에 루트 뷰 컨트롤러만 들어가 있는 초기상태 입니다. (내비게이션 컨트롤러를 생성할 때 반드시 루트 뷰 컨트롤러가 설정되어 있어야 합니다.)

 

2. '뷰 컨트롤러1로 이동'이라는 버튼을 통해서 내비게이션 스택에 뷰 컨트롤러1을 푸시(push)합니다. 뷰 컨트롤러1의 인스턴스가 생성되고 내비게이션 스택에 추가됩니다. 뷰 컨트롤러1이 최상위 뷰 컨트롤러로써 화면에 보이게 됩니다.

 

3. '뷰 컨트롤러2로 이동'이라는 버튼을 통해서 내비게이션 스택에 뷰 컨트롤러2도 푸시합니다. 뷰 컨트롤러2의 인스턴스가 생성되고 내비게이션 스택에 추가됩니다. 뷰 컨트롤러2가 최상위 뷰 컨트롤러로써 화면에 보이게 됩니다. 여기서 주목할 점은 새로운 뷰 컨트롤러가 추가될 때도 아래에 있는 뷰 컨트롤러들이(인스턴스) 삭제되지 않고 유지되고 있다는 점입니다.

내비게이션 스택의 팝(pop)

1. 푸시 예제의 마지막 상태에서 상단 내비게이션바에 있는 뷰 컨트롤러1을(back button) 눌러서 뷰 컨트롤러2를 팝합니다. 뷰 컨트롤러2가 내비게이션 스택에서 삭제됩니다. 뷰 컨트롤러1이 다시 최상위 뷰 컨트롤러로써 화면에 보여지게 됩니다.

2. 내비게이션바에서 루트 뷰 컨트롤러를(back button) 눌러서 뷰 컨트롤러1을 팝합니다. 뷰 컨트롤러1이 메모리에서 해제되고 내비게이션 스택에서 삭제됩니다. 루트 뷰 컨트롤러가 최상위 뷰 컨트롤러가 되고 화면에 보여지게 됩니다. 루트 뷰 컨트롤러는 내비게이션 스택에서 팝 되지 않습니다. 상단에 내비게이션바를 통해서도 루트 뷰 컨트롤러를 팝 하는 버튼이 따로 생성되어 있지 않은 것을 확인할 수 있습니다.

 

 

 

UINavigationController 클래스

내비게이션 컨트롤러의 생성

// 내비게이션 컨트롤러의 인스턴스를 생성하는 메서드입니다.
// 매개변수로 내비게이션 스택의 가장 아래에 있는 루트 뷰 컨트롤러가 될 뷰 컨트롤러를 넘겨줍니다.
init(rootViewController: UIViewController)

내비게이션 스택의 뷰 컨트롤러에 대한 접근

// 내비게이션 스택에 있는 최상위 뷰 컨트롤러에 접근하기 위한 프로퍼티입니다.
var topViewController: UIViewController?

// 현재 내비게이션 인터페이스에서 보이는 뷰와 관련된 뷰 컨트롤러에 접근하기 위한 프로퍼티입니다.
var visibleViewController: UIViewController?

// 내비게이션 스택에 특정 뷰 컨트롤러에 접근하기 위한 프로퍼티입니다.(루트 뷰 컨트롤러의 인덱스는 0 입니다.)
var viewController: [UIViewController]

내비게이션 스택의 푸시와 팝에 관한 메소드

// 내비게이션 스택에 뷰 컨트롤러를 푸시합니다.
// 푸시 된 뷰 컨트롤러는 최상위 뷰 컨트롤러로 화면에 표시됩니다.
func pushViewController(UIViewController, animated: Bool)

// 내비게이션 스택에 있는 최상위 뷰 컨트롤러를 팝합니다.
// 최상위 뷰 컨트롤러 아래에 있던 뷰 컨트롤러의 콘텐츠가 화면에 표시됩니다.
func popViewController(animated: Bool) -> UIViewController?

// 내비게이션 스택에서 루트 뷰 컨트롤러를 제외한 모든 뷰 컨트롤러를 팝합니다.
// 루트 뷰 컨트롤러가 최상위 뷰 컨트롤러가 됩니다.
// 삭제된 모든 뷰 컨트롤러의 배열이 반환됩니다.
func popToRootViewController(animated: Bool) -> [UIViewController]?

// 특정 뷰 컨트롤러가 내비게이션 스택에 최상위 뷰 컨트롤러가 되기 전까지 상위에 있는 뷰 컨트롤러들을 팝합니다.
func popToViewController(_ viewController: UIViewController, 
		animated: Bool) -> [UIViewController]?

 

내비게이션 인터페이스를 구성하는 두 가지 방법

1. 스토리보드를 사용하여 내비게이션 인터페이스 구성하기

 

1. 스토리보드에서 내비게이션 컨트롤러에 포함할 뷰 컨트롤러를 선택합니다.
2. 메뉴에서 [Editor] - [Embed In] - [Navigation Controller]를 차례로 선택합니다.
3. 선택한 뷰 컨트롤러가 내비게이션 컨트롤러의 루트 뷰 컨트롤러가 되면서 내비게이션 컨트롤러가 생성됩니다.
4. 위의 방법 외에도 객체 라이브러리에서 내비게이션 컨트롤러를 드로그 앤 드롭해서 캔버스에 올릴 경우 테이블 뷰를 포함한 루트 뷰 컨트롤러가 생성되면서 내비게이션 컨트롤러가 만들어집니다.

 

2. 코드 작성을 통해 내비게이션 인터페이스 구성하기

 

1. 루트 뷰 컨트롤러가 될 뷰 컨트롤러를 생성합니다. 이 객체는 처음에 내비게이션 스택의 최상위 뷰 컨트롤러가 화면에 보이게 되고 내비게이션 바에 뒤로가기 버튼이 생성되지 않습니다.
2. `init(rootViewController: UIViewController)` 메서드를 통해 내비게이션 컨트롤러를 초기화하고 생성합니다.
3. 내비게이션 컨트롤러를 윈도우의 루트 뷰 컨트롤러로 설정합니다. 아래의 예시 코드를 살펴봅시다.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // 루트 뷰 컨트롤러가 될 뷰 컨트롤러를 생성합니다.
        let rootViewController = UIViewController()
        // 위에서 생성한 뷰 컨트롤러로 내비게이션 컨트롤러를 생성합니다.
        let navigationController = UINavigationController(rootViewController: rootViewController)
        
        self.window = UIWindow(frame: UIScreen.main.bounds)
        // 윈도우의 루트 뷰 컨트롤러로 내비게이션 컨트롤러를 설정합니다.
        self.window?.rootViewController = navigationController
        self.window?.makeKeyAndVisible()
        
        return true
    }

 

내비게이션 바의 구성

 

 

출처: www.boostcourse.org/mo326/lecture/16857/