Change size of UIBarButtonItem (image) in Swift 3 - ios

Question

I am trying to change the size of some icons in my navBar, but I am a little confused as to how to do this? My code so far is:
func setUpNavBarButtons() {
let moreButton = UIBarButtonItem (image: UIImage(named:"ic_more_vert_3")?.withRenderingMode(.alwaysOriginal), style: .plain, target: self, action: #selector(handleMore))
navigationItem.rightBarButtonItems = [moreButton]
let refreshButton = UIBarButtonItem (image: UIImage(named:"ic_refresh")?.withRenderingMode(.alwaysOriginal), style: .plain, target: self, action: #selector(refreshDataButton))
navigationItem.leftBarButtonItems = [refreshButton]
}
any help?

Answer 1

This is how I did it
iOS 10 and below
func setUpMenuButton(){
let menuBtn = UIButton(type: .custom)
menuBtn.frame = CGRect(x: 0.0, y: 0.0, width: 20, height: 20)
menuBtn.setImage(UIImage(named:"menuIcon"), for: .normal)
menuBtn.addTarget(self, action: #selector(vc.onMenuButtonPressed(_:)), for: UIControlEvents.touchUpInside)
let menuBarItem = UIBarButtonItem(customView: menuBtn)
self.navigationItem.leftBarButtonItem = menuBarItem
}
iOS 11 - Navigation bar come up with Autolayout so frame setting may not work
func setUpMenuButton(){
let menuBtn = UIButton(type: .custom)
menuBtn.frame = CGRect(x: 0.0, y: 0.0, width: 20, height: 20)
menuBtn.setImage(UIImage(named:"menuIcon"), for: .normal)
menuBtn.addTarget(self, action: #selector(vc.onMenuButtonPressed(_:)), for: UIControlEvents.touchUpInside)
let menuBarItem = UIBarButtonItem(customView: menuBtn)
let currWidth = menuBarItem.customView?.widthAnchor.constraint(equalToConstant: 24)
currWidth?.isActive = true
let currHeight = menuBarItem.customView?.heightAnchor.constraint(equalToConstant: 24)
currHeight?.isActive = true
self.navigationItem.leftBarButtonItem = menuBarItem
}

Answer 2

Extension for Swift 4.2
Just a different way of implementation the answer provided by anoop4real
However using button type .system allows the global tint to be applied to your icon
Usage:
navigationItem.leftBarButtonItem = UIBarButtonItem.menuButton(self, action: #selector(presentSettings), imageName: "settings")
Implementation:
extension UIBarButtonItem {
static func menuButton(_ target: Any?, action: Selector, imageName: String) -> UIBarButtonItem {
let button = UIButton(type: .system)
button.setImage(UIImage(named: imageName), for: .normal)
button.addTarget(target, action: action, for: .touchUpInside)
let menuBarItem = UIBarButtonItem(customView: button)
menuBarItem.customView?.translatesAutoresizingMaskIntoConstraints = false
menuBarItem.customView?.heightAnchor.constraint(equalToConstant: 24).isActive = true
menuBarItem.customView?.widthAnchor.constraint(equalToConstant: 24).isActive = true
return menuBarItem
}
}

Answer 3

You can configure the frame of you button like below:
let icon = UIImage(named: "imageName")
let iconSize = CGRect(origin: CGPoint.zero, size: CGSize(width: 50, height: 50))
let iconButton = UIButton(frame: iconSize)
iconButton.setBackgroundImage(icon, for: .normal)
let barButton = UIBarButtonItem(customView: iconButton)
iconButton.addTarget(self, action: #selector(foo), for: .touchUpInside)
navigationItem.leftBarButtonItem = barButton

Answer 4

#DogCoffee answer is a great and creative way to solve the problem. May I suggest some slightly mods in order to take into account size and tintColor
extension UIBarButtonItem {
static func menuButton(_ target: Any?,
action: Selector,
imageName: String,
size:CGSize = CGSize(width: 32, height: 32),
tintColor:UIColor?) -> UIBarButtonItem
{
let button = UIButton(type: .system)
button.tintColor = tintColor
button.setImage(UIImage(named: imageName), for: .normal)
button.addTarget(target, action: action, for: .touchUpInside)
let menuBarItem = UIBarButtonItem(customView: button)
menuBarItem.customView?.translatesAutoresizingMaskIntoConstraints = false
menuBarItem.customView?.heightAnchor.constraint(equalToConstant: size.height).isActive = true
menuBarItem.customView?.widthAnchor.constraint(equalToConstant: size.width).isActive = true
return menuBarItem
}
}

Answer 5

In the end I did it like this and it worked:
let moreButton = UIButton(frame: CGRect(x: 0, y: 0, width: 35, height: 35))
moreButton.setBackgroundImage(UIImage(named: "ic_more_vert_3"), for: .normal)
moreButton.addTarget(self, action: #selector(TableViewController.handleMore), for: .touchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: moreButton)
Answer from: Change width of a UIBarButtonItem in a UINavigationBar in swift

Answer 6

If you are using SF symbol image, which is available from iOS 13, you could set the SF symbol image configuration.
let config = UIImage.SymbolConfiguration(pointSize: 30, weight: .light, scale: .default)
let image = UIImage(systemName: "plus.circle", withConfiguration: config)

Answer 7

Swift 5 extension using button closure, expanding on #valvoline 's answer.
As you can appreciate instead of using target and selector Button allows you to pass a closure.
extension UIBarButtonItem {
static func imageButton(
image: UIImage,
size: CGFloat = 24,
color: UIColor = .systemBackground,
action: #escaping () -> Void
) -> UIBarButtonItem {
// create ui button
let button = UIButton(type: .system)
// assign image
button.setImage(image, for: .normal)
button.tintColor = color
// assign action
button.addAction(.init(handler: { _ in action() }), for: .touchUpInside)
// create menu bar item using custom view
let menuBarItem = UIBarButtonItem(customView: button)
//use auto layout to assign bar button's size
menuBarItem.customView?.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate(
[
menuBarItem.customView?.heightAnchor.constraint(equalToConstant: size),
menuBarItem.customView?.widthAnchor.constraint(equalToConstant: size)
].compactMap { $0 }
)
return menuBarItem
}
}
Usage Example:
let item = UIBarButtonItem.imageButton(image: image, color: .systemBlue) {
print("You pushed it!") }

Answer 8

You can configure the bar buttons using this function:
public convenience init(customView: UIView)
And You can init the custom view as You desire.
After that You can access the view if needed via UIBarButtonItem's:
open var customView: UIView?
Hint: Because UIButton is a child class of UIView, You can directly use it too.