【Swift4.0】TabPageViewControllerを設定したら画面が黒くなった

Question

前提・実現したいこと

https://tech.starttoday-tech.com/entry/tab_page_viewcontroller
ページ先のサンプル画面のように、上にも下にもタブメニューを表示できるようにしたいです。

発生している問題・エラーメッセージ

CocoaPodsを使用してTabPageViewControllerを使用できるようにして、公式サンプルを入力したら、下のタブバーは表示されましたが、それ以外の部分の画面が黒くなってしまいました。

UITabBarControllerを使用してUIViewControllerを作成し、作成したUIViewControllerにTabPageViewControllerを使用としてます。
初心者でこの使い方で正しいのかもよくわかりませんが、どなたかご教示願います。

該当のソースコード

Swift4.0

import UIKit
import TabPageViewController

class FirstViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    
    let tc = TabPageViewController.create()
    let vc1 = UIViewController()
    vc1.view.backgroundColor = UIColor(red: 251/255, green: 252/255, blue: 149/255, alpha: 1.0)
    let vc2 = UIViewController()
    vc2.view.backgroundColor = UIColor(red: 252/255, green: 150/255, blue: 149/255, alpha: 1.0)
    let vc3 = UIViewController()
    vc3.view.backgroundColor = UIColor(red: 149/255, green: 218/255, blue: 252/255, alpha: 1.0)
    let vc4 = UIViewController()
    vc4.view.backgroundColor = UIColor(red: 149/255, green: 252/255, blue: 197/255, alpha: 1.0)
    let vc5 = UIViewController()
    vc5.view.backgroundColor = UIColor(red: 252/255, green: 182/255, blue: 106/255, alpha: 1.0)
    tc.tabItems = [(vc1, "Mon."), (vc2, "Tue."), (vc3, "Wed."), (vc4, "Thu."), (vc5, "Fri.")]
    tc.isInfinity = true
    let nc = UINavigationController()
    nc.viewControllers = [tc]
    var option = TabPageOption()
    option.currentColor = UIColor(red: 246/255, green: 175/255, blue: 32/255, alpha: 1.0)
    tc.option = option
    navigationController?.pushViewController(tc, animated: true)
    
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

}

補足情報（FW/ツールのバージョンなど）

Answer 1

navigationController?.pushViewController(tc, animated: true)はnavigationControllerを使った画面遷移になります。
UITabBarControllerのひとつの画面としてTabPageViewController を設定したいのであればUITabBarController を作ってあげて、それにのっけてあげるだけです。

import UIKit
import TabPageViewController

class FirstViewController: UITabBarController {
    
    override func viewDidLoad() {
        
        // tabbarで扱う画面の配列
        var viewControllers: [UIViewController] = []
        
        let tc = TabPageViewController.create()
        tc.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.bookmarks, tag: 1) // tabBarItemの設定
        viewControllers.append(tc) // viewControllersにセット
        
        let vc1 = UIViewController()
        vc1.view.backgroundColor = UIColor(red: 251/255, green: 252/255, blue: 149/255, alpha: 1.0)
        let vc2 = UIViewController()
        vc2.view.backgroundColor = UIColor(red: 252/255, green: 150/255, blue: 149/255, alpha: 1.0)
        let vc3 = UIViewController()
        vc3.view.backgroundColor = UIColor(red: 149/255, green: 218/255, blue: 252/255, alpha: 1.0)
        let vc4 = UIViewController()
        vc4.view.backgroundColor = UIColor(red: 149/255, green: 252/255, blue: 197/255, alpha: 1.0)
        let vc5 = UIViewController()
        vc5.view.backgroundColor = UIColor(red: 252/255, green: 182/255, blue: 106/255, alpha: 1.0)
        tc.tabItems = [(vc1, "Mon."), (vc2, "Tue."), (vc3, "Wed."), (vc4, "Thu."), (vc5, "Fri.")]
        tc.isInfinity = true

        var option = TabPageOption()
        option.currentColor = UIColor(red: 246/255, green: 175/255, blue: 32/255, alpha: 1.0)
        tc.option = option
        
        // UITabBarControllerに扱う画面をセットする。
        self.setViewControllers(viewControllers, animated: true)
        
    }
}

UITabBarについては以下などを参考に。
UITabBarControllerをコードから使ってみる

Comments

[Kuma44]

ありがとうございます！画面が表示されました。

追加でお尋ねしたいのですが、タブメニューをクリックしたら該当ページに移り、タブメニューも中央に表示されるようになりましたが、例えば「mon」を開いている時に「wed」をクリックすると画面が切り替わるみたいに「wed」が中央へ表示されています。

「wed」をクリックするとゆっくり中央へ移動するようにするにはどうすればいいでしょうか。

[razuma]

とりあえず、状況的には理想の動きをさせたければライブラリの中身を見てコードを書き換える必要があります。ライブラリ内のTabView.swiftの236行目、moveCurrentBarViewにて上部タブが押されたときの動きが制御されていて、上部タブはcollectionViewになっているからcollectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: animated)がスクロールする部分で今、animatedがfalseになってくるパターンがあるのでとりあえずtrueに書き換えてあげてたところ、アニメーションはするようになりましたが、うまくタブが制御されないパターン出てきてしまいました。updateCurrentIndexからcurrentIndexがわたってきてその下の方の処理がされているようですがanimatedがtrue固定だとcurrentIndexがズレてしまうようです。なので、とりあえずcollectionView.scrollToItemのanimatedをtrueにすればゆっくり？かはわかりませんが、スクロールアニメーションはつきます。それ以上にコントロールしたければ自分でアニメーションを実装する感じになると思います。ライブラリの中身については今さらっと見ただけなのでどこを修正するべきかはもうちょっと見てみないとといったかんじです。ライブラリを使う際には作者側が用意してくれている機能以外を実装したい場合には自分で中の実装を理解して改造してやる必要があるのでちょっと手間になります（手を加えて良いかなどはライセンスにもよったりします）今回のTabPageViewControllerに関してはそこまで中身難しいものでもないので見てみるのも良いかもしれません。

[Kuma44]

返信気付かず遅くなってしまい申し訳ないです。
お調べいただきましてありがとうございます。
急ぎ変えたい部分ではないので、一旦このまま進めて変更したい時にまた確認させていただきます。