TabPageViewControllerでおしゃれなタブメニューを実現する

TabPageViewControllerというタブメニューを実現するライブラリを使ってみました。
このライブラリは有名なiQONで使われているということで、かなり期待できそうです。

github.com

UIPageViewControllerをつかって無限スクロールできるタブUIを実装してOSSとして公開しました - Start Today Technologies TECH BLOG

まずはCocoaPodsでインストールします。

target 'MyApp' do
  use_frameworks!

  pod 'TabPageViewController'
end

使い方は下のとおりです。
TabPageViewControllerのcreateメソッドで基本となるViewControllerを生成して、そこに色々加えていきます。

import UIKit
import TabPageViewController

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        
        let tabPageViewController = TabPageViewController.create()
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        tabPageViewController.tabItems = [(vc1, "First"), (vc2, "Second")]
        
        present(tabPageViewController, animated: true, completion: nil)
    }
}

起動すると下のようにタブメニューが表示されます。

isInfinityを付けると無限にスクロールする事ができます。

import UIKit
import TabPageViewController

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        
        let tabPageViewController = TabPageViewController.create()
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        tabPageViewController.tabItems = [(vc1, "First"), (vc2, "Second")]
        tabPageViewController.isInfinity = true
        
        present(tabPageViewController, animated: true, completion: nil)
    }
}

起動時の画面は下の通りです。

色やフォントサイズの情報は、TabPageViewControllerのoptionというプロパティーにセットします。
かなり細かくデザイン調整できそうです。

import UIKit
import TabPageViewController

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        
        let tabPageViewController = TabPageViewController.create()
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        tabPageViewController.tabItems = [(vc1, "First"), (vc2, "Second")]
        tabPageViewController.option.fontSize = 14
        tabPageViewController.option.currentColor = .cyan
        tabPageViewController.option.currentColor = .darkGray
        tabPageViewController.option.tabHeight = 60.0
        tabPageViewController.option.tabMargin = 40.0
        tabPageViewController.option.tabWidth = 100
        tabPageViewController.option.currentBarHeight = 80
        tabPageViewController.option.tabBackgroundColor = .lightGray
        tabPageViewController.option.pageBackgoundColor = .gray
        tabPageViewController.option.isTranslucent = true
        tabPageViewController.option.hidesTabBarOnSwipe = true
        
        present(tabPageViewController, animated: true, completion: nil)
    }
}

それとTabPageViewControllerがUINavigationControllerにセットされている場合、updateNavigationBarHiddenメソッドを使う事ができます。
このメソッドを呼び出すと、ナビゲーションバーがアニメーション付きで隠れます。

import UIKit
import TabPageViewController

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        
        let tabPageViewController = TabPageViewController.create()
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        tabPageViewController.tabItems = [(vc1, "First"), (vc2, "Second")]
        
        present(UINavigationController(rootViewController: tabPageViewController), animated: true, completion: {
            tabPageViewController.updateNavigationBarHidden(true, animated: true)
        })
    }
}

それから、displayControllerWithIndexを使うと任意のメニューを選ぶ事ができます。

import UIKit
import TabPageViewController

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        
        let tabPageViewController = TabPageViewController.create()
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        tabPageViewController.tabItems = [(vc1, "First"), (vc2, "Second")]
        
        present(UINavigationController(rootViewController: tabPageViewController), animated: true, completion: {
            tabPageViewController.displayControllerWithIndex(1, direction: .reverse, animated: true)
        })
    }
}