4

I want to set custom images to the UIBarButtonItem but it only shows a rectangular box around and It doesn't show the actual image.

func setupBrowserToolbar() {
    let browser = UIToolbar(frame: CGRect(x: 0, y: 20, width: self.view.frame.width, height: 30))
    //配置返回组件
    let path = NSBundle.mainBundle().pathForResource("back", ofType: "png")
    let urlstr = NSURL(fileURLWithPath: path!)
    let data = NSData(contentsOfURL: urlstr)
    let btnback = UIBarButtonItem(image: UIImage(data: data!), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("backClicked:"))
    //分割按钮1
    let btngrap1 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
    //前进按钮
    let btnforward = UIBarButtonItem(image: UIImage(named: "forward.png"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("forwardClicked:"))
    //分割按钮2
    let btngrap2 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
    //重新加载
    let btnreload = UIBarButtonItem(image: UIImage(named: "reload.png"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("reloadClicked:"))
    //分割按钮3
    let btngrap3 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
    //停止加载
    let btnstop = UIBarButtonItem(image: UIImage(named:"stop.png"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("stopClicked:"))
    progress = UIProgressView((frame: CGRect(x: 0, y: 48, width: self.view.frame.width-50, height: 2)))
    progress.progress = 0
    browser.setItems([btnback, btngrap1, btnforward, btngrap2, btnreload, btngrap3, btnstop], animated: true)
    ptimer = NSTimer(timeInterval: 0.2, target: self, selector: Selector("loadProgress"), userInfo: nil, repeats: true)
    self.view.addSubview(browser)
}

my app screen shot

The above method is toolbar configuration but I don't know what is wrong.

Leo Dabus
  • 229,809
  • 59
  • 489
  • 571
XIAOHANG
  • 45
  • 6

2 Answers2

2

Thats because UIBarButtonItem image's default rendering mode always draw the image as a template image, ignoring its color information (UIImageRenderingModeAlwaysTemplate). Just create your image using UIImage's method imageWithRenderingMode always original.

UIImage(named: "yourImageName")!.withRenderingMode(.alwaysOriginal)
Leo Dabus
  • 229,809
  • 59
  • 489
  • 571
  • Thanks you for your help, could you tell me how do you know, I don't see this information in the official website of the description. – XIAOHANG Dec 05 '15 at 07:47
  • https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/occ/instm/UIBarButtonItem/initWithImage:style:target:action: – Leo Dabus Dec 05 '15 at 07:57
  • http://stackoverflow.com/a/32738254/2303865 you should also take a look at this one – Leo Dabus Dec 05 '15 at 08:00
  • The alpha values in the source image are used to create the images—opaque values are ignored.This sentence mean, the picture will be fully transparent, and then, just now you recommend me an article, it will use the tint color to fill the picture completely transparent part, is that right? – XIAOHANG Dec 05 '15 at 08:18
  • @XIAOHANG yes by default it will use the alpha and the tint color. if you need to change its color or size you need to use the rendering always original – Leo Dabus Dec 05 '15 at 08:23
  • one last link that might help you preparing your images http://stackoverflow.com/a/29874619/2303865 – Leo Dabus Dec 05 '15 at 08:48
  • I have a problem Can you help me? – XIAOHANG Dec 14 '15 at 07:50
  • @XIAOHANG sure. Sorry for the delay your message got lost in the middle of them all. Whats is your problem if you still have it? – Leo Dabus Dec 29 '15 at 20:30
0

Swift 3 , 4 update

From swift 3, the method is changed to the following format

UIImage(named:"yourImageName")!.withRenderingMode(.alwaysOriginal)
Community
  • 1
  • 1
Fangming
  • 24,551
  • 6
  • 100
  • 90