How to set image for bar button with swift?

Question

I am trying to set an Image for bar button Item for that I have an image like:

enter image description here

with resolution 30 * 30 but while I assign this Image to Bar button Its looks like:

enter image description here

I have assigned image this way :

enter image description here

and If I try this way like making an IBOutlet for the button and set Image programatically form this question and code for that is:

 // Outlet for bar button
 @IBOutlet weak var fbButton: UIBarButtonItem!

// Set Image for bar button
var backImg: UIImage = UIImage(named: "fb.png")!
fbButton.setBackgroundImage(backImg, forState: .Normal, barMetrics: .Default)

but nothing happend with this,

Can anybody tell me what I am doing wrong?

or which is the batter way to do this?

score 110 · Accepted Answer · edited Oct 23 '18 at 05:08

I have achieved that programatically with this code:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //create a new button
        let button: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
        //set image for button
        button.setImage(UIImage(named: "fb.png"), forState: UIControlState.Normal)
        //add function for button
        button.addTarget(self, action: "fbButtonPressed", forControlEvents: UIControlEvents.TouchUpInside)
        //set frame
        button.frame = CGRectMake(0, 0, 53, 31)

        let barButton = UIBarButtonItem(customView: button)
        //assign button to navigationbar
        self.navigationItem.rightBarButtonItem = barButton
    }

    //This method will call when you press button.
    func fbButtonPressed() {

        println("Share to fb")
    }
}

And result will be:

Same way you can set button for left side too this way:

self.navigationItem.leftBarButtonItem = barButton

And result will be:

And if you want same transaction as navigation controller have when you go back with default back button then you can achieve that with custom back button with this code:

func backButtonPressed(sender:UIButton) {
    navigationController?.popViewControllerAnimated(true)
}

For swift 3.0:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //create a new button
        let button = UIButton.init(type: .custom)
        //set image for button
        button.setImage(UIImage(named: "fb.png"), for: UIControlState.normal)
        //add function for button
        button.addTarget(self, action: #selector(ViewController.fbButtonPressed), for: UIControlEvents.touchUpInside)
        //set frame
        button.frame = CGRect(x: 0, y: 0, width: 53, height: 51)

        let barButton = UIBarButtonItem(customView: button)
        //assign button to navigationbar
        self.navigationItem.rightBarButtonItem = barButton
    }

    //This method will call when you press button.
    func fbButtonPressed() {

        print("Share to fb")
    }
}

For swift 4.0:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //create a new button
        let button = UIButton(type: .custom)
        //set image for button
        button.setImage(UIImage(named: "fb.png"), for: .normal)
        //add function for button
        button.addTarget(self, action: #selector(fbButtonPressed), for: .touchUpInside)
        //set frame
        button.frame = CGRect(x: 0, y: 0, width: 53, height: 51)

        let barButton = UIBarButtonItem(customView: button)
        //assign button to navigationbar
        self.navigationItem.rightBarButtonItem = barButton
    }

    //This method will call when you press button.
    @objc func fbButtonPressed() {

        print("Share to fb")
    }
}

Great solution. I don't think you need to cast this as a UIButton `let button: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton` Actually, in Swift 2.1 we have this: `let button: UIButton = UIButton(type: UIButtonType.Custom)` — Keith Holliday, Jan 12 '16 at 16:53
For swift 4, you need to also add width and height constraint anchors to the `button`'s and set its `translatesAutoresizingMaskIntoConstraints` as false. eg. `button.widthAnchor.constriant(equalToConstant: 53).isActive = true` `button.heightAnchor.constraint(equalToConstant: 51).isActive = true` — kbunarjo, Feb 16 '18 at 22:54

score 50 · Answer 2 · answered Apr 18 '17 at 00:39

50

An easy solution may be the following

barButtonItem.image = UIImage(named: "image")

then go to your Assets.xcassets select the image and go to the Attribute Inspector and select "Original Image" in Reder as option.

answered Apr 18 '17 at 00:39

Anibal R.

798
9
12

Sometimes the answer is simpler than we think. Previously, I created a new UIBarButtonItem which is initialized w/ the image I was trying to change and assign that to the current UIBarButtonItem. Apparently, you don't have to that. Just set its image property of the current UIBarButtonItem to the image I was trying to change. ‍♂️. Thanks! – yohannes Jun 25 '17 at 12:34
3

Also, if the image is not within an assets catalog you can use the UIImage extension .withRenderingMode(.alwaysOriginal) to achieve the same thing. UIImage(named: "image").withRenderingMode(.alwaysOriginal) – Mike Feb 28 '18 at 21:12
1

This is the simplest answer for this question. It should be the accepted one instead of the overelaborated ones from above. – Mauricio Chirino Oct 06 '19 at 19:00

score 21 · Answer 3 · answered Feb 05 '16 at 21:18

21

Similar to the accepted solution, but you can replace the

let button: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton

with

let button = UIButton()

Here is the full solution, enjoy: (it's just a bit cleaner than the accepted solution)

let button = UIButton()
button.frame = CGRectMake(0, 0, 51, 31) //won't work if you don't set frame
button.setImage(UIImage(named: "fb"), forState: .Normal)
button.addTarget(self, action: Selector("fbButtonPressed"), forControlEvents: .TouchUpInside)

let barButton = UIBarButtonItem()
barButton.customView = button
self.navigationItem.rightBarButtonItem = barButton

answered Feb 05 '16 at 21:18

jungledev

4,195
1
37
52

add a colon at the end of fbButtonPressed – Abdul Waheed Jul 17 '16 at 06:38
@AbdulWaheed that's incorrect, because it isn't taking any arguments. – jungledev Jul 18 '16 at 14:52
1

You're amazing heidi! – Dew Time Jul 21 '17 at 18:56
3

For swift 4, you need to also add width and height constraint anchors to the `button`'s and set its `translatesAutoresizingMaskIntoConstraints` as false. eg. `button.widthAnchor.constriant(equalToConstant: 51).isActive = true` `button.heightAnchor.constraint(equalToConstant: 31).isActive = true` – kbunarjo Feb 16 '18 at 22:56

score 15 · Answer 4 · edited Aug 07 '17 at 23:20

15

Here's a simple extension on UIBarButtonItem:

extension UIBarButtonItem {
    class func itemWith(colorfulImage: UIImage?, target: AnyObject, action: Selector) -> UIBarButtonItem {
        let button = UIButton(type: .custom)
        button.setImage(colorfulImage, for: .normal)
        button.frame = CGRect(x: 0.0, y: 0.0, width: 44.0, height: 44.0)
        button.addTarget(target, action: action, for: .touchUpInside)

        let barButtonItem = UIBarButtonItem(customView: button)
        return barButtonItem
    }
}

edited Aug 07 '17 at 23:20

Michael Dautermann

88,797
17
166
215

answered May 23 '16 at 15:18

Jovan Stankovic

4,661
4
27
16

7

For swift 4, you need to also add width and height constraint anchors to the `button`'s and set its `translatesAutoresizingMaskIntoConstraints` as false. eg. `button.widthAnchor.constriant(equalToConstant: 44).isActive = true` `button.heightAnchor.constraint(equalToConstant: 44).isActive = true` – kbunarjo Feb 16 '18 at 22:55

score 12 · Answer 5 · answered Jul 26 '17 at 13:32

12

Only two Lines of code required for this

Swift 3.0

let closeButtonImage = UIImage(named: "ic_close_white")
        navigationItem.rightBarButtonItem = UIBarButtonItem(image: closeButtonImage, style: .plain, target: self, action:  #selector(ResetPasswordViewController.barButtonDidTap(_:)))

func barButtonDidTap(_ sender: UIBarButtonItem) 
{

}

answered Jul 26 '17 at 13:32

Sreekumar .K

121
1
2

Perfect! Short! and with the proper tint for UIBarButton! – Phuah Yee Keat May 11 '19 at 14:00

score 11 · Answer 6 · answered Apr 22 '16 at 21:02

I am using latest swift (2.1) and the answer (Dharmesh Kheni and jungledev) does not work for me. The image color was off (when setting in IB, it was blue and when setting directly in UIButton, it was black). It turns out I could create the same bar item with the following code:

let barButton = UIBarButtonItem(image: UIImage(named: "menu"), landscapeImagePhone: nil, style: .Done, target: self, action: #selector(revealBackClicked))
self.navigationItem.leftBarButtonItem = barButton

score 6 · Answer 7 · answered Feb 07 '18 at 08:03

You can use this code for multiple bar button with custom image:

self.navigationItem.leftBarButtonItem = nil

let button = UIButton(type: .custom)
button.setImage(UIImage (named: "ChatTab"), for: .normal)
button.frame = CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0)
//button.addTarget(target, action: nil, for: .touchUpInside)
let barButtonItem = UIBarButtonItem(customView: button)

let button2 = UIButton(type: .custom)
button2.setImage(UIImage (named: "ActivityTab"), for: .normal)
button2.frame = CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0)
//button.addTarget(target, action: nil, for: .touchUpInside)

let barButtonItem2 = UIBarButtonItem(customView: button2)
self.navigationItem.rightBarButtonItems = [barButtonItem, barButtonItem2]

Result will be this:

self.navigationItem.leftBarButtonItem = nil why this line – Mohmmad S Nov 18 '18 at 09:54 — Mohmmad S, Nov 18 '18 at 09:54
He must be getting back button ` – Yash Bedi Aug 28 '19 at 11:51 — Yash Bedi, Aug 28 '19 at 11:51

score 5 · Answer 8 · edited Feb 10 '20 at 20:53

5

Your problem is because of the way the icon has been made - it doesn't conform to Apple's custom tab bar icon specs:

To design a custom bar icon, follow these guidelines:

Use pure white with appropriate alpha transparency.
Don’t include a drop shadow.
Use antialiasing.

(From the guidelines.)

Something that would be possible looks like this. You can find such icons on most free tab bar icon sites.

edited Feb 10 '20 at 20:53

shim

9,289
12
69
108

answered Dec 16 '14 at 08:45

aparna

333
1
8

thanks for the reply and can you give me any website where I can download this kind of images? – Dharmesh Kheni Dec 16 '14 at 09:58

score 5 · Answer 9 · edited Jan 19 '19 at 03:24

5

Initialize barbuttonItem like following:

let pauseButton = UIBarButtonItem(image: UIImage(named: "big"),
                                  style: .plain,
                                  target: self,
                                  action: #selector(PlaybackViewController.pause))

edited Jan 19 '19 at 03:24

emrepun

2,496
2
15
33

answered Jan 19 '19 at 00:52

Eric Ford

51
2
2

score 3 · Answer 10 · answered Jun 27 '18 at 10:22

3

Swift 4.

@IBOutlet weak var settingBarBtn: UIBarButtonItem! {
    didSet {
        let imageSetting = UIImageView(image: UIImage(named: "settings"))
        imageSetting.image = imageSetting.image!.withRenderingMode(.alwaysOriginal)
        imageSetting.tintColor = UIColor.clear
        settingBarBtn.image = imageSetting.image
    }
}

answered Jun 27 '18 at 10:22

Kerim Khasbulatov

692
8
21

How to use it ? – Dipen Chudasama Dec 06 '18 at 10:40
use like this inside view controller: @IBOutlet weak var profileBarButton: UIBarButtonItem! { didSet { let imageSetting = UIImageView(image: UIImage(named: "staticUserProfile")) imageSetting.image = imageSetting.image!.withRenderingMode(.alwaysOriginal) imageSetting.tintColor = UIColor.clear profileBarButton.image = imageSetting.image } } – Egzon P. Oct 24 '19 at 13:27

score 2 · Answer 11 · answered Oct 20 '19 at 19:42

SwiftUI

.navigationBarItems modifier takes any view you want:

struct ContentView: View {
     var body: some View {
        NavigationView {
            Text("SwiftUI")
            .navigationBarItems(leading:
                HStack {
                    Image(systemName: "trash")
                    Text("Trash")
                }
            )
        }
    }
}

Leading with text[1]

.navigationBarItems(trailing: Image(systemName: "trash") )

.navigationBarItems(leading: Image(systemName: "trash.fill"),
                    trailing: Image(systemName: "trash")
)

You can use a button for each if you need an action for each of them.

score 2 · Answer 12 · answered Jan 30 '22 at 19:20

Swift 5+. Smooth solution to add ideal image as you desired dynamic Solution

func rightBarButtonItem(iconNameButton: String, selector: Selector) {
    let button = UIButton()
    button.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
    
    button.setImage(UIImage(named: iconNameButton), for: .normal)
    button.addTarget(self, action: selector, for: .touchUpInside)
    button.imageView?.contentMode = .scaleAspectFit

    let buttonBarButton = UIBarButtonItem(customView: UIView(frame: CGRect(x: 0, y: 0, width: 25, height: 25)))
    buttonBarButton.customView?.addSubview(button)
    buttonBarButton.customView?.frame = button.frame

    self.navigationItem.rightBarButtonItem = buttonBarButton
}

score 1 · Answer 13 · answered Oct 19 '20 at 07:57

1

Just choose Original image option when adding an image to assets in Xcode

answered Oct 19 '20 at 07:57

Nik

9,063
7
66
81

Craig · Answer 14 · 2017-08-09T03:43:37.137

If your UIBarButtonItem is already allocated like in a storyboard. (printBtn)

    let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
    btn.setImage(UIImage(named: Constants.ImageName.print)?.withRenderingMode(.alwaysTemplate), for: .normal)
    btn.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handlePrintPress(tapGesture:))))
    printBtn.customView = btn

score 0 · Answer 15 · answered Aug 02 '20 at 22:36

If you have set up your UIBarButtonItem with an image in the storyboard, one small hack to change the renderingMode is to add the following code to your viewDidLoad(). This way you don't have to resort to adding the entire button and image in code.

if let navButton = self.navigationItem.leftBarButtonItem, let buttonImage = navButton.image {
    navButton.image = buttonImage.withRenderingMode(.alwaysOriginal)
}

score 0 · Answer 16 · edited Jul 14 '22 at 05:08

0

navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Left",
        style: .plain,target: self, action: #selector(rightbarButtonAction))

navigationItem.rightBarButtonItem?.image = UIImage(named: "Notification Bell")

edited Jul 14 '22 at 05:08

Suraj Rao

29,388
11
94
103

answered Jul 14 '22 at 05:06

Muhammad Shafqat

179
1
4

How to set image for bar button with swift?

16 Answers16

SwiftUI

Linked

Related