Requested
Considered
39k occasions
This can be a SwiftUI query, not a UIKit one. 🙂
I am making an attempt to set a unique font for the navigation bar title utilizing SwiftUI. My suspicion is that this is not supported but. This is what I’ve tried:
var physique: some View {
NavigationView {
.navigationBarTitle(Textual content("Dashboard").font(.subheadline), displayMode: .giant)
}
}
It doesn’t matter what I do with the .font
settings, it would not change the textual content. I’ve additionally tried setting a customized font and eradicating the displayMode
property.
Has anybody been in a position to get this to work?
In SwiftUI, at this level we can’t change the navigationBarTitle
font instantly, however you possibly can change navigationBar look like this,
struct YourView: View {
init() {
//Use this if NavigationBarTitle is with Giant Font
UINavigationBar.look().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
//Use this if NavigationBarTitle is with displayMode = .inline
//UINavigationBar.look().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
}
var physique: some View {
NavigationView {
Textual content("Good day World!")
.navigationBarTitle(Textual content("Dashboard").font(.subheadline), displayMode: .giant)
//.navigationBarTitle (Textual content("Dashboard"), displayMode: .inline)
}
}
}
I hope this may enable you. Thanks!!
1
In iOS 14 SwiftUI you possibly can customise a View navigation bar title with the toolbar modifier, set ToolbarItem of placement sort .principal to a brand new toolbar modifier.
NavigationView {
Textual content("any textual content")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
VStack {
Textual content("Nav Title")
.font(.system(dimension: 20))
.foregroundColor(Colour.black)
}
}
}
}
1
If that you must use new Rounded face for SF household you need to use this snippet
let design = UIFontDescriptor.SystemDesign.rounded
let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .largeTitle)
.withDesign(design)!
let font = UIFont.init(descriptor: descriptor, dimension: 48)
UINavigationBar.look().largeTitleTextAttributes = [.font : font]
4
I am not an enormous fan of modifying issues within the view’s Inits nevertheless, I am undecided of a greater manner. As a substitute, I moved it to a ViewModifier to maintain issues tidier:
struct SpecialNavBar: ViewModifier {
init() {
UINavigationBar.look().largeTitleTextAttributes = [.font: UIFont(name: "Georgia-Bold", size: 20)!]
}
func physique(content material: Content material) -> some View {
content material
}
}
extension View {
func specialNavBar() -> some View {
self.modifier(SpecialNavBar())
}
}
Then to make use of:
struct MyView: View {
var physique: some View {
NavigationView {
content material
.specialNavBar()
}
}
}
2
All of the settings you want are inside init(). Play with them and perceive what’s liable for what. A few hours in the past, this code helped me to grasp the Navigation Bar settings. I do not bear in mind the place I discovered it.
struct ContentView: View {
init() {
// this isn't the identical as manipulating the proxy instantly
let look = UINavigationBarAppearance()
// this overrides every part you could have arrange earlier.
look.configureWithTransparentBackground()
// this solely applies to massive titles
look.largeTitleTextAttributes = [
.font : UIFont.systemFont(ofSize: 20),
NSAttributedString.Key.foregroundColor : UIColor.white
]
// this solely applies to small titles
look.titleTextAttributes = [
.font : UIFont.systemFont(ofSize: 20),
NSAttributedString.Key.foregroundColor : UIColor.white
]
//Within the following two traces you just be sure you apply the fashion for good
UINavigationBar.look().scrollEdgeAppearance = look
UINavigationBar.look().standardAppearance = look
// This property is just not current on the UINavigationBarAppearance
// object for some purpose and you need to depart it til the top
UINavigationBar.look().tintColor = .white
}
var physique: some View {
NavigationView {
ZStack {
Colour.black
.edgesIgnoringSafeArea([.all])
NavigationLink(vacation spot: ContentView2()) {
Textual content("push")
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarBackButtonHidden(true)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct ContentView2: View {
var physique: some View {
ZStack {
Colour.black
.edgesIgnoringSafeArea([.all])
NavigationLink(vacation spot: ContentView()) {
Textual content("push")
}
}
.navigationBarTitle("My Customized White title", displayMode: .inline)
}
}
P. S: The code is taken from right here
If you wish to keep away from affecting the looks of all UINavigationBars when modifying UINavigationBar.look()
, contemplate the next code:
import SwiftUI
struct NavigationStyleLayer: UIViewControllerRepresentable {
@MainActor
last class ViewController: UIViewController {
override func viewDidLoad() {
tremendous.viewDidLoad()
view.backgroundColor = .clear
view.isUserInteractionEnabled = false
}
override func didMove(toParent dad or mum: UIViewController?) {
tremendous.didMove(toParent: dad or mum)
if let navigationController = dad or mum?.navigationController as? UINavigationController {
navigationController.navigationBar.standardAppearance.largeTitleTextAttributes = [.font: UIFont.systemFont(ofSize: 17.0)]
}
}
}
func makeUIViewController(context: Context) -> ViewController {
.init()
}
func updateUIViewController(_ uiViewController: ViewController, context: Context) {
}
}
In your SwiftUI View code…
import SwiftUI
struct SwiftUIView: View {
var physique: some View {
NavigationStack {
Textual content("Good day, World!")
.navigationTitle("Good day World!")
.background {
NavigationStyleLayer()
}
}
}
}
Can each change giant and small titles.
It may be higher with extra default init, but it surely’s sufficient for me.
init() {
NavigationBarConfigurator.configureTitles()
}
struct NavigationBarConfigurator {
static func configureTitles() {
let look = UINavigationBarAppearance()
let design = UIFontDescriptor.SystemDesign.rounded
if let descriptorWithDesign = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .largeTitle)
.withDesign(design),
let descriptorWithTraits = descriptorWithDesign.withSymbolicTraits(.traitBold) {
let font = UIFont(descriptor: descriptorWithTraits, dimension: 34)
look.largeTitleTextAttributes = [.font: font, .foregroundColor: UIColor.label]
}
if let smallTitleDescriptorWithDesign = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .headline) .withDesign(design) {
let smallTitleFont = UIFont(descriptor: smallTitleDescriptorWithDesign, dimension: 24)
look.titleTextAttributes = [.font:smallTitleFont, .foregroundColor: UIColor.label]
}
UINavigationBar.look().standardAppearance = look
}
}
lang-swift