12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iOS11.0でUINavigationBarの高さが正しく表示されない現象について

Last updated at Posted at 2017-10-05

はじめに

こんにちは :leaves:
実装としてはあまり良くないのかもなのですが、アプリ画面を作成する際に
UINavigationControllerのような左右の遷移関係が無くても上側にNavigationBarが欲しい時があり、
私はNavigationItemのようなボタンがいい感じに収まるという理由でUINavigationBarを生成して使ってしまっています。
そこで、Xcode9.0にてUINavigationBarをStoryboardまたはコードで生成すると以下のようになってしまいます。

sketch222.png

解決方法

今回はカスタムクラスを作ってそれを充てて利用するようにしました。
Storyboardで正しく表示される方法などもカスタムクラスを作らずとも解決したかったのですが、少し厳しかったです...

CustomNavigationBar.swift
import UIKit

@IBDesignable class CustomNavigationBar: UINavigationBar {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        if #available(iOS 11.0, *) {
            for subview in self.subviews {
                let stringFromClass = NSStringFromClass(subview.classForCoder)
                if stringFromClass.contains("BarBackground") {
                    subview.frame = self.bounds
                } else if stringFromClass.contains("BarContentView") {
                    subview.frame.origin.y = UIApplication.shared.statusBarFrame.height
                    subview.frame.size.height = self.bounds.height - UIApplication.shared.statusBarFrame.height
                }
            }
        }
    }
}

@IBDesignableをつけることでStoryboardにて高さが正しく表示されました。
ただ、描画させるものが特にないため、本来の目的とは異なるので注意が必要です。

※ UINavigationBarの見た目の高さなどを調節しているようです。(UINavigationBarのsubviewsを表示させてみましたが、どれがどのような役割なのか詳しくは調べられませんでした...すみません)

UINavigationBar
  ├── UIBarBackground
  ├── UINavigationBarLargeTitleView
  ├── UINavigationBarContentView
  └── UINavigationBarModernPromptView

さいごに

Xcode9.0にてUINavigationBarの細かい変更点を完全には確認できなかったので、
今回は動かすための、とりあえずの回避のようになってしまいました...
safeAreaLayoutGuideなど今後もう少し確認していきたいなと思いました。

参考にさせていただいた記事

見て頂いてありがとうございます。

12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?