[iOS] Navigation Interface 톺아보기

내비게이션 인터페이스란

iOS 에서 정말 많이 사용되는 인터페이스인데요, 주로 계층적 구조의 화면전환을 위해 사용되는 드릴 다운 인터페이스(drill-down interface)입니다.

드릴 다운 인터페이스??

그림처럼 페이지를 안으로 타고타고 가는 방식을 말합니다

 

내비게이션 인터페이스를 구현하기 위해서는 내비게이션 컨트롤러가 필요하구요

 

내비게이션 컨트롤러

내비게이션 컨트롤러는 2개의 뷰를  나타냅니다. 하나는 내비게이션 바(또는 툴바)이고 다른 하나는 내비게이션 스택에 쌓일 컨텐트 뷰입니다.

 

내비게이션 스택

컨텐트 뷰에 표시될 ViewController들의 배열입니다. 

이런 식으로 현재 보이는 페이지가 스택의 top에 위치하게 되고 뒤로 가기(버튼/스와이프)를 함에 따라 스택에서 pop을 하고, 스택의 최상위에 있는 뷰 컨트롤러를 나타냅니다.

 

실제로 구현을 해볼까요?

 

Story 에서 Navigation Controller를 선택합니다.

 

기존의 ViewController를 사용하고 싶다면 Embed In 에서 Navigation Controller를 추가하여 구현할 수 있지요

 

바로 써봅시다

세궈 연결을 해주고~

 

작동을 시켜보면..

 

내비게이션 스택이 어떻게 흘러가는지 같이 보겠습니다

코드로도 구현을 해보겠습니다.

 

AppDelegate.swift

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
    }

// 내비게이션 스택에 있는 최상위 뷰 컨트롤러에 접근하기 위한 프로퍼티입니다.
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]?

 

컨탠트 화면이 스택에 따라 변하는 데에 비해 내비게이션바 는 내비게이션 컨트롤러에 종속된 뷰 전체가 공유합니다.

 

내비게이션바

내비게이션바는 내비게이션 컨트롤러에 의해 생성되고, 최상위 뷰 컨트롤러가 변경될 때마다 내비게이션바가 업데이트 됩니다.

정리

• 내비게이션바는 내비게이션 인터페이스에서 상단에 표시됩니다.
• 내비게이션바는 내비게이션 아이템을 가질 수 있습니다.
• 뷰 컨트롤러가 전환될 때마다 내비게이션바의 콘텐츠들이(내비게이션 아이템) 바뀌지만 내비게이션바 자체는 내비게이션 컨트롤러가 관리하는 하나의 공통 객체입니다.
• 내비게이션바의 타이틀을 통해 현재의 위치(최상위 뷰컨트롤러)를 알 수 있습니다.

 

참고 : https://www.edwith.org/boostcourse-ios/lecture/16857/, https://developer.apple.com/