Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set the title of a NavigationView in SwiftUI to large title (or small)?

Using SwiftUI how do I change the navigation bar's title size? Choosing between a standard or a large title.

Difference between a large and a standard (inline) title

like image 728
Pomme2Poule Avatar asked Mar 10 '20 13:03

Pomme2Poule


People also ask

How do I change the navigation title in SwiftUI?

To customize a navigation bar title view in SwiftUI, we simply set ToolbarItem of placement type . principal to a new toolbar modifier. Text("Hello, SwiftUI!") <1> Because this is a customize of navigation bar title, a view needs to be embedded inside a NavigationView .

How do I customize my navigation bar in SwiftUI?

To change a navigation bar color in SwiftUI, you apply toolbarBackground modifier to the content view of NavigationStack . NavigationView is deprecated in iOS 16. toolbarBackground accepts two parameters. ShapeStyle : The style to display as the background of the bar.

What is NavigationView SwiftUI?

NavigationView is one of the most important components of a SwiftUI app, allowing us to push and pop screens with ease, presenting information in a clear, hierarchical way for users.


Video Answer


1 Answers

SwiftUI (Xcode 11.3)

SwiftUI navigationBarTitle modifier has an optional displayMode property which you can set to .inline for small titles and .large for large titles. See documentation

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitle("Test", displayMode: .inline) // ⬅️ Important part
}

How it's done in UIKit

Since iOS 11, UINavigationBar can display its title in standard and large title mode.

On UIKit, if you want to choose between the two behaviors you have to set the largeTitleDisplayMode property of your ViewController's navigationItem to decide if this particular view controller should display a large title or not.

Then, you need to check the prefersLargeTitle property of your Navigation Controller's navigationBar. Setting it to true will allow the ViewControllers in its navigation stack to display large titles. Conversely, setting it to false will prevent it, overriding the preference of the individual NavigationItems present in the stack.

This will display a large title in UIKit

// Set this property to true to allow NavigationItems to display large titles
let navigationController = UINavigationController()
navigationController.navigationBar.prefersLargeTitles = true

/*
 Choose between `always`, `never` and `automatic` to decide
 if this particular view controller should display a large title.
 */
let viewController = UIViewController()
viewController.navigationItem.largeTitleDisplayMode = .always
like image 151
Pomme2Poule Avatar answered Oct 26 '22 23:10

Pomme2Poule