【Swift】NavigationBarの下の謎の余白を取り除きたい

実現したいこと

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

前提

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

マルチポストの理由

teratailのヘルプを確認していませんでした。
次回以降の質問ではマルチポストを行わないようにします。
https://ja.stackoverflow.com/questions/95225

発生している問題・エラーメッセージ

問題の画面（iPhone8）

期待通りの画面（iPhone11）

該当のソースコード

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

NavigationBarのAutoLayout設定

UIKit
1extension GraphViewController {
2  func navigationBarAutoLayoutSetting(){
3    graphView.navigationBar.translatesAutoresizingMaskIntoConstraints = false
4    
5    NSLayoutConstraint.activate([
6    graphView.navigationBar.topAnchor.constraint(equalTo: self.view.topAnchor),
7    graphView.navigationBar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
8    graphView.navigationBar.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
9    graphView.navigationBar.bottomAnchor.constraint(equalTo: graphView.graphAreaView.topAnchor)
10    ])
11  }
12}

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

UiKit
1extension GraphViewController {
2  func graphAreaViewAutoLayoutSetting() {
3
4    graphView.translatesAutoresizingMaskIntoConstraints = false
5
6    let bottomMargin = safeAreaBottom + 10.0
7    let leftMargin = safeAreaLeft + 5.0
8    let rightMargin = safeAreaRight + 5.0
9    
10    NSLayoutConstraint.activate([
11      graphView.graphAreaView.topAnchor.constraint(equalTo: self.view.topAnchor, constant:self.graphView.navigationBar.frame.size.height),
12      graphView.graphAreaView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: leftMargin),
13      graphView.graphAreaView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -rightMargin),
14      graphView.graphAreaView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -bottomMargin),
15    ])
16  }
17}
18

NavigationBarのカスタムViewの設定

UIkit
1extension GraphViewController {
2  func navigationBarTitleSetting (){
3    
4    let yearText = "2023"
5    let dateText = "5.1 - 5.31"
6    let dateFontSize: CGFloat = 18.0
7    let fontSize: CGFloat = 14.0
8    
9    // カスタムビューをインスタンス化
10    let customTitleView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 44))
11
12    // UILabelを作成してテキストを設定
13    let yearTextLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 22))
14    yearTextLabel.text = yearText
15    yearTextLabel.font = UIFont(name: "Thonburi", size: fontSize)
16    yearTextLabel.textColor = .black
17    yearTextLabel.sizeToFit()
18
19    let dateTextLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 22))
20    dateTextLabel.text = dateText
21    dateTextLabel.font = UIFont(name: "Thonburi-Bold", size: dateFontSize)
22    dateTextLabel.textColor = .black
23    dateTextLabel.sizeToFit()
24
25    //AutoLayoutを使用するための設定
26    yearTextLabel.translatesAutoresizingMaskIntoConstraints = false
27    dateTextLabel.translatesAutoresizingMaskIntoConstraints = false
28  
29    // カスタムビューにUILabelを追加
30    customTitleView.addSubview(yearTextLabel)
31    customTitleView.addSubview(dateTextLabel)
32
33    //AutoLayoutの設定
34    NSLayoutConstraint.activate([
35      yearTextLabel.centerYAnchor.constraint(equalTo: customTitleView.centerYAnchor),
36      yearTextLabel.leadingAnchor.constraint(equalTo: yearTextLabel.leadingAnchor),
37      yearTextLabel.trailingAnchor.constraint(equalTo: dateTextLabel.leadingAnchor, constant:  -12.0),
38
39      dateTextLabel.centerYAnchor.constraint(equalTo: customTitleView.centerYAnchor),
40      dateTextLabel.trailingAnchor.constraint(equalTo: dateTextLabel.trailingAnchor),
41      dateTextLabel.centerXAnchor.constraint(equalTo: customTitleView.centerXAnchor),
42    ])
43    //カスタムビューをNavigationBarに追加
44    graphView.navigationItem.titleView = customTitleView
45  }
46}

試したこと

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

【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

1T2R3M4

2023/06/14 06:47

https://ja.stackoverflow.com/questions/95225 以下ご対応ください。 https://teratail.com/help#posted-otherservice 行動規範に同意していないのでしょうか。

M.Kawashima

2023/06/14 08:05

申し訳ございません。ヘルプを確認しておりませんでした。本文にマルチポストの旨を追加しました。ご指摘ありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

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

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

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

XCodeのビューデバッカーを使用しNavigatonBarのViewヒエラルキーを確認したところ、最下層のNavigationBarの高さが44ptなのに対し、それより上位のViewの高さは32ptでした。なのでその差分の12ptが下にはみ出して表示されており、それが青い余白の原因でした。
なので最下層のNavigationBarの高さを上位のView達と同じ32ptにしたら余白が消えました。