🍊Swift/UIkit

[swift] 하단 탭 바 만들기 UITabBarController

DevJiun 2021. 7. 25. 19:41

안녕하세요 DevJiun입니다.

 

오늘은 swift에서 하단 탭 바를 만드는 방법을 알려드릴려고 왔습니다.

 

요즘 앱들에서 많이 채택하는 화면 전환 방식이죠!

 

우선 저번글에서 소개해드린 방법으로 stroyboard는 지워줍시다.

 

//
//  MainController.swift
//  InstagramFeed
//
//  Created by shinjiun on 2021/07/25.
//

import UIKit

class MainTabController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        configureViewControllers()
    }
    
    func configureViewControllers() {
        let feed = templateNavigationController(unselectedImage: UIImage(imageLiteralResourceName: "house.fill"), selectedImage: UIImage(imageLiteralResourceName: "house.fill"), rootViewController: FeedController())
        let profile = templateNavigationController(unselectedImage: UIImage(imageLiteralResourceName: "house.fill"), selectedImage:UIImage(imageLiteralResourceName: "person.circle.fill"), rootViewController: ProfileController())
        
        viewControllers = [feed, profile]
        
    }
    
    func templateNavigationController(unselectedImage:UIImage, selectedImage:UIImage, rootViewController: UIViewController ) -> UINavigationController {
        let nav = UINavigationController(rootViewController: rootViewController)
        nav.tabBarItem.image = unselectedImage
        nav.tabBarItem.image = selectedImage
        nav.navigationBar.tintColor = .black
        
        return nav
    }
}

코드 설명해드리겠습니다.

 

전 두개의 탭바를 만들 예정입니다. Home(Feed)와 Profile 입니다.

 

우선 MainTabController라는 클래스를 만든 후에

 

해당 라이프사이클이 실행되면 configureViewControllers 라는 메서드를 실행하게 됩니다.

 

configureViewControllers메서드에선 feed와 profile이라는 변수가 viewcontroller라는 리스트 안에 들어있습니다.

 

templateNavigationController메서드를 보시면 받아오는 인자가 선택되었을때와 선택되지 않았을때 이미지 그리고 해당 탭 컨트롤러를 인자로 받습니다.

 

import UIKit

class FeedController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemPink
    }
}


import UIKit

class ProfileController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemGreen
    }
}

 

위는 각 탭별 컨드롤러입니다.

 

SceneDelegate파일 scene메서드 부분에 아래와 같이 작성해줍시다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let scene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: scene)
        window?.rootViewController = MainTabController()
        window?.makeKeyAndVisible()
    }

AppDelegate는 아래와 같이 작성해줍니다.

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    var window: UIWindow?

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.makeKeyAndVisible()
        
        let tabVC = MainTabController()
        window?.rootViewController = tabVC
        
        return true
    }
}

 

결과물입니다.