-0.3 C
New York
Tuesday, December 24, 2024

ios – Altering coloration and image of ‘Again’ button on App Navigator, utilizing Swift


I’m attempting to attain the hooked up Again navigation look:

Desired Design for 'Back' Button

I need to maintain the slide again performance too.

From an Apple discussion board query from a yr in the past, what I’m attempting to do is “not formally supported”. Nonetheless, I want to ask right here on Stack Overflow.
I would like a transparent distinction between the precise image, and the textual content of the button.

Up to now, I found out three issues:

  1. You’ll be able to cover the usual navigation bar and the shadow by doing:
// Arrange the UINavigationBarAppearance
let look = UINavigationBarAppearance()
look.configureWithTransparentBackground() // Clear background
look.shadowColor = nil // Take away shadow
look.backgroundColor = .clear // Clear background

// Apply look globally
UINavigationBar.look().standardAppearance = look
  1. You’ll be able to change the usual navigation’s “chevron.backwards” image of the button for one more apple-provided image by doing:
// Arrange the UINavigationBarAppearance
let look = UINavigationBarAppearance()

// Create a static black model of the again button picture
let backImage = UIImage(systemName: [insert symbol name here])
look.setBackIndicatorImage(backImage, transitionMaskImage: backImage)
        
// Apply look globally
UINavigationBar.look().standardAppearance = look
  1. You’ll be able to customise the usual navigation’s “Again” textual content by doing:
// Customise again button look
let backButtonAppearance = UIBarButtonItemAppearance(fashion: .plain)
backButtonAppearance.regular.titleTextAttributes = [
    .font: UIFont.systemFont(ofSize: 16, weight: .medium),
    .foregroundColor: UIColor.black // Text color
]
look.backButtonAppearance = backButtonAppearance
        
// Apply look globally
UINavigationBar.look().standardAppearance = look

Then, all collectively, inside a view, it’d appear to be this (for me):

struct StartupPage2: View {
    init() {
        // Arrange the UINavigationBarAppearance
        let look = UINavigationBarAppearance()
        look.configureWithTransparentBackground() // Clear background
        look.shadowColor = nil // Take away shadow
        look.backgroundColor = .clear // Clear background

        // Customise again button look
        let backButtonAppearance = UIBarButtonItemAppearance(fashion: .plain)
        backButtonAppearance.regular.titleTextAttributes = [
            .font: UIFont.systemFont(ofSize: 16, weight: .medium), // Text font
            .foregroundColor: UIColor.black // Text color
        ]
        look.backButtonAppearance = backButtonAppearance

        // Create a static black model of the again button picture
        let backImage = UIImage(systemName: "chevron.backward") // Change UIImage 
        look.setBackIndicatorImage(backImage, transitionMaskImage: backImage)
            
        // Apply look globally
        UINavigationBar.look().standardAppearance = look
    }

However then, I can’t discover a option to change the colour of the chevron to make it appear to be my design hooked up.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles