[swift] 간단한 TabBarController In NavigationController 만들어보기 (Code)

NavigationController In TabBarController

 

요새 주문하는 앱을 만들기 위해 노력하는 중에 있어요,,,

네이게이션, 탭바, 테이블뷰 등 기존에 사용하지 않았던 기능들을 배우려 하니 쉽지가 않슴돠

 

 

그래서 구글 세상을 서칭하면서 또 배운,,,탭바컨트롤러 구현!!

그런데 이제 코드를 곁들인,,,

 

 

아예 스토리보드를 삭제하고도 만들 수 있다고 하는데,

그건 다음 번에 도전하여 올려볼게욧!

 

 

---

위에 gif가 제가 오늘 완성한 탭바컨트롤러(TabBarController)입니다.

 

연습 삼아 만들어 본 것이기 때문에 아래 탭들은 정말 의미없이 애플이 제공한 아이콘을 사용했답니다 ㅎㅎ

(다운로드, 컨택트, 히스토리 조합 뭐야,,ㅎㅎ,)

 

 

각 탭별로 구별하기 위해 화려하게 백그라운드 컬러도 설정했어유

 

 

1. TabBarController 파일 생성

사용할 프로젝트에서 cmd+N을 눌러 코코아터치 클래스를 추가해줍니다.

이때 아래처럼 subclass of에 UITabBarController를 선택해 줍니다.

 

그 후에는 스토리보드로 가서 제가 만든 탭바컨트롤러를 메인뷰의 클래스로 설정해줘야 해요.

identity inspector 부분에 있는 Custom Class 항목에 제가 만든 'TabBarController'를 입력한 후 한 번 빌드 (cmd + B) 해줍니다요.

 

 

 

1-1. 각 루트뷰 컨트롤러 만들기

일단 가장 메인에 해당하는 탭바컨트롤러를 만들었구요.

저는 탭을 세개 만들 예정이니 그 탭들도 각각의 뷰컨트롤러들이 필요하겠쥬?

만드는 방법은 cmd + N을 누르거나 좌측의 indicator에서 오른쪽 버튼 클릭 -> newfile을 눌러 ViewController를 추가하도록 합니다.

 

 

 

저는 간단하게 아래와 같이 이름을 지어보았습니당.

FirstViewController()

SecondViewController()

ThirdViewController()

 

 

---

 

2. TabBarController.swift에서 코드 작성

 

 

 

먼저 1-1에서 제가 만든 세개의 뷰컨트롤러의 인스턴스를 찍어내도록 합니다.

각 탭의 이름을 정해줍니다. 저는 1, 2, 3이라고 간단하게 정해보았어요.

//
//  TabBarViewController.swift
//  NavigationAndTabbar
//
//  Created by 순진이 on 2021/11/21.
//
import UIKit

class TabBarViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let firstVC = FirstViewController()
        let secondVC = SecondViewController()
        let thirdVC = ThirdViewController()
        
        firstVC.title = "1"
        secondVC.title = "2"
        thirdVC.title = "3"

 

 

 

 

그리고 탭바아이템을 설정해 줄게요.

 

 

 

 

 

 

tabBarItem은 UITabBarItem 타입의 메서드군요.

 

 

 

설명을 보자하니, 어떤 뷰컨트롤러가 탭바 컨트롤러의 자식뷰일 때, 뷰컨트롤러를 나타내기 위해 사용되는 메서드래요. 이 메서드에 처음 접근할 때 UITabBarItem이 생성되기 때문에 그 뷰컨트롤러를 탭바에 놓지 않을 거라면 이 메서드에 접근하지 말아야 한다는 군요. 

 

 

탭바아이템의 생성자 init(tabBarSystemItem:tag:)를 사용하여 탭바아이템을 만들어볼게요.

 

 

 

파라미터 systemItem에 UITabBarItem.SystemItem 열거형을 받아요. 

열거형 케이스는 아래와 같습니다.

 

 

 

저는 이중에 얼토당토 않은 .downloads / .history / .contacts를 사용했드랬죠 ㅎㅎ호호

 

 

 

import UIKit

class TabBarViewController: UITabBarController {


    override func viewDidLoad() {
        super.viewDidLoad()

        //뷰컨트롤러의 인스턴스 찍어내기 (생략)
        
        //각 탭의 이름 정하기(생략)
        
        
        //각 탭별 아이템 정하기
        firstVC.tabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 0)      
        secondVC.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 0)        
        thirdVC.tabBarItem = UITabBarItem(tabBarSystemItem: .history, tag: 0)

        
        //인스턴스로 찍어낸 뷰컨들을 네비게이션의 루트뷰컨트롤러로 설정
        
        
        //각 네이게이션컨트롤러들을 배열로 묶기
       
    }
}

 

 

 

그 외 UITabBarItem의 생성자는 접어두기에 넣어놨으니 한 번 보셔도 좋구영.

 

---

 

3. 각 탭을 네비게이션 컨트롤러와 연결

저는 각 탭의 루트뷰가 그냥 뷰컨트롤러가 아닌 네비게이션 컨트롤러로 연결되었으면 하기 때문에!

일단 제가 만든 뷰컨트롤러 3개(FirstViewController() / SecondViewController() / ThirdViewController())를 각 네비게이션 컨트롤러의 루트뷰컨트롤러로 만들어줄게요.

 

 

//
//  TabBarViewController.swift
//  NavigationAndTabbar
//
//  Created by 순진이 on 2021/11/21.
//
import UIKit

class TabBarViewController: UITabBarController {


    override func viewDidLoad() {
        super.viewDidLoad()

        //뷰컨트롤러의 인스턴스 찍어내기(생략)       
        //각 탭의 이름 정하기(생략)
        //각 탭별 아이템 정하기(생략)
       
        
        //인스턴스로 찍어낸 뷰컨들을 네비게이션의 루트뷰컨트롤러로 설정
        let nav1 = UINavigationController(rootViewController: firstVC)
        let nav2 = UINavigationController(rootViewController: secondVC)
        let nav3 = UINavigationController(rootViewController: thirdVC)
        
        //각 네이게이션컨트롤러들을 배열로 묶기

    }
}

 

---

 

4. 네비게이션 컨트롤러를 탭바의 배열로 만들기

이제 제가 만든 네비게이션 컨트롤러들을 루트뷰 컨트롤러의 배열로 만들어 볼게요.

 

 

제가 사용할 건 viewControllers라는 속성입니당.

 

 

UIViewController를 배열형태로 받는 속성이에요.

탭바 컨트롤러를 설계할 때, 탭바 인터페이스의 각 탭의 내용을 구체화하기 위해 사용하는군여. 

이 배열 속 순서는 탭바의 순서와 같아요. 왼쪽부터 index 0으로 시작한답니다.

 

 

이에 따라 nav1가 제일 왼쪽에, nav2가 중간, nav3가 제일 마지막에 위치하게 됩니다.

 

//
//  TabBarViewController.swift
//  NavigationAndTabbar
//
//  Created by 순진이 on 2021/11/21.
//
import UIKit

class TabBarViewController: UITabBarController {


    override func viewDidLoad() {
        super.viewDidLoad()

        //뷰컨트롤러의 인스턴스 찍어내기(생략)       
        //각 탭의 이름 정하기(생략)
        //각 탭별 아이템 정하기(생략)
       
        
        //인스턴스로 찍어낸 뷰컨들을 네비게이션의 루트뷰컨트롤러로 설정(생략)
        
        
        //각 네이게이션컨트롤러들을 배열로 묶기
        viewControllers = [nav1, nav2, nav3]
    }
}

 

---

 

 

뷰컨트롤들을 배열로 묶는 속성에는 viewControllers말고 setViewControllers(_:animated:) 메서드라는 속성도 존재합니다.

 

 

 

 

사용은 비슷한대요. 만약 제 코드에서 사용하게 된다면 viewControllers를 작성한 곳에 아래와 같이 사용해주시면 됩니다.

setViewControllers([nav1, nav2, nav3], animated: true)

 

---

 

오늘도 더듬더듬한 코드를 봐주셔서 감사합니다!!

 

다음에는 탭바컨트롤러와 네비게이션컨트롤러를 각각 자세하게 공부해보는 시간도 가져야 할 것 같네요 (꼭)