Why is UIBarButtonItem image always fuzzy/blurry/pixelated

Question

Here is my current code:

var reply = UIBarButtonItem(image: UIImage(named: "reply"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("reply:"))
self.navigationItem.rightBarButtonItem = reply

The button in the top right corner is always fuzzy. This is a screenshot from an iPhone4s device so it is not a retina-related issue.

I have tried different image sizes ranging from 30x30 to 512x512 and adding the image using customView. These methods have not fixed the issue.

Thanks in advance.

score 10 · Accepted Answer · answered Sep 15 '14 at 19:19

10

I have solved it using this method:

var replyBtn = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
replyBtn.setImage(UIImage(named: "reply"), forState: UIControlState.Normal)
replyBtn.addTarget(self.navigationController, action: Selector("reply:"), forControlEvents:  UIControlEvents.TouchUpInside)
var item = UIBarButtonItem(customView: replyBtn)
self.navigationItem.rightBarButtonItem = item

It displays a very crisp button using the exact same image.

answered Sep 15 '14 at 19:19

Mate Hegedus

2,887
1
19
30

If does not work with Swift 2 and xCode 6.4 Replace last line //self.navigationItem.rightBarButtonItem = item With self.navigationController?.navigationBar.topItem?.rightBarButtonItem = item – AiOsN Jul 15 '15 at 08:15

score 3 · Answer 2 · answered Sep 15 '14 at 18:38

3

From IOS human interface guide the icon should be 22x22 Take a look at the documentation here: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html

answered Sep 15 '14 at 18:38

LS_

6,763
9
52
88

score 0 · Answer 3 · answered Jun 02 '20 at 23:34

Try this:

func createBarButton(image: String, size: CGSize, offset: (x: CGFloat, y: CGFloat) = (0,0), hightlightable: Bool = true, action: Selector) -> UIBarButtonItem {
    let btn = UIButton(type: .custom)
    let img = UIImage(named: image)

    btn.setBackgroundImage(img, for: .normal)
    btn.addTarget(self, action: action, for: .touchUpInside)
    btn.frame = CGRect(x: offset.x, y: offset.y, width: size.width, height: size.height)
    btn.adjustsImageWhenHighlighted = hightlightable
    let view = UIView(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))
//        view.bounds = view.bounds.offsetBy(dx: offset.x, dy: offset.y)
    view.addSubview(btn)
    let barButton = UIBarButtonItem(customView: view)

    return barButton
}

self.navigationItem.rightBarButtonItem = createBarButton(image: "YOUR_IMAGE",
     size: CGSize(width: 35, height: 35),
     offset: (x: -10, y: 0),
     action: #selector(showXY))

Why is UIBarButtonItem image always fuzzy/blurry/pixelated

3 Answers3