実現したいこと
NavigationBarとグラフ表示用のViewとの間にある青い余白を取り除きたい。
前提
横向きの画面を作っていますが、iPhone8やSEなど画面サイズが小さいデバイスでシミュレーターを起動したら下の画像のようにNavigationBarとグラフを表示するViewとの間に謎の青い余白が表示されています。iPhone11など他のデバイスではこのような余白は表示されていないです。
NaviagtionBarにカスタムViewを設定しており、その部分かAutoLayoutの設定に問題があるのかと思い調査しましたが、この問題を自力で解決することができなかったのでご教示をお願いしたいです。
この質問はマルチポストしています
https://teratail.com/questions/rpz904caxl8gep
次回以降の質問ではマルチポストを行わないようにします。
発生している問題
コード
どこに原因があるがわからないので、他に記載した方が良い部分があれば指摘していただけると嬉しいです。
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の高さが正しく表示されない現象について