SwiftUIの基本を身につけたい方はこちら

【SwiftUI】NavigationBarの戻るボタンの色や文字を変更する方法

この記事では、ナビゲーションバーの戻るボタンのカスタマイズについて解説していきたいと思います。

やりたいこと

ナビゲーションバーで遷移すると、戻るボタンが自動生成されます。この戻るボタンの文字は、前の画面のナビゲーションタイトルか、Backかのどちらかです。

日本語アプリなら「Back」ではなく、「戻る」の方が良いと思うので、文字を変えていきたいと思います。

こんな感じで「戻る」にして色を変えましょう。

実装方法

SwiftUIでは、戻るボタンのタイトルをカスタマイズできません。色だけなら.accentColor(.red)で変えられるのですが、タイトル文言は変更できませんでした。

そのため、toolbarで左上にボタンを上書きするという実装方法になります。

以下のように記述してください。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
struct NextView: View {
@Environment(\.dismiss) var dismiss
var body: some View {
Text("画面2")
.navigationBarBackButtonHidden(true)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: {
dismiss()
}) {
HStack {
Image(systemName: "chevron.backward")
.font(.system(size: 17, weight: .medium))
Text("戻る")
}
.foregroundColor(.green)
}
}
}
}
}
struct NextView: View { @Environment(\.dismiss) var dismiss var body: some View { Text("画面2") .navigationBarBackButtonHidden(true) .toolbar { ToolbarItem(placement: .navigationBarLeading) { Button(action: { dismiss() }) { HStack { Image(systemName: "chevron.backward") .font(.system(size: 17, weight: .medium)) Text("戻る") } .foregroundColor(.green) } } } } }
struct NextView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Text("画面2")
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        dismiss()
                    }) {
                        HStack {
                            Image(systemName: "chevron.backward")
                                .font(.system(size: 17, weight: .medium))
                            Text("戻る")
                        }
						.foregroundColor(.green)
                    }
                }
            }
    }
}
コード解説

まず、上書きするので、戻る処理を行わないといけません。

戻る処理は、以下の変数を追加し、

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@Environment(\.dismiss) var dismiss
@Environment(\.dismiss) var dismiss
@Environment(\.dismiss) var dismiss

戻りたいタイミングで、dismiss()を呼ぶだけです。

次に、以下のコードで元からあるBackボタンを削除します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.navigationBarBackButtonHidden(true)
.navigationBarBackButtonHidden(true)
.navigationBarBackButtonHidden(true)

そして、toolbarで左上に戻るボタンと同じアイコンを添えてText()でタイトルを変更します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: {
dismiss()
}) {
HStack {
Image(systemName: "chevron.backward")
.font(.system(size: 17, weight: .medium))
Text("戻る")
}
.foregroundColor(.green)
}
}
}
.toolbar { ToolbarItem(placement: .navigationBarLeading) { Button(action: { dismiss() }) { HStack { Image(systemName: "chevron.backward") .font(.system(size: 17, weight: .medium)) Text("戻る") } .foregroundColor(.green) } } }
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {
            dismiss()
        }) {
            HStack {
                Image(systemName: "chevron.backward")
                    .font(.system(size: 17, weight: .medium))
                Text("戻る")
            }
			.foregroundColor(.green)
        }
    }
}

評価