[Swift] UITabbar, 하단 탭바 구현

안녕하세요 욱승입니다.

앱을 만들다보면 불가피하게 UITabbar를 활용해서 만드는 경우가 많은데

그러므로 이번 포스팅에선 간단하게 UITabbar를 구현 해보겠습니당

 

UITabbar란?

UITabbar는 iOS 애플리케이션에서 사용되는 UI 요소 중 하나입니다. 탭 바(tab bar)라고도 불리며, 일반적으로 화면 하단에 위치합니다. 탭 바는 일반적으로 사용자가 애플리케이션 내에서 다른 섹션으로 이동할 수 있는 여러 탭을 제공합니다. 각 탭은 대개 해당 섹션의 기능 또는 내용을 설명하는 아이콘과 제목을 포함합니다.

탭 바는 일반적으로 애플리케이션의 주요 섹션을 표시하기 위해 사용되며, 사용자가 특정 섹션으로 쉽게 이동할 수 있도록 도와줍니다. 예를 들어, 메시징 앱에서는 탭 바에 '메시지', '채팅', '연락처'와 같은 탭이 있을 수 있습니다. 사용자가 각각의 탭을 탭하면 해당 섹션으로 이동하게 됩니다.

 

 

UITabbar구현은 해당 클래스가 UITabBarController를 상속받아야합니다.

UITabBarController는 UIViewController를 상속받고 있음!

 

구현

import UIKit
import SnapKit
import Then


final class ViewController: UITabBarController{
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setTabbar()
        setAttribute()
    }
    
    // MARK: - Tabbar Setting
    func setTabbar() {
        
        let appearanceTabbar = UITabBarAppearance()
        appearanceTabbar.configureWithOpaqueBackground()
        appearanceTabbar.backgroundColor = UIColor.white
        tabBar.standardAppearance = appearanceTabbar
        tabBar.tintColor = .black
        tabBar.backgroundColor = .white
    }
    
    // MARK: - Tabbar 화면이동 및 눌렸을때/눌리지 않았을때 이미지 Set
    func setAttribute() {
        
        // MARK: - UIBar Create NavigtaionController
        viewControllers = [
          createNavController(for: Test1ViewController(), title: NSLocalizedString("홈", comment: ""), image: UIImage(named: "home")!, selectedImage: UIImage(named: "sHome")!), //UIImage(named)들은 바꾸셔야합니다.
          createNavController(for: Test2ViewController(), title: NSLocalizedString("북마크", comment: ""), image: UIImage(named: "scrap")!, selectedImage: UIImage(named: "sScrap")!),
          createNavController(for: Test3ViewController(), title: NSLocalizedString("검색", comment: ""), image: UIImage(named: "search")!, selectedImage: UIImage(named: "sSearch")!),
          createNavController(for: Test4ViewController(), title: NSLocalizedString("내정보", comment: ""), image: UIImage(named: "myInfo")!, selectedImage: UIImage(named: "sMyInfo")!)
        ]
    }
    
    // MARK: - Tabbar 화면이동 및 눌렸을때/눌리지 않았을때 이미지 Set
    fileprivate func createNavController(for rootViewController: UIViewController, title: String?, image: UIImage, selectedImage: UIImage) -> UIViewController {
        
        let navController = UINavigationController(rootViewController:  rootViewController)
        navController.navigationBar.isTranslucent = false
        navController.navigationBar.backgroundColor = .white
        navController.tabBarItem.title = title
        navController.tabBarItem.image = image
        navController.tabBarItem.selectedImage = selectedImage
        navController.interactivePopGestureRecognizer?.delegate = nil // 스와이프 제스처 enable true
        return navController
    }
}

import UIKit
import SnapKit
import Then


final class Test1ViewController: UIViewController{
    
    lazy var centerLabel = UILabel().then {
        $0.text = "Test1"
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setUI()
        setAttribute()
    }

    func setUI() {
        
        self.view.backgroundColor = .red
        self.view.addSubview(centerLabel)
    }
    
    func setAttribute() {
        
        centerLabel.snp.makeConstraints {
            $0.centerX.centerY.equalToSuperview()
        }
    }
}

 

.

.

.

Test2ViewCotnoller, Test3ViewController 코드동일(생략)

import UIKit
import SnapKit
import Then


final class Test4ViewController: UIViewController{
    
    lazy var centerLabel = UILabel().then {
        $0.text = "Test4"
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setUI()
        setAttribute()
    }

    func setUI() {
        
        self.view.backgroundColor = .green
        self.view.addSubview(centerLabel)
    }
    
    func setAttribute() {
        
        centerLabel.snp.makeConstraints {
            $0.centerX.centerY.equalToSuperview()
        }
    }
}

 

결과

 

 

 

결론

앱 구현에 있어선 빠져서 안될 기능 간단하게 구현 해보았다

거의 불가피하게 사용되므로 나중에 구현해야한다면 가볍게 구현해보쟈 ㅋ

+ 추가적으로 테스트코드에 쓰인 아이콘들을 활용하고 싶으시다면 댓글 남겨주세요!

메일로 전달드리겠습니다

 

 

 

 

 

 

GitHub - shinseunguk/PraceticeTabBar: UITabbar 예제코드