Navigation Controller

SwiftUI가 아닌 UIKit을 학습하면서 배운 과정을 내가 다시 보기 위해 정리해보기로 했다. 오늘은 Navigation Controller에 대해서 간단하게 구현해보며 배운 것을 정리해 보자!👍

 

---

 

1. UINavigation Controller 이란?

UINavigation Controller은 계층 콘텐츠 탐색을 위한 스택 기반 체계를 정의하는 컨테이너 컨트롤러이다. 말로 설명하자면 이해 하기 힘들 수 있으니 바로 예시 사진을 보자.

 

아이폰을 한번이라도 사용해본 사람이라면 쉽게 봤던 화면 이었을 것이다. 뷰 컨트롤러에서 항목을 선택하면 애니메이션을 사용하여 새 뷰 컨트롤러를 화면에 푸시하고 이전 뷰 컨트롤러를 숨겨 버린다.  

 

 

아래 이미지는 탐색 컨트롤러와 그 하위에서 관리하는 개체 간 관계를 보여준다. 아래 사진에서 중요한 것은 내비게이션 바 및 도구 모음 뷰의 내용이 변경되더라도 뷰 자체는 변경되지 않는다는 것이다. 실제로 변경되는 뷰는 제일 앞에 있는 사용자 지정 콘텐츠 뷰인 것이다. 

 

 

더욱 자세한 내용들은 공식 문서를 참고 해서 알아보도록 하자!

https://developer.apple.com/documentation/uikit/uinavigationcontroller

Apple Developer Documentation

 

---

2. 실습 

해당 실습에서는 정말 간단하게 UINavigation Controller를 구현해보는 과정만을 한번 해볼 것이다. 가장 먼저 제일 먼저 보이게 될 화면 A를 다음과 같이 만들어주었다. 해당 뷰에 버튼을 하나 테스트로 넣어주었다. 이 버튼을 이용하여 다음 페이지로 한번 넘어가게 된다. 버튼을 이어 주기 위해서 버튼을 클릭하고 Control버튼을 누르면서 마우스로 다음에 보여주고 싶은 뷰에 지정하고 Action 형태를 지정해주면 된다. 이제 저 버튼을 누르면 B페이지로 넘어가게 된다. 

가장 첫번째 A뷰

두번째 B뷰

근데 여기서 하나의 의문점 이대로 실행을 한다면 어떻게 될까? 이대로 실행 하면 되긴 한다. 하지만 우리가 하고자 했던 내비게이션 컨트롤러를 사용하지 않았기 때문에 모달 형태로 B페이지가 출력되게 된다.  아래 영상에서 한번 확인 해보자.

 

 

 

이제 이 상태에서 바로 내비게이션 컨트롤러를 이용해보자! 가장 먼저 A뷰를 잡아둔 상태에서 상단의 Editor를 누르면 Embed In이라는것이 보일것이다. 더 들어가보면 거기에는 우리가 찾고 있던 네비게이션 컨트롤러가 있는 것을 확인할 수 있을 것이다. 그대로 추가해 주면?!

 

 

사진과 같이 내비게이션 컨트롤러가 추가된 것을 확인할 수 있다. 사람마다 다른 화면을 구성을 하는 경우에는 다르게 나올 수도 있다. 

그리고 추가적으로 변경사항을 발견할 수 있는데 이전에는 B뷰에서 좌측상단에 아무것도 없었지만 컨트롤러를 추가하고 나니 뒤로 돌아갈 수 있는 Back이라는 버튼이 자동적으로 생성되었다. 영상으로 어떻게 작동하는지 확인해보자.

 

 

---

3. 주의사항 

진행하다 보면 제대로 설정을 해준 것 같은데 실행해보면 아무것도 뜨지 않고 백지상태인 경우가 있을 텐데 이때 보통의 경우 오류로 알려주지만 가끔 뭐가 뭔지도 모르는 경우가 생기기도 한다. 확인해야 할 것은 내비게이션 컨트롤러를 확인 해보면 다음과 같이 is inital view controller인지 여부를 확인 해봐야 한다. 이것이 풀려 있다면 Xcode는 "개발자야 어디서 나 시작해야해??" 같은 느낌으로 아무것도 보여주지 않는다.

 

 

---

오늘은 UIKit에서 네비게이션 컨트롤러를 사용하는 방법에 대해 정말 간단하게 알아보았다. SwiftUI를 중점적으로 공부하다 보니 스토리보드에 아직 적응을 하지 못하였지만, 확실한 것은 각각의 플랫폼마다의 장단점이 있는 것 같다. 현재는 모달과 Delegation에 대해서도 학습하는 중인데 알아갈수록 재밌는 것 같아서 계속 이어서 공부해봐야겠다! 오늘은 여기서 끝!👋