How to change the icon of a Bar Button when presse

Question

I'm creating a stopwatch in Swift and I want to change the play icon I have selected for a bar button to a pause icon when the button is pressed to start the stopwatch. How do you do this?

Answer 1

I believe that you already found a solution for your question, but I'll leave this in case anyone still needs it.

UIBarButtonItem is not a UIControl, however you can initialise it with a custom view, i.e. a custom UIButton programmatically as follows:

let playButton = UIButton(frame: CGRectMake(0, 0, 30, 30))
playButton.addTarget(self, action: "togglePlay:", forControlEvents: .TouchUpInside)
playButton.setImage(UIImage(named: "play-active"), forState: .Normal)
playButton.setImage(UIImage(named: "play-inactive"), forState: .Selected)
let rightButton = UIBarButtonItem(customView: playButton)
self.navigationItem.setRightBarButtonItems([rightButton], animated: true)

idea from Custom "Pressed" UIBarButtonItem Backgrounds

Answer 2

You can not change a UIBarButtonItem's style during runtime. You must remove the UIBarButtonItem and then add the UIBarButtonItem you'd like.

@IBOutlet weak var toolBar: UIToolbar!
var pauseButton = UIBarButtonItem()
var playButton = UIBarButtonItem()
var arrayOfButtons = [AnyObject]()

override func viewDidLoad() {
    super.viewDidLoad()
    pauseButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Pause, target: self, action: "pauseButtonTapped")
    playButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Play, target: self, action: "playButtonTapped")

    arrayOfButtons = self.toolBar.items!
    arrayOfButtons.insert(playButton, atIndex: 0) // change index to wherever you'd like the button
    self.toolBar.setItems(arrayOfButtons, animated: false)
}

func playButtonTapped() {
    arrayOfButtons = self.toolBar.items!
    arrayOfButtons.removeAtIndex(0) // change index to correspond to where your button is
    arrayOfButtons.insert(pauseButton, atIndex: 0)
    self.toolBar.setItems(arrayOfButtons, animated: false)
}

func pauseButtonTapped() {
    arrayOfButtons = self.toolBar.items!
    arrayOfButtons.removeAtIndex(0) // change index to correspond to where your button is
    arrayOfButtons.insert(playButton, atIndex: 0)
    self.toolBar.setItems(arrayOfButtons, animated: false)
}

UIBarButtonItem Class Reference

Answer 3

For Swift 3

This is how I did it in Swift 3:

var favoritesBarButtonOn: UIBarButtonItem!
var favoritesBarButtonOFF: UIBarButtonItem!

favoritesBarButtonOn = UIBarButtonItem(image: #imageLiteral(resourceName: "TabBarIconSettingsOff"), style: .plain, target: self, action: #selector(didTapFavoritesBarButtonOn))
favoritesBarButtonOFF = UIBarButtonItem(image: #imageLiteral(resourceName: "TabBarIconSettingsOn"), style: .plain, target: self, action: #selector(didTapFavoritesBarButtonOFF))

self.navigationItem.rightBarButtonItems = [self.rightNavBarButton, self.favoritesBarButtonOn]

func didTapFavoritesBarButtonOn() {
    self.navigationItem.setRightBarButtonItems([self.rightNavBarButton, self.favoritesBarButtonOFF], animated: false)
    print("Show Favorites")
}

func didTapFavoritesBarButtonOFF() {
    self.navigationItem.setRightBarButtonItems([self.rightNavBarButton, self.favoritesBarButtonOn], animated: false)
    print("Show All Chat Rooms")
}

For Swift 4

var favoritesBarButtonOn: UIBarButtonItem! var favoritesBarButtonOFF: UIBarButtonItem!

favoritesBarButtonOn = UIBarButtonItem(image: #imageLiteral(resourceName: "TabBarIconSettingsOff"), style: .plain, target: self, action: #selector(didTapFavoritesBarButtonOn))
favoritesBarButtonOFF = UIBarButtonItem(image: #imageLiteral(resourceName: "TabBarIconSettingsOn"), style: .plain, target: self, action: #selector(didTapFavoritesBarButtonOFF))

self.navigationItem.rightBarButtonItems = [self.favoritesBarButtonOn]

func didTapFavoritesBarButtonOn() {
    self.navigationItem.setRightBarButtonItems([self.favoritesBarButtonOFF], animated: false)
    print("Show Favorites")
}

func didTapFavoritesBarButtonOFF() {
    self.navigationItem.setRightBarButtonItems([self.favoritesBarButtonOn], animated: false)
    print("Show All Chat Rooms")
}