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

안녕하세요 Gons 입니다.

오늘은 안드로이드의 ViewPager 같은 라이브러리

Tabman 을 사용해보겠습니다.

 

기본탭바는 커스텀하기 힘들고 스크롤로 전환되지 않기 때문에

Tabman 을 사용해보겠습니다.

 

가시죠.

 

 

 

 

 

먼저 라이브러리 주소입니다.

https://github.com/uias/Tabman

 

 

 

 

라이브러리를 설치해주시고요.

pod 'Tabman', '~> 2.9'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

스토리보드에서 뷰컨트롤러들을 만들겠습니다.

ViewControllers

이런식으로 준비해주세요.

 

 

 

 

 

이제 ViewController 에서

라이브러리를 추가해주세요.

import Tabman
import Pageboy

※ 여기서 import 에 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

UIViewController 대신 TabmanViewController 를 상속받도록 고쳐 써줍니다.

class ViewController: TabmanViewController {

    private var viewControllers: Array<UIViewController> = []

    override func viewDidLoad() {
        super.viewDidLoad()

        let vc2 = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
        let vc3 = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "ViewController3") as! ViewController3
            
        viewControllers.append(vc2)
        viewControllers.append(vc3)
        
        self.dataSource = self

        // Create bar
        let bar = TMBar.ButtonBar()
        bar.layout.transitionStyle = .snap // Customize

        // Add to view
        addBar(bar, dataSource: self, at: .top)
    }
}

아까 만든 뷰컨트롤러 2개도 배열에 넣어줍니다.

 

 

 

 

 

extension(확장)으로 데이터 소스를 설정해줍니다.

(※익스텐션은 클래스 밖에다가 쓰면됩니다. 맨하단에 쓰면 됩니다. 파일로 따로 만들어도 되고요)

extension ViewController: PageboyViewControllerDataSource, TMBarDataSource {
    func barItem(for bar: TMBar, at index: Int) -> TMBarItemable {
        let item = TMBarItem(title: "")
        item.title = "Page \(index)"
        item.image = UIImage(named: "image.png")
        // ↑↑ 이미지는 이따가 탭바 형식으로 보여줄 때 사용할 것이니 "이미지가 왜 있지?" 하지말고 넘어가주세요. 
        
        return item
    }
    
    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

아주 부드럽게 실행되네요.

 

 

 

 

 

 

 

이제 조금 고쳐써보겠습니다.

bar 배경 스타일을 바꿀 수 있습니다. .regular 로 설정하면 약간 투명해집니다.

bar.backgroundView.style = .blur(style: .regular)

 

 

 

 

 

너무 왼쪽에 붙어있으니 20정도만 띄어보겠습니다.

bar.layout.contentInset = UIEdgeInsets(top: 0.0, left: 20.0, bottom: 0.0, right: 20.0)

보기 좋게 띄어졌네요.

 

 

 

 

 

버튼 색깔을 변경해보겠습니다.

bar.buttons.customize { (button) in
	button.tintColor = .white
	button.selectedTintColor = .black
}

선택되어 있을 때는 Black , 안되어 있을 때는 White 입니다.

 

 

 

 

 

인디케이터를 조정 해보겠습니다.

bar.indicator.weight = .heavy
bar.indicator.tintColor = .red

색깔과 두께를 설정 했습니다.

 

 

 

 

오버스크롤 동작도 변경해보겠습니다.

bar.indicator.overscrollBehavior = .compress

.compress

bar.indicator.overscrollBehavior = .bounce

.bounce

 

 

 

 

 

자 이번에는 ButtonBar 말고 TabBar 로 해보겠습니다.

image.png 를 하나 넣어주세요.

 

 

 

 

 

바 를 탭바로 고쳐써주세요.

//let bar = TMBar.ButtonBar()
let bar = TMBar.TabBar()

오류 나는 인디케이터 부분도 주석처리해주시고요.

 

 

 

 

 

바로 한번 실행해보겠습니다.

TMBar.TaabBar()

잘 나오네요.

 

 

 

 

 

뱃지 하나 달아보고 끝내겠습니다.

func barItem(for bar: TMBar, at index: Int) -> TMBarItemable {
        let item = TMBarItem(title: "")
        item.title = "Page \(index)"
        item.image = UIImage(named: "image.png")
        
        // 뱃지 추가
        item.badgeValue = "New"
        
        return item
}

badge

잘 나오네요.

 

 

 

끝.

 

 

 

자 오늘 이렇게 해서

Android 의 뷰페이저 와 비슷한

커스텀 TabBar 라이브러리 Tabman 을 사용해보았습니다.

저는 또 좋은 정보를 들고 오겠습니다.

다음 시간에 만나요.

감사합니다.