LoginSignup
4
2

More than 3 years have passed since last update.

【Swift】UINavigationBarをUIViewControllerにstoryboardで追加する

Posted at

UINavigationBarを表示する際、普段であればUINavigationControllerを使っていると思います。
が、UIViewControllerだけで表示する方法を見つけたので書いておきたいと思います。
しかもコーディング無しです。

ざっと手順を書くと以下の様になります。
1. UIViewControllerの追加
2. UINavigationBarの追加
3. タイトルやボタン等の設定
4. Constraintsの追加
5. barPositionの追加 (今回の肝?)

それでは一つずつ見ていきましょう。

UIViewControllerの追加

スクリーンショット 2019-09-04 1.17.50.png

UIViewControllerをUIリストから追加します。

UINavigationBarの追加

スクリーンショット 2019-09-04 1.18.43.png

UINavigationBarをUIリストから追加します。
ここまでは簡単ですね。

タイトルやボタン等の追加

スクリーンショット 2019-09-04 1.21.08.png

ここは各々ご自由にどうぞ笑

Constraintsの追加

スクリーンショット 2019-09-04 2.02.22.png

付けたのは以下の4つです。
NavigationBar.Top = SafeArea.Top
NavigationBar.centerX = centerX
NavigationBar.leading = Safe Area.leading
NavigationBar.trailing = Safe Area.trailing

これで上部に張り付けつつ、左右には伸びる様になります。

これをしないとiPad等でおかしくなってしまいます。

barPositionの追加

そして、肝といっても良いのではないでしょうか。barPositionです。

スクリーンショット 2019-09-05 0.01.26.png

これがないまま実行すると上の画像の様になってしまいます。

これを解決するのがbarPositionというプロパティです。
UIBarPosition - UIKit | Apple Documentation

スクリーンショット 2019-09-05 0.04.07.png

こちらの図の様にUINavigationBarに対して barPosition = 3 をセットします。
barPositionの3はenumの topAttached です。

UIBarPosition.topAttached - UIKit

これを設定して実行すると。

スクリーンショット 2019-09-05 0.06.02.png

この様にノッチの部分までUINavigationBarが表示される様になります。
しかもコーディング0!

誰かのお役に立てば。

4
2
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
4
2