[iOS 앱 프로그래밍] 회원가입 화면 구현 - 2. 화면의 전환 (1) 내비게이션 인터페이스

내비게이션 인터페이스

iOS 애플리케이션에서 화면전환을 위해 사용되는 여러 기법 중 하나. iOS에서 내비게이션 인터페이스는 주로 계층적 구조의 화면전환을 위해 사용되는 드릴 다운 인터페이스(drill-down interface)이다. 드릴 다운 인터페이스란 아래 그림과 같이 각 선택할 수 있는 항목에 대한 세부항목이 존재하는 인터페이스이다.

어떻게 구현하나? by 내비게이션 컨트롤러

 

내비게이션 컨트롤러의 mechanism : stack 개념

내비게이션의 컨트롤러는 2가지 뷰 요소를 화면에 띄운다 -> 컨텐트 뷰 & 내비게이션 바

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

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

 

 

내비게이션 스택은 내가 알고 있는 stack의 개념과 동일하다. 스택에 요소를 추가하면 최상단에 그 요소가 쌓이고 이전의 것들은 스택에 담겨있다. 다만, 여기서 주의할 점은 스택을 맨 처음 생성할 때 최하단에 루트 뷰 컨트롤러가 존재해야 한다

 

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

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

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

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

스택이기 때문에 push/pop으로 뷰 컨트롤러(아이템, 요소)들을 관리한다.

- 내비게이션 컨트롤러의 push와 pop의 메소드

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

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

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

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

 

화면 이동 = 최상단 뷰 컨트롤러 추가 또는 삭제 

화면 이동 : 코드로 구현, 사용자가 직접

1. 코드로 구현 : UINavigationController 클래스의 메소드 활용 or 세그(Segue)

2. 사용자 : back 버튼 or 왼쪽 가장자리 스와이프

 

화면 이동 시 새로운 화면으로 가면 스택에 뷰 컨트롤러2가 쌓인다. 그리고 이전 화면으로 가면 스택에서 뷰 컨트롤러2가 pop(삭제)되고 뷰 컨트롤러1의 화면이 나온다. (맨 밑에는 루트 뷰 컨트롤러가 존재한다)

 

 

PUSH와 POP을 누르면 각각 서로의 화면으로 이동한다.

 

PUSH를 누르면 오른쪽 화면으로 이동하는데 오른쪽 화면에 대한 코드 정보가 담긴 파일을 하나 새로 만들어 줘야 하고 오른쪽 화면과 새 파일의 클래스를 연결시켜주어야 오른쪽 화면을 통제하고 조작할 수 있다.

 

    @IBAction func popToPrev() {
        self.navigationController?.popViewController(animated: true)
    }

POP을 누르면 왼쪽 화면으로 가는 함수 코드이다.