UIToolbarをコードで実装する方法(iPhone8,iPhone11対応)

1.はじめに

アプリ作成のために、UIToolbarが必要になったのですが、ストーリーボードを使わない方法で作成した場合、
昔の記事はSafeAreaという概念が無かったiPhoneX以前のものが多く、実装に苦労したので備忘録として掲載します。
（もし間違いがございましたら、遠慮なく指摘していただくと幸いです）

2.環境

Xcode Version 11.3.1

参考記事
Custom UIToolbar too close to the home indicator on iPhone X

3.　タブバーの高さを直打ちで入力した場合の問題

私が検索した限り、タブバーの高さは直打ちで決めていることが多かったように感じます。

例えば、こんな感じです。

コードを直打ちした場合、

import UIKit

class testVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBlue
        configureToolBar()
    }


    func configureToolBar() {

        // ツールバーの高さを直打ち
        let footerBarHeight: CGFloat = 100

        // ツールバーのインスタンス化
        let toolbar = UIToolbar(frame: CGRect(
            x: 0,
            y: self.view.bounds.size.height - footerBarHeight,
            width: self.view.bounds.size.width,
            height: footerBarHeight)
        )

        toolbar.barStyle = .black

        //戻るボタンの実装
        let backButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 40))
        backButton.setTitle("Back", for: .normal)
        backButton.addTarget(self, action: #selector(back), for: .touchUpInside)
        let backButtonItem = UIBarButtonItem(customView: backButton)

        //ボタンを左右に分けるためのスペースの実装
        let flexibleItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace,
        target: nil, action: nil)

        //進むボタンの実装
        let nextButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 100))
        nextButton.setTitle("Next", for: .normal)
        nextButton.addTarget(self, action: #selector(goToNext), for: .touchUpInside)
        let nextButtonItem = UIBarButtonItem(customView: nextButton)

        // ツールバーにアイテムを追加する.
        toolbar.items = [backButtonItem,flexibleItem,nextButtonItem]

        self.view.addSubview(toolbar)
    }

    // 戻るボタンをクリックした時の処理
    @objc func back() {
        print("戻るボタンがクリックされた")
    }

    // 進むボタンをクリックした時の処理
    @objc func goToNext() {
        print("進むボタンがクリックされた")
    }
}

ここでの

let footerBarHeight: CGFloat = 100

のように直打ちしてしまうと、下記の画像のように、
Appleのガイドラインには準拠していませんし、見た目もイマイチです。

4. SafeAreaLayoutGuideを使用した場合

この問題を解消するにあたり、SafeAreaLayoutGuideを使ったところ、下記の画像のようになりました。

       NSLayoutConstraint.activate([
            toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            toolbar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            toolbar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            toolbar.heightAnchor.constraint(equalToConstant: 50)
        ]) 

なお、コードはこのようになります。

SafeAreaLayoutGuideを使用した場合

import UIKit

class SelectPostImageVC: UIViewController {

    let toolbar = UIToolbar ()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBlue
        configureToolbar()
    }


    func configureToolbar() {
        self.view.addSubview(toolbar)
        toolbar.barStyle = .black
        toolbar.translatesAutoresizingMaskIntoConstraints = false

        //戻るボタンの実装
        let backButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 100))
        backButton.setTitle("Back", for: .normal)
        backButton.addTarget(self, action: #selector(back), for: .touchUpInside)
        let backButtonItem = UIBarButtonItem(customView: backButton)

        //ボタンを左右に分けるためのスペースの実装
        let flexibleItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace,
        target: nil, action: nil)

        //進むボタンの実装
        let nextButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 100))
        nextButton.setTitle("Next", for: .normal)
        nextButton.addTarget(self, action: #selector(goToNext), for: .touchUpInside)
        let nextButtonItem = UIBarButtonItem(customView: nextButton)

        // ツールバーにアイテムを追加する.
        toolbar.items = [backButtonItem,flexibleItem,nextButtonItem]

        self.view.addSubview(toolbar)

        //ここでSafeAreaLayoutGuideを使用
        NSLayoutConstraint.activate([
          toolbar.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor),
          toolbar.leadingAnchor.constraint(equalTo:view.safeAreaLayoutGuide.leadingAnchor),
          toolbar.trailingAnchor.constraint(equalTo:view.safeAreaLayoutGuide.trailingAnchor),
          toolbar.heightAnchor.constraint(equalToConstant: 50)
        ])
    }

      // 戻るボタンをクリックした時の処理
       @objc func back() {
           print("戻るボタンがクリックされた")
       }

       // 進むボタンをクリックした時の処理
       @objc func goToNext() {
           print("進むボタンがクリックされた")
       }
}