[iOS] TabBar Controller 만들기 (No StroyBoard)

오늘은 앱에서 자주 보는 단골 화면

 

TabBar Controller를 알아보겠습니다.

 

 

TabBar Controller 는 탭으로 뷰 컨트롤러를 child로 설정하여 관리하는 컨테이너 컨트롤러 입니다. 

TabBar Controller에는 루트뷰와 탭 바가 표시되고 child 뷰 갯수만큼 TabBar에 TabBar Item이 생성됩니다.

 

 

 

다음과 같이 저희도 3개의 탭을 가진 화면을 구성하겠습니다.

 

//
//  TabBarViewController.swift
//  NoStoryboard
//
//  Created by james on 2021/11/07.
//

import UIKit

class TabBarViewController: UITabBarController {
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        // Do any additional setup after loading the view.
        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let libraryVC = LibraryViewController()
        
        //각 tab bar의 viewcontroller 타이틀 설정
        
        homeVC.title = "Home"
        searchVC.title = "Search"
        libraryVC.title = "Library"
        
        homeVC.tabBarItem.image = UIImage.init(systemName: "house")
        searchVC.tabBarItem.image = UIImage.init(systemName: "magnifyingglass")
        libraryVC.tabBarItem.image = UIImage.init(systemName: "book")
        
        //self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0);
        
        // 위에 타이틀 text를 항상 크게 보이게 설정
        homeVC.navigationItem.largeTitleDisplayMode = .always
        searchVC.navigationItem.largeTitleDisplayMode = .always
        libraryVC.navigationItem.largeTitleDisplayMode = .always
        
        // navigationController의 root view 설정
        let navigationHome = UINavigationController(rootViewController: homeVC)
        let navigationSearch = UINavigationController(rootViewController: searchVC)
        let navigationLibrary = UINavigationController(rootViewController: libraryVC)
        
    
        navigationHome.navigationBar.prefersLargeTitles = true
        navigationSearch.navigationBar.prefersLargeTitles = true
        navigationLibrary.navigationBar.prefersLargeTitles = true
        
        setViewControllers([navigationHome, navigationSearch, navigationLibrary], animated: false)
    }

    /*
     // MARK: - Navigation
     
     // In a storyboard-based application, you will often want to do a little preparation before navigation
     override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
     // Get the new view controller using segue.destination.
     // Pass the selected object to the new view controller.
     }
     */
    
}

 

 

잘 된것 같지만 어디가 좀 어색합니다. 

먼저 아이템들이 너무 위쪽으로 쏠려있는 느낌이 들죠? 

 

조금 내려주면 어떨까 해서 내려주는 방법을 알아보았지만 잘 되질 않습니다. 

그렇다면 탭바 자체의 높이를 높여주면 어떨까요? 

 

코드로 UI 를 작성하는 장점을 여기서 찾을 수 있는데요 

 

바로 커스터마이징 입니다. 

 

커스터마이징은 다음번에 다루기로 하고 일단 저 탭바의 높이를 늘려줍시다. 

 

//탭바 height 커스터 마이징
let HEIGHT_TAB_BAR:CGFloat = 100
...


...
override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()
            var tabFrame = self.tabBar.frame
            tabFrame.size.height = HEIGHT_TAB_BAR
            tabFrame.origin.y = self.view.frame.size.height - HEIGHT_TAB_BAR
            self.tabBar.frame = tabFrame
        }

해당 함수에 다음과 같이 코드를 넣어줍니다. 

 

Frame은 뭐고 origin은 뭘까요? 

frame은 상위 뷰의 좌표 시스템에서 View의 위치와 크기를 나타냅니다. 더 정확한 의미는 Bound와 비교해 다음번에 알아보기로 하고 결과를 확인해 볼까요? 

 

높이가 변경된 탭바를 완성했습니다.