[iOS]GNB 글로벌 네비게이션 메뉴(탭메뉴) 생성하기

 

 

 

하단에 메뉴가 고정되어 있고, 각 메뉴를 누를 때마다 페이지를 이동되는 탭메뉴를 만들어보자!

 

 

---

 

💡 짚고 넘어가면 좋은 개념
     iOS의 View 표현 방법

 

 

iOS는 화면을 표현할 때 윈도우 / 뷰 객체를 사용한다. (무조건 하나 이상의 윈도우와 뷰를 가지고 있음)

 

윈도우는항상 UI 계층의 최상위에 위치하는 객채로, 화면을 꽉 채운다. 뷰의 일종이지만 직접 컨텐츠를 가지지 않고, 컨텐츠를 가진 뷰 객체를 내부에 배치해서 화면에 출력하는 역할만을 수행한다. 

 

뷰는 윈도우의 일부를 자신의 영역으로 정의하여 컨텐츠를 스크린에 표현하고, 사용자의 입력에 반응하여 결과를 처리하는 역할을 수행한다.

 

이러한 윈도우와 뷰를 연결해주는 것이 viewController의 역할이다. 뷰 컨트롤러는 뷰의 계층을 관리해서 윈도우에 전달하고, 사용자의 입력을 윈도우로부터 전달받아 처리한다. viewController에는 root viewController를 설정하는 부분이 있는데(스토리 보드 속 뷰 왼쪽에 화살표) 윈도우 객체는 하나의 뷰 컨트롤러를 루트 뷰 컨트롤러로 지정하여 참조한다.

 

뷰 컨트롤러 당 하나의 화면을 맡아서 컨텐츠를 표현하고 뷰를 관리한다. 이를 씬(scene)이라 부르고, 이러한 뷰 컨트롤러를 콘텐츠 뷰 컨트롤러라고 한다. 네비게이션 컨트롤러, 탭 바 컨트롤러 등 화면에 콘텐츠를 배치하지 않는 뷰 컨트롤러들은 다른 뷰 컨트롤러를 배치하거나 관계를 엮는데 이러한 컨트롤러를 컨테이너 뷰 컨트롤러라고 한다.

 

🔗 출처

 

 

 

---

 

1️⃣ 스토리보드, ViewController 파일 생성하기

 

 

탭 메뉴 전체를 컨트롤할 TabMenu, 그리고 5개의 메뉴를 각각 생성해주었다.

 

 

 

viewController 파일 생성 후 초기 코드 설정을 해줘야함

 

각각 메뉴별로 storyboard ID 잘 설정해두기

 

 

 

2️⃣ TabMenu 스토리보드 파일 설정

 

 

스토리보드에 있는 뷰를 지우고 Tab Bar Controller를 새로 생성해준다.

 

 

 

Tab Bar viewController의 Class를 아까 생성했던 TabMenuViewController로 변경해주고, rootViewController로 지정해준다.

기존에는 main.storyboard가 rootViewController로 자동 설정되어 있는데, 이건 해제해준다.

 

 

 

 

메뉴 갯수마다 Navigation viewController를 생성해준다. (예시의 경우 5개)

그 다음 Tab Bar viewController 화면에서 컨트롤을 누른 상태로 클릭해서 잡아당기면 

 

 

요런 창이 뜨는데 Relationship Seque - view controllers 를 선택해준다.

메뉴 5개 다 이렇게 설정해주면 아래 사진처럼 된다.

 

 

 

 

 

3️⃣  Storyboard Reference

 

 

이제 tabMenu 스토리보드에서 생성한 navigation 뷰 컨트롤러를 통해 메뉴별로 만들었던 스토리보드 파일로 넘겨줄 거다!

storyboard Reference를 생성하고, 위에서 했던 것처럼 네비게이션 뷰컨 위에서 컨트롤 누른 상태로 드래그한다.

 

 

요런 창이 뜨면 Relationship Seque - root view controllers 를 선택해준다.

메뉴 5개 다 이렇게 설정해주면 된다.

 

 

초반에 메뉴별 storyboard 뷰에 storyboard ID를 적어줬었는데,

Storyboard Reference 설정에 Referenced ID도 똑같은 이름으로 각 메뉴마다 다 적어준다.

 

 

 

 

 

잘 따라왔다면 실행시켜보자