iosswiftswiftuiuiimageuinavigationbar

Changing color and symbol of 'Back' button on App Navigator, using Swift


I am trying to achieve the attached Back navigation look:

Desired Design for 'Back' Button

I want to keep the slide back functionality too.

From an Apple forum question from a year ago, what I am trying to do is "not officially supported". Still, I would like to ask here on Stack Overflow.
I need a clear distinction between the actual symbol, and the text of the button.

So far, I figured out three things:

  1. You can hide the standard navigation bar and the shadow by doing:
// Set up the UINavigationBarAppearance
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground() // Transparent background
appearance.shadowColor = nil // Remove shadow
appearance.backgroundColor = .clear // Clear background

// Apply appearance globally
UINavigationBar.appearance().standardAppearance = appearance
  1. You can change the standard navigation's "chevron.backwards" symbol of the button for another apple-provided symbol by doing:
// Set up the UINavigationBarAppearance
let appearance = UINavigationBarAppearance()

// Create a static black version of the back button image
let backImage = UIImage(systemName: [insert symbol name here])
appearance.setBackIndicatorImage(backImage, transitionMaskImage: backImage)
        
// Apply appearance globally
UINavigationBar.appearance().standardAppearance = appearance
  1. You can customize the standard navigation's "Back" text by doing:
// Customize back button appearance
let backButtonAppearance = UIBarButtonItemAppearance(style: .plain)
backButtonAppearance.normal.titleTextAttributes = [
    .font: UIFont.systemFont(ofSize: 16, weight: .medium),
    .foregroundColor: UIColor.black // Text color
]
appearance.backButtonAppearance = backButtonAppearance
        
// Apply appearance globally
UINavigationBar.appearance().standardAppearance = appearance

Then, all together, inside a view, it'd look like this (for me):

struct StartupPage2: View {
    init() {
        // Set up the UINavigationBarAppearance
        let appearance = UINavigationBarAppearance()
        appearance.configureWithTransparentBackground() // Transparent background
        appearance.shadowColor = nil // Remove shadow
        appearance.backgroundColor = .clear // Clear background

        // Customize back button appearance
        let backButtonAppearance = UIBarButtonItemAppearance(style: .plain)
        backButtonAppearance.normal.titleTextAttributes = [
            .font: UIFont.systemFont(ofSize: 16, weight: .medium), // Text font
            .foregroundColor: UIColor.black // Text color
        ]
        appearance.backButtonAppearance = backButtonAppearance

        // Create a static black version of the back button image
        let backImage = UIImage(systemName: "chevron.backward") // Change UIImage 
        appearance.setBackIndicatorImage(backImage, transitionMaskImage: backImage)
            
        // Apply appearance globally
        UINavigationBar.appearance().standardAppearance = appearance
    }

But then, I cannot find a way to change the color of the chevron to make it look like my design attached.


Solution

  • I believe you're missing tintColor for the back indicator image, try this:

    let backImage = UIImage(systemName: "chevron.backward")?
        .withTintColor(.purple, renderingMode: .alwaysOriginal) //<- put the desired color here
    
    appearance.setBackIndicatorImage(backImage, transitionMaskImage: backImage)