0

I am trying to change the colour of the back bar button item in swift navigation bar.

Ultimately I aim to make something line this for the navbar: enter image description here

This is my current code which gives me three back arrows as the back button item but how do I change the colour so it is three different colours in one bit of text? (Green, Yellow, Red).

    func setCustomBackImage() {
        navigationItem.backBarButtonItem = UIBarButtonItem(title: "<<<", style: .plain, target: nil, action: nil)
    }
Hasnaine Shafiq
  • 73
  • 9
  • 1
    You can't. You would need to make this an image, not a text. The image could be an image _of_ text, but it would still need to be an image (not a `title`). – matt Dec 09 '19 at 21:24
  • Could you give some hint as of how to do that? I'm still fairly new to swift – Hasnaine Shafiq Dec 09 '19 at 21:27
  • https://developer.apple.com/documentation/uikit/uibarbuttonitem/1617163-init – matt Dec 09 '19 at 21:33
  • This is documentation pretty difficult for me to digest and actually use. How would I make this `image` as you say and change the colour of specific text characters within that image to achieve the desired three back arrows as seen in the original picture? – Hasnaine Shafiq Dec 09 '19 at 21:37

2 Answers2

2

There is a much more easier way, since you said " I'm still fairly new to swift ", here you go !

//add this in AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions 
launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

let backArrowImage = UIImage(named: "icon50")
let renderedImage = backArrowImage?.withRenderingMode(.alwaysOriginal)
UINavigationBar.appearance().backIndicatorImage = renderedImage
UINavigationBar.appearance().backIndicatorTransitionMaskImage = renderedImage
return true
// This will change all back-arrows to whatever image you want
}

Here "icon50" should that "<<<" image. Td:lr , use an image.

Hope it helps :)

Zyfe3r
  • 653
  • 6
  • 24
  • Thanks that is actually very useful. Do you have any idea how I can make this image consisting of the 3 back arrows? – Hasnaine Shafiq Dec 10 '19 at 12:32
  • 1
    Use paint :O ! Or in MAC , use GIMP 2.10 or PaintBrush (just google this, its free). Also if this solved your question,please mark it as correct answer. – Zyfe3r Dec 11 '19 at 04:07
1

This seems to be something like what you're describing:

enter image description here

Pretty simple if you use an image instead of a title for your bar button item.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • Oh yes, this is exactly what I am describing. Using the answer given by Zyfe3r I understand how I can replace all the back buttons with images but how did YOU create this image to begin with? – Hasnaine Shafiq Dec 10 '19 at 12:31
  • I didn’t create the image. You did. – matt Dec 10 '19 at 15:34