【Swift UI】ナビゲーションバーのタイトルフォントやサイズを変更する方法

この記事からわかること

  • Swift UI NavigationStack使い方
  • ナビゲーションバータイトル文字サイズ変更する方法
  • navigationBarTitleDisplayモディファイアの使い方
  • TitleDisplayModeと型とは?
  • フォント(書体)を変更するには?

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献: Set the Navigation Bar Title Font with SwiftUI

ナビゲーションバーのタイトルサイズを変更する方法

SwiftUIで以下のようなNavigationStackで実装しているナビゲーションバーのタイトルの文字サイズをシステムの範囲で変更するにはnavigationBarTitleDisplayModeモディファイアを使用します。ですがこれは列挙型TitleDisplayModeに定義済みの値を設定しているので自由に文字サイズを指定しているわけではないので注意してください。

【Swift UI】ナビゲーションバーのタイトルフォントやサイズを変更する方法
struct TestNavigationView: View {
    var body: some View {
        NavigationStack{
            Text("MainView")
                .navigationTitle("Navigation Title")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

TitleDisplayMode型

TitleDisplayMode型に定義されている値は以下の通りです。

enum TitleDisplayMode {
  case automatic  // 前のナビゲーションアイテムから継承
  case inline     // ナビゲーションバー内に表示
  case large      // 大きなタイトルを表示
}

large

【Swift UI】ナビゲーションバーのタイトルフォントやサイズを変更する方法

タイトルの文字サイズを自由に変更する方法

タイトルの文字サイズをfontモディファイアなどを使用して自由に指定するにはtoolbarモディファイアを使用してナビゲーションタイトルを自前で実装する必要があります。

toolbarモディファイアにToolbarItem構造体を渡しprincipal(中央配置)を指定します。

【Swift UI】ナビゲーションバーのタイトルフォントやサイズを変更する方法
NavigationStack{
    Text("MainView")
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Navigation Title")
                    .foregroundColor(.cyan)
                    .font(.system(size: 18))
            }
        }
}

この方法であれば Viewとして扱えるので文字サイズだけでなく、カラーや余白など自由にカスタマイズすることが可能になります。

フォント(書体)を変更する

フォント(書体)を変更したい場合はfont(.system(_,design: Font.Design))を使用することで書体を変更できます。

【Swift UI】ナビゲーションバーのタイトルフォントやサイズを変更する方法

navigationTitleでは適用されない

【Swift UI】ナビゲーションバーのタイトルフォントやサイズを変更する方法
Only unstyled text can be used with navigationTitle(_:)

navigationTitleモディファイアの引数にはText構造体を直接指定できるイニシャライザも用意されていますが、以下のように文字サイズなどを変更しようとしても変更できないようになっています。

.navigationTitle(Text("Navigation Title").foregroundColor(.gray).font(.system(size: 18,design:.monospaced)))

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index