[iOS] 탭맨(TabMan) 라이브러리

탭바는 직접 구현할 수도 있고, 라이브러리를 이용해서 만들 수도 있다. 라이브러리 중 탭맨을 이용해서 탭바를 구현하려한다. TabMan GitHub

1. CocoaPods 이용해서 TabMan 설치

pod 'Tabman', '~> 2.12'

2. Set & Use

설치가 완료되었다면 ViewController를 생성해서 다음과 같이 세팅을 해줘야한다.

import Tabman
import Pageboy

class TabViewController: TabmanViewController {

    private var viewControllers = Array<UIViewController> = []

    override func viewDidLoad() {
        super.viewDidLoad()
        // tab에 보여질 VC 추가
        if let firstVC = storyboard?.instantiateViewController(withIdentifier: "FirstVC") as? FirstVC {
            viewControllers.append(firstVC)
        }
        if let secondVC = storyboard?.instantiateViewController(withIdentifier: "SecondVC") as? SecondVC {
            viewControllers.append(secondVC)
        }
        
        self.dataSource = self
        // 스와이프 disable
		// self.isScrollEnabled = false

        // 바 생성 + tabbar 에 관한 디자인처리를 여기서 하면 된다.
        let bar = TMBar.ButtonBar()
        bar.layout.transitionStyle = .snap
        // tab 밑 bar 색깔 & 크기
        bar.indicator.weight = .custom(value: 1)
        bar.indicator.tintColor = .black
        // tap center
        bar.layout.alignment = .centerDistributed
        // tap 사이 간격
        bar.layout.interButtonSpacing = 12
        // tap 선택 / 미선택 
        bar.buttons.customize { (button) in
            button.tintColor = .gray
            button.selectedTintColor = .black
            button.selectedFont = UIFont.systemFont(ofSize: 16, weight: .medium)
        }

        // bar를 안보이게 하고 싶으면 addBar를 지우면 된다. at -> bar 위치
        addBar(bar, dataSource: self, at: .top)
    }
}

그리고 따로 datasoure extension 을 해줘야하는데 여기서는 탭에 보여지는 글자에 관한 처리가 들어간다.

extension TabViewController: PageboyViewControllerDataSource, TMBarDataSource {

    func numberOfViewControllers(in pageboyViewController: PageboyViewController) -> Int {
        return viewControllers.count
    }

    func viewController(for pageboyViewController: PageboyViewController,
                        at index: PageboyViewController.PageIndex) -> UIViewController? {
        return viewControllers[index]
    }

    func defaultPage(for pageboyViewController: PageboyViewController) -> PageboyViewController.Page? {
        return nil
		// return .at(index: 0) -> index를 통해 처음에 보이는 탭을 설정할 수 있다.
    }

    func barItem(for bar: TMBar, at index: Int) -> TMBarItemable {
		let item = TMBarItem(title: "")
        let title: String = index == 0 ? "page 1" : "page 2"
        item.title = title
        return item
    }
}

이렇게 세팅이 끝나면 기본적으로 사용이 가능하다. 추가로 tab을 아래 사진처럼 UIView 안에 넣을 수도 있다.

방법은 원하는 크기만큼 'Container View' 를 생성하면 오른쪽에 Container View 크기만큼 VC 이 하나 만들어진다. 이 VC을 위에서 세팅한 TabmanViewController 으로 세팅해준다. 그리고 화면은 Container View 가 포함된 VC를 띄우면 원하는 결과를 얻을 수 있다.

3. 실행화면