[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 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に入れることもできます.

方法は、作成したコンテンツビューのサイズが所望のサイズと同じである場合、右側にコンテンツビューのサイズと同じVCを作成することです.このVCを上に設定したTabmanViewControlに設定します.また、画面はContainer Viewを含むVCを再生することによって必要な結果を得ることができる.

3.運転画面