【SwiftUI】NavigationView使用時のタイトルのカスタマイズ

SwiftUIにおいて画面タイトルを表示する方法はいくつかありますが、NavigationView使用時は、navigationTitleモディファイアを使用することができます。

サンプルコード
1. navigationBarDisplayModeの指定内容
タイトルの色変更

サンプルコード

.navigationTitleで表示したいタイトルの文字を表示します。

import SwiftUI

struct TitleSample: View {
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationTitle("Title")
                .navigationBarTitleDisplayMode(.large)
        }
    }
}

navigationBarDisplayModeの指定内容

navigationBarDisplayModeモディファイアでタイトルの表示方法を指定できます。

.automatic	表示モードを継承する
.inline	ナヴィゲーションバー内に表示する
.large	大きくタイトルを表示する

.large

.inline

タイトルの色変更

タイトルの色を変更する際は、UINavigationBarクラスを使用することで変更が可能です。

以下はnavigationBarTitleDisplayModeが.largeの場合の設定方法です。

navigationBarAppearance.largeTitleTextAttributes

.inlineを指定している場合は、以下のとおり置き換えます。

navigationBarAppearance.titleTextAttributes

import SwiftUI

struct TitleSample: View {
    init() {
        //インスタンス生成
        let navigationBarAppearance = UINavigationBarAppearance()
        //largeTitleの属性を設定
        navigationBarAppearance.configureWithOpaqueBackground()
        navigationBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.blue, .font : UIFont.systemFont(ofSize: 40, weight: .bold)]
        //上記で生成したインスタンスを設定
        UINavigationBar.appearance().standardAppearance = navigationBarAppearance
    }
    var body: some View {
        NavigationView {
            VStack {
            Text("Hello, World!")
                .navigationTitle("Title")
                .navigationBarTitleDisplayMode(.large)
            }
        }
    }
}