I am trying to achieve the attached Back navigation look:
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:
// 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
// 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
// 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.
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)