

### 実現したいこと

NavigationBarとグラフ表示用のViewとの間にある青い余白を取り除きたい。

### 前提

横向きの画面を作っていますが、iPhone8やSEなど画面サイズが小さいデバイスでシミュレーターを起動したら下の画像のようにNavigationBarとグラフを表示するViewとの間に謎の青い余白が表示されています。iPhone11など他のデバイスではこのような余白は表示されていないです。  
NaviagtionBarにカスタムViewを設定しており、その部分かAutoLayoutの設定に問題があるのかと思い調査しましたが、この問題を自力で解決することができなかったのでご教示をお願いしたいです。

**この質問はマルチポストしています**  
<https://teratail.com/questions/rpz904caxl8gep>  
次回以降の質問ではマルチポストを行わないようにします。

### 発生している問題

問題の画面（iPhone8）  
[![](https://i.stack.imgur.com/JrgRb.png)](https://i.stack.imgur.com/JrgRb.png)

期待通りの画面（iPhone11）  
[![](https://i.stack.imgur.com/T1ooo.png)](https://i.stack.imgur.com/T1ooo.png)

### コード

どこに原因があるがわからないので、他に記載した方が良い部分があれば指摘していただけると嬉しいです。

NavigationBarのAutoLayout設定

[code]

    extension GraphViewController {
      func navigationBarAutoLayoutSetting(){
        graphView.navigationBar.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
        graphView.navigationBar.topAnchor.constraint(equalTo: self.view.topAnchor),
        graphView.navigationBar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        graphView.navigationBar.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        graphView.navigationBar.bottomAnchor.constraint(equalTo: graphView.graphAreaView.topAnchor)
        ])
      }
    }
    
[/code]

グラフ表示用のViewのAutoLayout設定

[code]

    extension GraphViewController {
      func graphAreaViewAutoLayoutSetting() {
    
        graphView.translatesAutoresizingMaskIntoConstraints = false
    
        let bottomMargin = safeAreaBottom + 10.0
        let leftMargin = safeAreaLeft + 5.0
        let rightMargin = safeAreaRight + 5.0
        
        NSLayoutConstraint.activate([
          graphView.graphAreaView.topAnchor.constraint(equalTo: self.view.topAnchor, constant:self.graphView.navigationBar.frame.size.height),
          graphView.graphAreaView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: leftMargin),
          graphView.graphAreaView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -rightMargin),
          graphView.graphAreaView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -bottomMargin),
        ])
      }
    }
    
[/code]

NavigationBarのカスタムViewの設定

[code]

    extension GraphViewController {
      func navigationBarTitleSetting (){
        
        let yearText = "2023"
        let dateText = "5.1 - 5.31"
        let dateFontSize: CGFloat = 18.0
        let fontSize: CGFloat = 14.0
        
        // カスタムビューをインスタンス化
        let customTitleView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 44))
    
        // UILabelを作成してテキストを設定
        let yearTextLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 22))
        yearTextLabel.text = yearText
        yearTextLabel.font = UIFont(name: "Thonburi", size: fontSize)
        yearTextLabel.textColor = .black
        yearTextLabel.sizeToFit()
    
        let dateTextLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 22))
        dateTextLabel.text = dateText
        dateTextLabel.font = UIFont(name: "Thonburi-Bold", size: dateFontSize)
        dateTextLabel.textColor = .black
        dateTextLabel.sizeToFit()
    
        //AutoLayoutを使用するための設定
        yearTextLabel.translatesAutoresizingMaskIntoConstraints = false
        dateTextLabel.translatesAutoresizingMaskIntoConstraints = false
      
        // カスタムビューにUILabelを追加
        customTitleView.addSubview(yearTextLabel)
        customTitleView.addSubview(dateTextLabel)
    
        //AutoLayoutの設定
        NSLayoutConstraint.activate([
          yearTextLabel.centerYAnchor.constraint(equalTo: customTitleView.centerYAnchor),
          yearTextLabel.leadingAnchor.constraint(equalTo: yearTextLabel.leadingAnchor),
          yearTextLabel.trailingAnchor.constraint(equalTo: dateTextLabel.leadingAnchor, constant:  -12.0),
    
          dateTextLabel.centerYAnchor.constraint(equalTo: customTitleView.centerYAnchor),
          dateTextLabel.trailingAnchor.constraint(equalTo: dateTextLabel.trailingAnchor),
          dateTextLabel.centerXAnchor.constraint(equalTo: customTitleView.centerXAnchor),
        ])
        //カスタムビューをNavigationBarに追加
        graphView.navigationItem.titleView = customTitleView
      }
    }
    
[/code]

### 試したこと

下記の記事等を参考に試行錯誤しましたが、解決できませんでした。

[【Swift】Xcode9+iOS11でUINavigationBarが正しく表示できなくて困った話](https://uruly.xyz/%E3%80%90swift%E3%80%91xcode9ios11%E3%81%A7uinavigationbar%E3%81%8C%E6%AD%A3%E3%81%97%E3%81%8F%E8%A1%A8%E7%A4%BA%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F%E3%81%A6%E5%9B%B0%E3%81%A3%E3%81%9F%E8%A9%B1/)  
[iOS11.0でUINavigationBarの高さが正しく表示されない現象について](https://qiita.com/KikurageChan/items/4152c2d8ac89c601a054)


CC BY-SA 4.0
2023-06-14T05:19:48.903
95225
2023-06-17T04:21:36.727
2023-06-14T09:00:33.897
3060
58618
question
swift xcode
NavigationBarの下の謎の余白を取り除きたい


以下のように自己解決しました。

**解決方法**  
NavigationBarの高さを32ptとする制約を追加した。

**問題の原因**  
NavigationBarとそれに乗っているViewとで高さに違いがあり、最下層のNavigationBarの下部分がはみ出していたため。

XCodeのビューデバッカーを使用しNavigatonBarのViewヒエラルキーを確認したところ、最下層のNavigationBarの高さが44ptなのに対し、それより上位のViewの高さは32ptでした。なのでその差分の12ptが下にはみ出して表示されており、それが青い余白の原因でした。  
なので最下層のNavigationBarの高さを上位のView達と同じ32ptにしたら余白が消えました。  
[![画像の説明をここに入力](https://i.stack.imgur.com/8W9TK.png)](https://i.stack.imgur.com/8W9TK.png)


CC BY-SA 4.0
2023-06-17T04:21:36.727
95271
2023-06-17T04:21:36.727
58618
95225
answer