XLPagerTabStripで上タブを実装する

はじめに

iosには標準で下タブを表示するUITabBarConrollerが用意されていますが、上タブを実装するとなると標準のコンポーネントを使うことはできず自作するかOSSのどちらかになると思います。

今回はXLPagerTabStripを使って上タブを実装してみました、完成形はこんな感じです。

コード

RootになるVC

XLPagerTabStripでcustomCellを設定するにはinitializerでbuttonBarItemSpecを設定します。

cellに表示する画像やタイトルは子VCにIndicatorInfoを渡してconfigureメソッドに帰ってきたところで入れるようです。

buttonBarHeightなどの設定はviewDidLoadなどで呼び出したところうまく反映されてくれなかったのでinitialize時に呼び出すようにしています。

import UIKit
import XLPagerTabStrip

class ViewController: BaseButtonBarPagerTabStripViewController<UpperTabCollectionViewCell> {
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        buttonBarItemSpec = ButtonBarItemSpec.nibFile(nibName: "UpperTabCollectionViewCell", bundle: Bundle(for: UpperTabCollectionViewCell.self), width: { _ in
            return UIScreen.main.bounds.size.width/4
        })
        let cellHeight: CGFloat = 70
        let statusBarHeight = UIApplication.shared.statusBarFrame.height
        settings.style.buttonBarHeight = cellHeight + statusBarHeight
        
        // ボタンとボタンの間の感覚
        settings.style.buttonBarMinimumLineSpacing = 0
        //左右のインセット
        settings.style.buttonBarLeftContentInset = 0
        settings.style.buttonBarRightContentInset = 0
    }
        
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        return [
            HogeViewController(itemInfo: IndicatorInfo(title: "にんじん", image: UIImage(named: "ninjin"))),
            FugaViewController(itemInfo: IndicatorInfo(title: "さくらんぼ", image: UIImage(named: "cherry"))),
            HogeViewController(itemInfo: IndicatorInfo(title: "たけのこ", image: UIImage(named: "takenoko"))),
            FugaViewController(itemInfo: IndicatorInfo(title: "とまと", image: UIImage(named: "tomato")))
        ]
    }
    
    override func configure(cell: UpperTabCollectionViewCell, for indicatorInfo: IndicatorInfo) {
        cell.image.image = indicatorInfo.image?.withRenderingMode(.alwaysOriginal)
        cell.label.text = indicatorInfo.title
    }

}

子VC

Tabとして表示するVCはIndicatorInfoProviderに準拠する必要があります。

func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfoを実装する必要があるのでインジケータに表示させる画像やタイトルなどの任意のIndicatorInfoを渡す必要があります。

import UIKit
import XLPagerTabStrip

class HogeViewController: UIViewController, IndicatorInfoProvider {
    
    var itemInfo: IndicatorInfo
    
    init( itemInfo: IndicatorInfo) {
        self.itemInfo = itemInfo
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }
    
}

Tab用のcustomCell

cellに関しては特に特別なことをする必要はなくUICollectionViewCellを継承したクラスであれば良いみたいです。

class UpperTabCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var image: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

}