Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

こんにちは :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など今後もう少し確認していきたいなと思いました。

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

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

KikurageChan
見て頂いてありがとうございます。
https://kikuragechan.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした