UIKit) Navigation Controller
이 글의 전반적인 내용은 KXCoding을 참고하였습니다.
글에서 VC는 View Controller의 약자입니다.
Navigation Controller
Navigation Controller 개요
네비게이션 컨트롤러는 계층 적 콘텐츠를 탐색하기위한 스택 기반 체계를 정의하는 컨테이너뷰 컨트롤러이다.
class UINavigationController: UIViewController
네비게이션 컨트롤러는 계층구조로 구성된 content를 순차적으로 보여주는 Container View Controller이고,
탐색으로 앱의 Content를 보여주기 적절하다.
그리고 Child View Controller를 하나이상 추가해야한다.
Child 목록은 배열로 관리하며 스택형식으로 구현되어있다. ( Navigation Stack)
스택은 화면이 바뀌는 것을 PUSH, POP 형식으로 표현한다.
네비게이션 컨트롤도 뷰 컨트롤러 이기 때문에 Root VC를 가지고 있다.
가장 먼저 추가된 화면은 Root VC이고, 가장 마지막에 추가된 컨트롤러는 TopVC이다.
네비게이션 컨트롤 Root View의 상단에는 Navigation Bar가 항상 표시된다.
하단에는 Tool Bar가 표시되고 사용자가 지정해서 사용할 수 있다.
두 Bar는 커스텀을 할 수 있고 버튼을 통해 VC이동 또는 검색기능도 구현할 수 있다.
두 Bar 사이의 나머지 영역에는 TopVC가 표시된다.
네비게이션 컨트롤러를 임베드 하는 방법은 세가지가 있다.
-
Xcode 툴바에서 Editor - Embed In - Navigation Controller 선택
-
cmd + shift + L 을 눌러 Navigation Controller를 인터페이스빌더에 드래그 배치
-
임베드 할 VC를 선택 후 하단 우측에서 선택
화면 전환 구현 (Push & Pop)
루트뷰로 연결된 VC에는 네비게이션 아이템을 설정할 수 있는 옵션이 표시된다.
네비게이션을 통한 액션 세그는 show 방식으로 전달한다.
연결 후에는 연결한 씬에 화살표가 표시되고 네비게이션 바가 추가된걸 볼 수 있다.
루트 뷰 컨트롤러와 달리 왼쪽에 Back 버튼이 표시된다.
네비게이션 스택에 저장되는 컨트롤러 중에서 루트뷰 컨트롤러를 제외한 나머지 뷰컨트롤러들은
Back 버튼이 자동으로 표시된다. (이전 화면으로 Pop 하는 버튼)
세그 버튼을 누르면 화면이 Push되고 Back 버튼을 누르면 화면이 Pop되는 것을 볼 수있다.
화면전환을 코드로 구현하게 될때에는 네비게이션 바에 Back버튼을 생성하는 것과
이전화면으로 돌아가는 기능은 네비게이션 컨트롤러가 담당하지만
navigation VC와 child VC 인스턴스를 생성하는 코드는 직접구현해야하고,
새로운 child를 표시하는 코드도 직접 구현해야한다.
child를 생성할 때에는 각 VC에 입력된 storyboard ID를 활용한다.
이번에는 화면을 더 추가하고 코드로 구현해 보자!
각 화면에 컨트롤러 파일을 만들어주고 storyboard ID를 입력해준다.
child인스턴스를 생성후 storyboard ID를 입력하고
네비게이션 컨트롤러에 접근해서 Push방식을 구현한 것이다.
Pop방식은 Back버튼이 구현하지만 네비게이션바를 커스텀해서 버튼이 생성되어있지 않을 때
코드를 통해 구현할 수 있다.
위 코드를 입력하면 네비게이션 스택에서 제거 후 이전화면으로 돌아간다.
세그웨이를 이용해서 첫번째 화면이나 지정된 화면으로 돌아가고 싶다면 Unwind Segue를 사용해야 한다.
Unwind Segue를 사용할 때에는 돌아갈 VC 클래스에 Unwind segue와 연결할 액션 메서드를 추가해야 한다.
그러고나서 Push를 할 VC로 돌아가 Exit 쪽으로 해당 버튼을 드래그해주면
방금 추가했던 unwind 메서드에 연결할 수 있다.
코드를 통해 원하는 VC로 푸시하는 것을 구현한다면 방금처럼
클래스에 Unwind 메서드를 구현해줄 필요는 없다.
네비게이션 컨트롤러에 접근해 popToRootViewController 메서드를 true로 해주면 된다.
루트뷰가 아닌 원하는 VC로 이동하고 싶다면 Unwind Segue 방식을 사용하거나 코드로 구현가능하다.
네비게이션 컨트로러는 네비게이션 스택에 추가되있는 child를 배열로 저장한다.
이 배열에 접근할 때에는 viewController속성을 사용한다.
이동할 뷰의 인스턴스를 찾아서 상수에 바인딩 후 popToViewController의 파라미터에 전달하면 된다.
Navigation Bar
일반적으로 네비게이션 컨트롤러와 함께 화면 상단의 막대에 표시되는 네비게이션 컨트롤이다.
class UINavigationBar: UIView
TopVC와 연관된 버튼과 타이틀을 표시한다.
버튼은 Bar의 왼쪽과 오른쪽에 표시되고, 기본적으로 왼쪽에는 이전화면으로 Pop할 수있는 백 버튼이 있다.
버튼은 항상 UIBarButtonItem 인스턴스로 생성해야 한다.
class UIBarButtonItem : UIBarItem
일반적인 다른 뷰를 표현할 때에도 항상 UIBarButtonItem으로 랩핑하여 추가해야한다.
IOS11부터 Large Title 모드가 생겼다. 이 모드를 설정하게되면 바 버튼 밑에 타이틀이 크게 구현된다.
Navigation Item & NavigationBar
네비게이션바는 네비게이션 스택이 업데이트 될 때 마다 함께 업데이트 된다.
표시할 버튼과 타이틀은 Child VC에서 개별적으로 저장한다.
네비게이션 아이템에 원하는 항목을 저장해두면 Top VC로 지정되었을 때 네비게이션바에 표시된다.
네비게이션컨트롤러에서 네비게이션바를 선택 후 속성을 보면 위 사진처럼 구성되어있다.
스타일을 정할 수 있고 배경을 투명하게 하거나 타이틀을 라지사이즈로 바꿀 수 있다.
Back버튼의 이미지를 지정할 수 있고 타이틀의 두 스타일에 따라 폰트와 사이즈, 컬러 등을 지정할 수 있다.
Title 설정
인터페이스 빌더
코드
Bar Button Item
System Item이 Custom으로 되어있으면 버튼의 타이틀이나 이미지 등을 직접 설정한다.
System Item에는 직관적인 고유의 이미지들이 여러개 있다.
코드를 통해 bar button item에 접근하려면 Target-Action 메커니즘을 사용한다.
네비게이션바에 추가되는 뷰는 항상 bar button item에 임베드되어서 추가된다.
스토리보드를 통해 추가하면 자동으로 추가되지만 코드를 통해 추가하면 직접 임베드 해야한다.
Back Button
네비게이션에 연결된 뷰 중에 루트뷰가 아니라면 이전화면으로 돌아가는
Back Button이 자동으로 생성된다.
Back Button의 타이틀은 기본적으로 이전화면의 타이틀로 설정된다.
하지만 타이틀을 넣을 공간이 부족하다면 Back 문자로 전환된다.
Back Button을 직접 추가한 버튼과 함꼐 사용하고 싶다면 navigation item의
속성에서 Left Items Supplement를 체크하거나 코드로 구현해주면 된다.
ToolBar
툴 바는 인터페이스의 하단에 위치해 있고 하나이상의 버튼을 표시하는 컨트롤이다.
네비게이션 컨트롤의 속성에서 Shows Toolbar를 체크해도 되고,
라이브러리 창을 열어 툴 바를 드래그해서 화면에 배치시켜도 된다.
네비게이션과 마찬가지로 트렌지션이 발생할 때 마다 자동으로 업데이트 된다.
툴 바에서 생성한 BarButtonItem은 왼쪽에서부터 정렬된다.
Fixed Space는 작은 간격을 정렬할 떄 사용하고
Flexible Space는 비어있는 툴바에 크게 간격을 정렬할 때 사용한다.
코드로 Toolbar를 구현할 때에는 해당하는 BarButtonItem을 생성 후
setToolbarItems 메서드에서 배열안에다가 넣어주면 된다.
Tab Bar Controller
class UITabBarController: UIViewController
childVC를 배열로 관리하는 컨테이너 뷰 컨트롤러이다.
다중 선택 인터페이스를 관리하는 컨테이너 뷰 컨트롤러로, 선택 항목에 따라 표시 할 childVC가 결정된다.
탭바컨트롤러의 루트뷰에는 두개가 표시된다.
아랫쪽에는 탭바가 표시되고, Child 수 만큼 탭 바 아이템이 추가된다.
원하는 아이템을 선택하면 나머지 공간에 해당 Child가 표시된다.
탭바 컨트롤러에서 아이템의 갯수가 제한된다.
portrait 모드에서는 다섯개로 제한되고, 최대 갯수가 초과되면 More Item으로 표시된다.
More Item을 선택하게되면 나머지 아이템이 표시되어있는 More Navigation Controller가 표시된다.
모든 child는 연관된 Tab bar Item을 가지고 있다. 타이틀과 이미지를 저장하면 탭바에 표시된다.
뱃지 문자열을 설정하면 아이탬의 이미지 오른쪽 상단에 표시된다.
Portrait모드에서는 이미지 아랫쪽에 타이틀이 표시된다. 이러한 탭바를 Regular Tab Bar라고한다.
LandScape 모드에서는 이미자와 타이틀이 나란히 표시되고, Compact Tab Bar라고 한다.
Tab Bar Controller 사용해보기
네비게이션 컨트롤러와 같은 방식으로 임베드하면 된다.
최초에는 하나의 아이템이 생성되어있다.
아이템의 속성은 기본적으로 System Item이 커스텀으로 되어있고 여러가지 기본 옵션들을
사용할 수 있다. 커스텀이 아닌 다른 속성이 선택되어 있는 상태에서 Bar Item의
타이틀이나 이미지를 변경하게되면 다시 System Item이 커스텀으로 설정된다.
연결을 할 때는 세그를 연결하든 해당 뷰로 컨트롤을 누른상태에서 드래그한 후
view controllers를 통해 연결하면 되고, 지금은 네개이 child를 가지고있고
그러므로 네개의 bar button item이 생성된 것을 볼 수 있다.
Comments