XLPagerTapStrip 을 이용해서 pagingTab 구현하기

 

XLPagerTapStrip 을 이용하여 코드로 여러 뷰 컨트롤러들의 페이징을 간단하게 연습해 보았습니다.

 

 

1) 코코아 팟으로 XLPagerTapStrip 인스톨 하기

pod 'XLPagerTabStrip', '~> 9.0'

 

2) MainViewController 에 ButtonBarPagerTabStripViewController 를 상속받아서 buttonBarView 레이아웃과 세팅 설정하기

import UIKit
import XLPagerTabStrip
import SnapKit

class MainViewController : ButtonBarPagerTabStripViewController {
    
    // MARK: - Properties

    // MARK: - LifeCycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setUI()
        configureButtonBar()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    // MARK: - Functions
    private func setUI() {
        view.backgroundColor = .white
        title = "XLPagerTapStrip"
        
        // buttonBarView 레이아웃 잡아주기
        buttonBarView.snp.makeConstraints {
            $0.top.equalTo(view.safeAreaLayoutGuide)
            $0.leading.trailing.equalToSuperview()
            $0.height.equalTo(40)
        }
        
        buttonBarView.backgroundColor = .white
        buttonBarView.selectedBar.backgroundColor = .blue
    }
    
    func configureButtonBar() {
        settings.style.buttonBarBackgroundColor = .white
        settings.style.buttonBarItemBackgroundColor = .white
        settings.style.buttonBarItemFont = UIFont.systemFont(ofSize: 16, weight: .bold)
        settings.style.buttonBarItemLeftRightMargin = 14
        settings.style.buttonBarMinimumLineSpacing = 0
        settings.style.buttonBarItemsShouldFillAvailableWidth = true
        settings.style.buttonBarLeftContentInset = 0
        settings.style.buttonBarRightContentInset = 0
        
        // Changing item text color on swipe
        changeCurrentIndexProgressive = { [weak self] (oldCell: ButtonBarViewCell?, newCell: ButtonBarViewCell?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
            guard changeCurrentIndex == true else { return }
            oldCell?.label.textColor = .lightGray
            newCell?.label.textColor = .blue
        }
    }

    // 각 뷰컨들 return
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
     
        let firstVC = FirstViewController()
        let secondVc = SecondViewController()
        let thirdVC = ThirdViewController()
        let fourthVC = FourthViewController()
        let fifthVC = FifthViewController()
        let sixthVC = SixthViewController()
        let seventhVC = SeventhViewController()
        let eighthVC = EighthViewController()
        let ninthVC = NinthViewController()
        let tenthVC = TenthViewController()
        return [firstVC, secondVc, thirdVC, fourthVC, fifthVC, sixthVC, seventhVC, eighthVC, ninthVC, tenthVC]
    }
}

 

3) 각 뷰컨트롤러들에 IndicatorInfoProvider 프로토콜을 채택하여 구현하기 (10번째 뷰컨까지 똑같이 구현)

import Foundation
import UIKit
import XLPagerTabStrip

class FirstViewController : UIViewController, IndicatorInfoProvider {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red
    }
    
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return IndicatorInfo(title: "1번째")
    }
}

 

• 관련 코드는 여기서 확인해주세요! Github