SwiftUIでNavigationViewのtitleに画像を載せる

SwiftUIでNavigationViewのtitleに画像を載せる
Pocket

ロゴをNavigationViewのタイトルに載せる時なんてすごく多いと思うんですけど、navigationBarTitle()っていうメソッドはテキストしか受け付けてくれない。

ググってみるとstack overflowのこの投稿のような解決策(??)が出てくるんだけど、navigationBarItemsには端末毎に異なる微妙なpaddingが設定されているので、完全に中央に来させようと思うと、大変なハンドリングが必要になる。

どうしたものかなと考えていたら、もうViewを上から重ねちゃえば良いやという結論に至り、ZStackを使ったら綺麗に表示できた。

↓コード

var body: some View {
    ZStack(alignment: .top) {
        NavigationView {
            YourView()
        }
        Image("your_image")
    }
}

微妙にずれられたり、変に条件分岐が多くなるより、この方がいいでしょう。

あとは公式のnavigationBarImage()的なメソッドが生えるのを待つだけです。

SwiftUIのコードによるレイアウトは、直感的でわかりやすい反面、まだまだカスタマイズ性が微妙だったり、UIKit依存のところが残っていたりしますね。

(追記)

NavigationBarTitleってアニメーションが画面全体に連動して動いてくれることに旨味があることに気がつきました。

上のようにNavigationViewの外にあると遷移先のViewにもずっと残ってしまうという挙動になるし、NavigationViewの中に入れてしまうとNavigationBarに隠れてしまうしで意外と単純な話ではないですね。

自前でアニメーションをつけるなどの工夫が必要になりそうです。

せっかく記事を書いたけれど、未解決になっちゃってごめんなさい!SwiftUIに頑張ってもらいたい!

(追記終わり)

Pocket