いきさつ

iPhoneX対応のことを一切考えないでNavigationBarをつけてたらiPhoneXで変になったので色々調べてた。
こちらにいい感じの記事があったので真似して作ってみた

構成はUIView+NavigationBar

作りたいのはこんな感じのNavigationBar。
背景としてNavigationBarに合わせたサイズのUIViewを使い、NavigationBarは高さ44でSafeArea内におく。
こうすることでNavigationBarにおいたボタンが隠れないで済む

いざ実装

navigationBarを作る

     func addNavigationBar(){
        //インスタンス生成してviewに入れる
        var navigationBar = UINavigationBar()
        self.view.addSubview(navigationBar)
        //navigationBarの色を透明にする
        navigationBar.setBackgroundImage(UIImage(), for: .default)
        navigationBar.shadowImage = UIImage()
        //navigationBarのサイズと位置を調整
        if #available(iOS 11.0, *) {
            //iOS11よりも上だったら(iPhoneXだろうがiPhone8だろうがiOSが11より上ならこっちでまとめて対応できる)
            navigationBar.frame.origin = self.view.safeAreaLayoutGuide.layoutFrame.origin
            navigationBar.frame.size = CGSize(width: self.view.safeAreaLayoutGuide.layoutFrame.width, height: 44)
        }else{
            //もしもiOS11よりも下だったら
            navigationBar.frame.origin = self.view.frame.origin
            navigationBar.frame.size = CGSize(width: self.view.frame.width, height: 44)
        }
     }

navigationView(背景)を作る

     func addNavBackView(){
        //背景用のviewのインスタンスを生成してviewに入れる
        var navigationView = UIView()
        self.view.addSubview(navigationView)
        //ここで背景変えてくれ
        navigationView.backgroundColor = UIColor.blue
        //navigationBarの背景のサイズと位置を調整
        if #available(iOS 11.0, *) {
            navigationView.frame.origin = self.view.safeAreaLayoutGuide.owningView!.frame.origin
            navigationView.frame.size = CGSize(width: self.view.safeAreaLayoutGuide.owningView!.frame.width, height: navigationBar.frame.origin.y + navigationBar.frame.height)
        }else{
            navigationView.frame.origin = self.view.frame.origin
            navigationView.frame.size = CGSize(width: self.view.frame.width, height: navigationBar.frame.origin.y + navigationBar.frame.height)
        }
     }

あとは`viewWillLayoutSubviews()`のなかで関数を呼ぶ

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        //順番とviewDidLoad()の中じゃないことに注意！！！
        addNavigationBar()
        addNavBackView()
    }

完成

やったー