[iOS/Swift] TabMan 라이브러리 사용하기 - (Custom tabbar / 상단 탭바 / 커스텀 탭바)

TabMan

쉽게 페이지뷰, 인디케이터를 생성할 수 있는 TabMan을 사용해보도록 하겠습니다.

 

1. 라이브러리 추가하기

저는 spm을 이용해서 설치해줬습니다! 

https://github.com/uias/Tabman

 

2. 스토리보드 , 뷰컨트롤러 생성하기

스토리보드 안에, tabbar를 만들 영역에 ContainerView를 넣어줬습니다!

메인이 될 뷰컨트롤러 한개와 원하는 탭 수만큼 뷰컨트롤러를 생성해줬어요!

 

3. TabManViewController에서 라이브러리 추가 &

UIViewController 대신에 TabmanViewController를 상속받도록 변경

import UIKit
import Tabman
import Pageboy

class TabManViewController: TabmanViewController {

4. tab 상단바 UIView 만들기 & 뷰컨트롤러 넣을 배열 초기화

@IBOutlet weak var tabView: UIView!

 

5. 탭바로 넘길 view Controller 선언

- (아직스토리보드를 생성을 안해서, controller만 연결해줌)

private var viewControllers: [UIViewController] = []
let firstVC = FirstTabViewController()
let secondVC = SecondTabViewController()
let thirdVC = ThirdTabViewController()
let fourthVC = FourthTabViewController()

viewControllers.append(firstVC)
viewControllers.append(secondVC)
viewControllers.append(thirdVC)
viewControllers.append(fourthVC)

6. tab 상단바 생성 및 커스텀하기

self.dataSource = self
        
let bar = TMBar.ButtonBar()
        
//탭바 레이아웃 설정
bar.layout.transitionStyle = .snap 
bar.layout.alignment = .centerDistributed
bar.layout.contentMode = .intrinsic
//        .fit : indicator가 버튼크기로 설정됨
bar.layout.interButtonSpacing = view.bounds.width / 8

        
//배경색
bar.backgroundView.style = .clear
bar.backgroundColor = .twitter_black
        
//간격설정
bar.layout.contentInset = UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 10)
        
//버튼 글시 커스텀
bar.buttons.customize{ 
	(button) 
    in
    button.tintColor = .twitter_gray50
    button.selectedTintColor = .twitter_white
    button.font = UIFont.font(.robotoBold, ofSize: 14)
}
//indicator
bar.indicator.weight = .custom(value: 3)
bar.indicator.overscrollBehavior = .bounce
bar.indicator.tintColor = .twitter_blue1

addBar(bar, dataSource: self, at:.top)

7. Extension추가하기

extension TabManViewController: PageboyViewControllerDataSource, TMBarDataSource {
    
    func barItem(for bar: TMBar, at index: Int) -> TMBarItemable {
        switch index {
        case 0:
            return TMBarItem(title: "트윗")
        case 1:
            return TMBarItem(title: "트윗 및 답글")
        case 2:
            return TMBarItem(title: "미디어")
        case 3:
            return TMBarItem(title: "마음에 들어요")
        default:
            let title = "Page \(index)"
           return TMBarItem(title: title)
        }
    }

    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
    }
}

---

TabMan 에니메이션 효과 정리 

https://uias.github.io/Tabman/master/

Tabman Reference

---

bar.indicator.overscrollBehavior

: 스크롤바가 옆으로 오버해서 넘어갈때의 효과를 보여줌

.bounce / .compress

---

bar.layout.alignment

: tabbar의 시작 위치를 설정

.center / .trailing /.centerDistributed

 

---

bar.layout.transitionStyle

: 전환할 때의 애니메이션 효과 

(뭐가 다른건지 사실 모르겠다 🤗 )

 

.progressive / .snap

 

참고 

https://uias.github.io/Tabman/master/

Tabman Reference

https://gonslab.tistory.com/17

iOS Swift 라이브러리 Tabman 사용하기

https://velog.io/@iammiori/iOS-opensource-tabman

[iOS-opensource] tabman (상단탭)