[iOS] Floating TabBar

위의 사진과 같이 Floating TabBar를 만드는 방법에 대해 알아보겠습니다.

완성 코드

• TabBarView

import UIKit
import SnapKit

final class TabBarView: UIView {
    lazy var houseBtn: UIButton = {
        let button = UIButton(type: .system)
        button.setImage(UIImage(systemName: "house"), for: .normal)
        button.tintColor = .systemRed
        return button
    }()
    
    lazy var personBtn: UIButton = {
        let button = UIButton(type: .system)
        button.setImage(UIImage(systemName: "person.fill"), for: .normal)
        button.tintColor = .systemGray
        return button
    }()
    
    private lazy var buttnoStackView: UIStackView = {
        let stack = UIStackView()
        stack.axis = .horizontal
        stack.alignment = .fill
        stack.distribution = .fillEqually
        
        stack.backgroundColor = .white
        stack.layer.cornerRadius = 30
        
        stack.layer.shadowColor = UIColor.black.cgColor
        stack.layer.shadowOffset = CGSize(width: 0, height: 2) // 그림자의 위치 (수평, 수직)
        stack.layer.shadowOpacity = 0.1 // 그림자 투명도
        stack.layer.shadowRadius = 10 // 그림자 반경
        
        [houseBtn, personBtn].forEach {
            stack.addArrangedSubview($0)
        }
        return stack
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setLayout()
    }
    
    private func setLayout() {
        self.addSubview(buttnoStackView)
        
        buttnoStackView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

• TabBarController

final class TabBarController: UITabBarController {
    private let homeVC = HomeViewController()
    private let myPageVC = MyPageViewController()
    private let tabBarView = TabBarView(frame: .zero)
    
    private lazy var homePageRightBartBtn: UIBarButtonItem = {
        let barBtnItem = UIBarButtonItem(
            title: "이동1",
            style: .plain,
            target: self,
            action: #selector(didTappedBarbtn))
        barBtnItem.tintColor = .white
        return barBtnItem
    }()
    
    private lazy var myPageRightBartBtn: UIBarButtonItem = {
        let barBtnItem = UIBarButtonItem(
            title: "이동2",
            style: .plain,
            target: self,
            action: #selector(didTappedBarbtn))
        barBtnItem.tintColor = .white
        return barBtnItem
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configure()
        setLayout()
        configTabBarBtn()
    }
}

private extension TabBarController {
    func configure() {
        tabBar.isHidden = true
        navigationItem.title = "Hello"
        navigationItem.rightBarButtonItem = homePageRightBartBtn
        viewControllers = [homeVC, myPageVC]
    }
    
    func setLayout() {
        view.addSubview(tabBarView)
        
        tabBarView.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.bottom.equalTo(view.safeAreaLayoutGuide).inset(16)
            $0.width.equalTo(280)
            $0.height.equalTo(65)
        }
    }
    
    func configTabBarBtn() {
        tabBarView.houseBtn.addTarget(
            self,
            action: #selector(didTappedHome),
            for: .touchUpInside)
        tabBarView.personBtn.addTarget(
            self,
            action: #selector(didTappedMyPage),
            for: .touchUpInside)
    }
    
    func changeTintColor(buttonType: UIButton) {
        tabBarView.houseBtn.tintColor = (buttonType == tabBarView.houseBtn) ? .systemRed : .systemGray
        tabBarView.personBtn.tintColor = (buttonType == tabBarView.personBtn) ? .systemRed : .systemGray
    }
    
    @objc func didTappedHome() {
        navigationItem.title = "Hello"
        navigationItem.rightBarButtonItem = homePageRightBartBtn
        selectedIndex = 0
        
        changeTintColor(buttonType: tabBarView.houseBtn)
    }
    
    @objc func didTappedMyPage() {
        navigationItem.title = "Swift"
        navigationItem.rightBarButtonItem = myPageRightBartBtn
        selectedIndex = 1

        changeTintColor(buttonType: tabBarView.personBtn)
    }
    
    @objc func didTappedBarbtn() {
        let vc = DetailViewController()
        navigationController?.pushViewController(vc, animated: true)
    }
}

• tabBar.isHidden을 사용하여 기본으로 생성되는 TabBar을 숨기고 Floating TabBar을 보여주는 방식으로 만들었습니다.
  
  
• selectedIndex를 사용하여 TabBarController의 인덱스를 직접 변경하면 뷰가 변경됩니다.