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

SwiftUIでナビゲーションバーの中央にロゴ画像を配置する方法

最近SwiftUIを触り始めて、巷でよく見るNavigationBarの中央にロゴ画像を配置する実装をしようとしたところ、少しつまづいたので、備忘録がわりに書きます。

最終的にSwiftUIで以下の画像の様な状態を目指します。
スクリーンショット 2020-06-24 20.40.34.png

UIKit

まずは、UIKitでナビゲーションバーで中央に画像を配置する場合はUIViewControllerのnavigationItemが持つtitleViewというプロパティにUIImageViewを設定することで、表示することができます。

import UIKit

class ViewController: UIViewController {

    func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.titleView = UIImageView(image: UIImage(named: "logo"))
    }
}

SwiftUI

SwiftUIで同じことをやろうとした場合、NavigationViewのタイトルの文字列を設定する関数は存在するのですが、どうやらUIKitでのtitleViewにあたる、ナビゲーションバーの中央にViewを配置する関数というのは存在しない様です。

import SwiftUI 

struct SwiftUIView: View {

    var body: some View {
        NavigationView {
            Text("Hello World")
                .navigationBarTitle("App Name", displayMode: .inline) 
                // 文字列は設定できるが、Imageは設定できない😱
        }
    }
}

スクリーンショット 2020-06-24 21.02.33.png

調べてみるとナビゲーションバー左右にViewを配置する関数を利用して、画像を配置してから、画面のサイズを元に中央に寄せる方法などもあったのですが、元来想定されていなさそうな使い方の様に感じたので、別の方法で試してみました。

それが以下の方法です。

import SwiftUI

struct SwiftUIView: View {

    var body: some View {
        ZStack(alignment: .top) {
            NavigationView {
                Text("Hello, World!")
                    .navigationBarTitle("", displayMode: .inline)
            }
            Image(uiImage: UIImage(named: "logo"))
                .resizable()
                .scaledToFit()
                .frame(width: nil, height: 44, alignment: .center)
        }
    }
}

alignmentを.topに設定したZStack(Viewの重なりを設定するStack)に、NavigationViewとImageを配置することで、最前面の上部であるナビゲーションバーの中央にImageを表示する仕組みです。

この様にすると無事、UIKitと同様にNavigationBarの上部にロゴが表示されました
スクリーンショット 2020-06-24 21.12.40.png

fr0g_fr0g
ダブルフロッグ
andfactory
Smartphone Idea Companyとして、人々の生活に「&(アンド)」を届ける。
https://andfactory.co.jp/
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
ユーザーは見つかりませんでした