CustomTabBar Controller 제작기

안녕하세요. 밀쿄 입니다.

오늘은 CustomTabBar Controller를 만들어 볼겁니다.

먼저 TabBar Controller가 무엇인지 알아야하는데요..

먼저 생긴 모양부터 보겠습니다.

글쓴이가 제작한 '나의 사회복무'란 앱에서 가져온 이미지

이렇게 앱을 실행하면 하단에서 여러가지 화면을 이동시키는 컨트롤러 입니다.

그렇다면 이것에 대해 조금 더 깊게 알아보겠습니다,

애플 개발자 문서에서 한 번 살펴보겠습니다. ( 여기 )

UITabBarController

1) radio-style Selection interface를 관리하는 Container View Controller

2) 선택한 것은 표시 할 Child View Controller를 결정

이렇게 요약할 수 있겠네요.

 

Container View Controller에 대해 알아봐야겠네요.

이번 개발자 문서는 여기 네요.

 Container View Controller는 자신이 가진 다른 뷰 컨트롤러(Child View Controller)의 컨텐츠 표시를 관리한다.

쉽게 생각하면

탭바컨트롤러는 

자신이 가진 다른 뷰 컨트롤러 -> 탭바의 아이템이 클릭하면 나오는 뷰들

컨텐츠 표시를 관리한다.

맞는것 같죠?

 

그럼 이 컨테이너 뷰 컨트롤러는 어떠한 방법으로 설계해야할까요?

그건 여기 있습니다.

글은 오브젝트씨 기준이지만.... 위에 컨테이너뷰 설명부분에 스위프트 함수가 잘 나와있어요.

그걸로 매칭시켜서 볼겁니다.

 

링크를 들어가면 'Adding a Child View Controller to Your Content' 라고 되어있는 부분이 있을껍니다.

1. Container View Controlller에서 addChildViewController를 호출한다.

2. Container View계층에 Child Root View를 추가한다.

3. Child Root View의 크기와 위치를 관리하기 위한 제약 조건을 추가한다.

4. child view controller에서 didMoveToParentViewController를 호출한다.

 

그럼 한 번 소스코드롤 들어가보겠습니다.라고 타이핑치고 보니까

뷰 구성을 하나도 안했네요.

 

뷰 구성은

텅 빈 뷰 컨트롤러에 뷰를 추가해주고 그 위에 하단에 탭바를 넣어주고 그 위에 버튼들을 놓습니다...

뷰 위에 탭바를 넣는 게 포인트 입니다.

뷰 위에 화면들이 쌓이기 떄문에 뷰가 없으면 말짱 도루묵입니다..

이런식으로 탭바를 꾸며주시면 됩니다.

뷰 구성하는 것까지 넣으면 길어지니 그렇게 만들어주세요.

혹시라도 뷰 구성 잘 모르겠다하시면 제가 끝에 코드로 짜진 소스를 남겨드릴껀데 그거를 참고하시면 될 것 같습니다.

 

이제 그럼 본격적으로 커스텀 탭바 만들기를 시작하겠습니다.

 

vc가 붙은 것들은 저 하단에 각각 버튼들이 대응하는 뷰들입니다.

vcList는 말그대로 ViewController Array구요.

prevIndex는 이전에 클릭했던 탭바의 버튼을 기록하기 위한 것입니다..

그 다음으로는

각각 버튼들에게 태그를 달아줍니다.

그리고 배열에 아이템들을 넣어주고 아까 만들어둔 vcList에 넣어줍니다,

 

이제 연결 작업을 해봅시다..(이제야 나오는 컨테이너 뷰 컨트롤ㄹ....)

짠!

아까 말한것 처럼 addChild해주고 크기 잡아주고 뷰 넣어주고 didMove 호출해주면 됩니다.

여기서 끄으으읏 하면 좋겠지만

이렇게 만들고 실행해서 여러게 클릭해보세요.

그리고 뷰하이라이키를 보면..

 

이렇게 겹치는걸 볼 수 있습니다..기존에 있던 뷰가 계속 유지되는..다시 글을 부랴부랴 읽어보면 지우는 방법이 남아있습니다.

이 설명에 기반하여 만들면 이렇게 됩니다.

풀 소스코드 올려드릴테니 참고하세요.

 

https://github.com/dp221125/Swift_Custom_TabBar_Example