UITabBarControllerでモーダル遷移させたい！！！！！！！！

最近色んな所でエンジニアはブログを書いたほうが良いって言われるからそろそろ自分も書かなきゃなぁと思い少しずつ書いていこうかなと思い始めました。 ってことで、swiftでSNSアプリを開発をしている時にハマったのでその時のメモ。

UITabBarControllerでモーダル遷移させたいなぁ

インスタとかでもそうだけど、何かを投稿するVCを出すときってタブバーでボタンを押すとモーダル遷移になってるから自分もそれをやりたいなと思って実装しよう！！！ ってことでそれについて書いていきます。

注：基本的に全てコードで実装します

UITabBarController用のファイルを作成

cmd+nで UITabBarController用のswiftファイルを作成してください。ここまではいつもどおりですね。

そうすると作成されたファイルの中はこんな感じになっているますね。

import UIKit

class SampleTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

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

次にTabBarの設定を記述しよう

タブバーを作る際に必要な設定は3つほどです。

• タブバーに表示するVCを作る
• 作成したVCをタブバーにセットする

今回は3つのボタンを作成するためにFirstViewController, SecondViewController, ThirdViewControllerの3つを用意しました

タブバーに表示するVCを作る

これは、TabBarControllerのファイルでVCを作っていきます。 今回はSecondViewControllerをモーダル遷移させます。なので、ついでにモーダル遷移させるボタンとそのメソッドもここで書いてしまいましょう！

import UIKit

class SampleTabBarController: UITabBarController {

    private lazy var firstViewController: FirstViewController = {
        let con = FirstViewController()
        con.tabBarItem = UITabBarItem(
            title: "",
            image: UIImage(named: "写真")?.withRenderingMode(.alwaysOriginal),
            selectedImage: UIImage(named: "選択されたときの写真")?.withRenderingMode(.alwaysOriginal)
        )
    }()

    private lazy var secondVCButton: UIButton = {
        let button = UIButton()
        button.setBackgroundImage(UIImage(named: "ここに写真"), for: .normal)
        button.sizeToFit()
        button.addTarget(self, action: #selector(self.didTapButton(_:)), for: .touchUpInside)
        self.tabBar.addSubview(button)
        return button
    }()

    private lazy var thirdViewController: ThirdViewController = {
        let con = ThirdViewController()
        con.tabBarItem = UITabBarItem(
            title: "",
            image: UIImage(named: "写真")?.withRenderingMode(.alwaysOriginal),
            selectedImage: UIImage(named: "選択されたときの写真")?.withRenderingMode(.alwaysOriginal)
        )
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

　// SecondVCを表示するボタンの設定
    override func viewDidLayoutSubviews() {
        secondVCButton.frame = CGRect(origin: .zero, size: CGSize(width: 90, height: 75.375))
        secondVCButton.center = CGPoint(x: tabBar.bounds.width / 2, y: tabBar.bounds.height - (secondVCButton.bounds.height / 2))
    }

　// ボタンを押したときのアクション
　func didTapButton(_ button: UIButton) {
        let con = SecondViewController()
        present(con, animated: true, completion: nil)
    }
}

作成したVCをタブバーにセットする

次にVCをセットする作業をやっていきましょう〜 といっても、viewDidLoad内にちょこっと記述するだけで終わります。

override func viewDidLoad() {
        super.viewDidLoad()
　　 // 以下を追記
        let viewControllers: [UIViewController] = [
            firstViewController,
            thirdViewController
        ]

        setViewControllers(viewControllers, animated: false)
    }

これで一通り動く様になってますね！ ここではナビゲーションバーとか何も付けてないので、動きが付けられないですがこれをひな形に色々カスタマイズしてみてください〜！