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

#1.はじめに

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

#2.環境
Xcode Version 11.3.1

参考記事
[Custom UIToolbar too close to the home indicator on iPhone X](https://stackoverflow.com/questions/48236375/custom-uitoolbar-too-close-to-the-home-indicator-on-iphone-x)

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

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

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

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

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("進むボタンがクリックされた")
    }
}

```

ここでの


```swift

let footerBarHeight: CGFloat = 100
```
のように直打ちしてしまうと、下記の画像のように、
**Appleのガイドラインには準拠していませんし**、見た目も**イマイチ**です。
![toolBar_qiita.001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471470/92fd43f7-4592-884d-552d-f3e2d8dd7452.png)


#4. SafeAreaLayoutGuideを使用した場合

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

```swift

       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)
        ]) 
```
![toolBar_qiita.002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471470/1db01b9b-3863-cae3-4210-e5e6eec360c9.png)

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

```swift: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("進むボタンがクリックされた")
       }
}
```