1

実現したいこと

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

前提

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

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

発生している問題

問題の画面(iPhone8)

期待通りの画面(iPhone11)

コード

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

NavigationBarのAutoLayout設定

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)
    ])
  }
}

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

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),
    ])
  }
}

NavigationBarのカスタムViewの設定

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
  }
}

試したこと

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

【Swift】Xcode9+iOS11でUINavigationBarが正しく表示できなくて困った話
iOS11.0でUINavigationBarの高さが正しく表示されない現象について

2

1 件の回答 1

0

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

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。