[iOS]3주차 - navigation, modal, controller

내비게이션 인터페이스

앱의 화면 전화를 위해 사용되는 기법 중 하나로, 주로 계층적 구조의 화면전환을 위해 사용되는 드릴 다운 인터페이스(선택 항목에 대한 세부항목이 존재하는 인터페이스)입니다. 스토리보드를 사용하거나 코드 작성을 통해 구성할 수 있습니다.

내비게이션 컨트롤러

컨테이너 뷰 컨트롤러로, 내비게이션 스택을 사용하여 다른 뷰 컨트롤러를 관리하며 두 개의 뷰를 화면에 표시합니다.

1. 내비게이션 스택뷰에 포함된 최상위 컨텐트 뷰 컨트롤러의 컨텐츠를 나타내는 뷰
   • 컨텐트 뷰 컨트롤러: 내비게이션 스택에 담겨 콘텐츠를 보여주는 뷰 컨트롤러
2. 내비게이션 컨트롤러가 직접 관리하는 뷰(내비게이션바, 툴바)

내비게이션 스택

뷰 컨트롤러는 담을 수 있는 배열과 같습니다. 푸시(push)와 팝(pop)을 통해 뷰 컨트롤러를 관리합니다. 내비게이션 스택에 푸시된 뷰 컨트롤러는 자신의 뷰 계층 구조를 통해 콘텐츠를 표시하고, 팝된 뷰 컨트롤러는 삭제됩니다. 가장 하위의 뷰 컨트롤러는 내비게이션 컨트롤러의 루트 뷰 컨트롤러가 되며, 팝(pop)되지 않습니다. 가장 상위의(가장 마지막에 푸시된) 뷰 컨트롤러는 최상위 뷰 컨트롤러로 화면에 보입니다.

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

• UINavigationController 클래스의 메서드 또는 세그(segue, 스토리보드에서 한 화면에서의 다른 화면으로의 전환)를 사용하여 네비게이션 스택의 뷰 컨트롤러를 추가/삭제
• 앱 실행 중 사용자가 뒤로가기 버튼을 사용하거나 왼쪽 가장자리를 swipe하면 스택의 최생위 뷰 컨트롤러를 삭제하고 그 아래의 뷰 컨트롤러 콘텐츠를 게시

내비게이션 스택의 push

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

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

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

내비게이션바의 구성

내비게이션바는 내비게이션 컨트롤러에 의해 생성됩니다. 내비게이션바는 내비게이션 컨트롤러의 관리를 받는 모든 뷰 컨트롤러의 상단에 표시됩니다. 최상위 뷰 컨트롤러가 변경될 때마다 내비게이션 컨트롤러는 내비게이션바를 업데이트 합니다.

모달

사용자의 이목을 끌기 위해 사용하는 화면전환 기법으로, 모달로 보이는 화면을 사라지게 하려면 반드시 특정 선택을 해야 합니다. 그래서 정보의 흐름을 가지고 화면 이동을 한다기보다는 꼭 이목을 끌어야 하는 화면에서 사용합니다.

뷰 컨트롤러 나타내기

1. 컨테이너뷰 컨트롤러에 임베드
2. 프레젠테이션

뷰 컨트롤러의 나타내기(present) 지원 기능은 UIViewController 클래스에 내장되어 있으며 모든 뷰 컨트롤러 객체에서 사용할 수 있습니다.

프레젠테이션 및 전환 프로세스(The Presentation and Transition Process)

UIKit의 프레젠테이션 기능으로 적은 코드도 애니메이션을 사용해 새로운 뷰 컨트롤러를 표시할 수 있습니다. 코드를 작성하거나 세그를 사용하여 구현할 수 있습니다.

프레젠테이션 스타일

• 전체화면
• 팝오버 스타일
• 현재 컨텍스트 스타일
• 커스텀 프레젠테이션
• 전환

뷰 컨트롤러를 나타내기 VS 보여주기(Presenting VS Showing a View Controller)

UIViewController 클래스는 뷰 컨트롤러를 표시하는 두가지 방법을 제공합니다.

1. showViewController:sender:와 showDetailViewController:sender:메서드 : 가장 적응성이 우수하고 유연한 방법입니다.
2. presentViewController:animated:completion:메서드 : 뷰 컨트롤러를 항상 모달 방식으로 표시

• 나타내기는 다음과 같은 방법으로 프레젠테이션을 시작합니다.
  • 세그 사용, showViewController:sender: 또는 showDetailViewController:sender:메서드를 사용, presentViewController:animated:completion:메서드를 호출
• 보여주기는 show(_:sender:) 와 showDetailViewController(_:sender:) 메서드를 사용합니다.
  • UIKit은 showViewController:sender: 와 showDetailViewController:sender: 메서드에 대한 호출을 나타내는 뷰 컨트롤러(presenting view controller)에 전달합니다. 그런 다음, 해당 뷰 컨트롤러는 프레젠테이션을 가장 효과적으로 수행할 방법을 결정하고, 필요할 경우 프레젠테이션 및 전환 스타일을 변경할 수 있습니다.
• 뷰 컨트롤러를 모달로 표시할 수 있습니다.
• 팝오버에 뷰 컨트롤러를 나타낼 수 있는데, 모달 프레젠테이션 스타일을 UIModalPresentationPopover로 설정한 후 팝오버 관련 속성을 추가적으로 구성해야 합니다.

나타난 뷰 컨트롤러 닫기

프레젠테이션 뷰 컨트롤러의 dismiss(animated:completion:) 메서드를 호출하여 수행할 수 있습니다.

다른 스토리보드에서 정의된 뷰 컨트롤러 나타내기(Presenting a View Controller Defined in a Different Storyboard)

다른 스토리보드에 저장된 뷰 컨트롤러를 나타내고자 할 경우 다음과 같이 뷰 컨트롤러를 명시적으로 표시하기 전에 먼저 인스턴스화 해야합니다.

let storyboard: UIStoryboard = UIStoryboard(name: "SecondStoryboard", bundle: nil)
if let myViewController: MyViewController = storyboard.instantiateViewController(withIdentifier: "MyViewController") as? MyViewController {
	// 뷰 컨트롤러를 구성 합니다.
	
	// 뷰 컨트롤러를 나타냅니다.
	self.present(myViewController, animated: true, completion: nil)
}

뷰의 상태변화 감지 메서드

뷰가 화면에 보이는 상태가 변화할 때 호출되는 메서드입니다.

• func viewDidLoad(): 뷰 계층이 메모리에 로드된 직후 호출되는 메서드
• func viewWillAppear(_ animated: Bool): 뷰가 뷰 계층에 추가되고 화면이 표시되기 직전에 호출되는 메서드
• func viewDidAppear(_ animated: Bool): 뷰가 뷰 계층에 추가되어 화면이 표시되면 호출되는 메서드
• func viewWillDisappear(_ animated: Bool): 뷰가 뷰 계층에서 사라지기 직전에 호출되는 메서드
• func viewDidDisappear(_ animated: Bool): 뷰가 뷰 계층에서 사라진 후 호출되는 메서드

뷰의 레이아웃 변화 메서드

뷰 생성 이후 레이아웃 변화가 생길 시 호출되는 메서드입니다.

• func viewWillLayoutSubviews(): 뷰가 서브뷰의 레이아웃을 변경하기 직전에 호출되는 메서드
• func viewDidLayoutSubviews(): 서브뷰의 레이아웃이 변경된 후 호출되는 메서드

스크롤뷰

UI 컴포넌트 창에서 scroll view를 가져와 사용합니다.

스크롤이 가능한 컨텐트 뷰를 제공해야 제대로 작동합니다. 컨텐트 레이아웃으로 스크롤 가능한 사이즈를 조절하고, 프레임 레이아웃으로 부모뷰와 관련있는 스크롤뷰의 사이즈를 조절합니다.

스크롤뷰 안에 들어가는 내용물과 탑, 바텀 앵커를 컨텐트 레이아웃의 바텀, 탑 앵커와 일치시켜야 합니다.

스크롤뷰 적용하기

1. 스크롤뷰 크기와 위치를 잡습니다.
2. UIview로 컨테이너 뷰를 잡으면 편리합니다.
3. 컨텐트 레이아웃으로 스크롤 가능한 영역을 설정합니다.
4. 스크롤뷰 안에 들어가는 컨텐츠의 앵커와 컨텐트 레이아웃의 앵커를 일치시킵니다.
5. 프레임 레이아웃 가이드와 컨테이너 뷰를 맞춰 스크롤 가능한 영역을 조절합니다.

 

[참고 자료]

https://www.boostcourse.org/mo326/lecture/16857?isDesc=false 

https://youtu.be/MXJffcoWRlw