How to add / use default icons to navigation bar - ios

I want to use some of default iOS icons i.e.
in navigation bar.
Basically I don't know how to call image of that item (directly from native library - I know how to download it and place as custom image:)):
var myButton:UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
myButton.addTarget(self, action: "reload", forControlEvents: UIControlEvents.TouchUpInside)
myButton.setImage(???, forState: <#UIControlState#>)

You can use UIBarButtonSystemItem this way:
let button = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Refresh, target: self, action: "someAction")
navigationItem.leftBarButtonItem = button
Result for leftBarButtonItem:
If you want to set it at right side you can use this code:
navigationItem.rightBarButtonItem = button
Result for rightBarButtonItem:

Swift: These are the most commonly used options:
To Use custom image with original colour:
let customImageBarBtn1 = UIBarButtonItem(
UIImage(named: "someImage.png").withRenderingMode(.alwaysOriginal),
style: .plain, target: self, action: #selector(handleClick))
To Use custom image with tint colour:
let customImageBarBtn2 = UIBarButtonItem(
UIImage(named: "someImage.png").withRenderingMode(.alwaysTemplate),
style: .plain, target: self, action: #selector(handleClick))
Or use system provided buttons:
let systemBarBtn = UIBarButtonItem(
barButtonSystemItem: .search,
target: self, action: #selector(handleClick))
Then add any one of these buttons to the navigationItem:
navigationItem.leftBarButtonItems = [customImageBarBtn1, customImageBarBtn2]
navigationItem.rightBarButtonItems = [systemBarBtn]
// OR you can use this if there's only one item.
navigationItem.rightBarButtonItem = systemBarBtn
For custom Images: As a starting size, 22ptx22pt images work well for the default iPhone Navigation Bar size.

In swift 4.3
let btnRefresh = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.refresh, target: self, action: #selector(targeted function to invoke))
//If you want icon in left side
navigationItem.leftBarButtonItem = btnRefresh
//If you want icon in right side
navigationItem.rightBarButtonItem = btnRefresh

Related

How to set a Custom image programmatically to and UIBarButtonItem

I am having a problem assigning a custom image to an UIBarButtonItem, the main problem is that the image appears as an white square when create the button.
here is my code:
fileprivate func configureNavigationBar() {
tabBarController?.navigationItem.title = lot.name
let exportImg: UIImage = UIImage(named: "action.png")!
let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(showCreationView(_:)))
let exportByEmail = UIBarButtonItem(image: exportImg, style: .done, target: self, action: #selector(exportDataByEmail(_:)))
tabBarController?.navigationItem.rightBarButtonItems = [exportByEmail,addButton]
}
The problem is with the exportByEmail, image is in the variable exportImg added from my assets:
The result obtained from my code:
Your image's background must be transparent, and you can set always original rendering mode to image, to display without changes as following
let exportByEmail = UIBarButtonItem(image: exportImg.withRenderingMode(.alwaysOriginal), style: .done, target: self, action: #selector(exportDataByEmail(_:)))

UIBarButtonItem position incorrect on < iOS 11

On iOS 10 and below my bar buttons are positioned incorrectly within the nav bar. What could be causing this?
This is the function to set the button:
func setBarButton(image: UIImage?, position: BarButtonPosition, target: AnyObject, selector: Selector) -> Void {
let barButton = UIBarButtonItem(title: "", style: .plain, target: target, action: selector)
barButton.image = image
if position == .left {
navigationItem.leftBarButtonItem = barButton
navigationItem.leftBarButtonItem?.tintColor = UIColor.zbPrimary
} else {
navigationItem.rightBarButtonItem = barButton
navigationItem.rightBarButtonItem?.tintColor = UIColor.zbPrimary
}
}
And where I am calling the function within viewDidLoad:
setBarButton(image: #imageLiteral(resourceName: "settings-icon"), position: .right, target: self, selector: #selector(openSettings))
This only happens for UIBarButtonItem where an image is being set, not those with just a title or custom view
The title of your question was misleading but after reading your question I realized it was the same problem I had on one of my projects.
I was setting the barButtonItem title through code and when I changed it from:
navigationItem.leftBarButtonItem?.title = ""
To:
navigationItem.leftBarButtonItem?.title = nil
The problem disappeared.
I almost lost a entire day to fix this.
I hope this solves the problem for you.

rightBarButtonItem not showing on physical device

I am building an e-commerce application that has shopping cart in rightBarButtonItem.I have implemented extension to add shopping cart barButtonItem in every UIViewControllers.My barButtonItem is showing properly in simulator devices ( including iPhone 6s,iPhone SE and iPhoneX simulators ).But it is not showing on my physical device ,iPhone 6s.Could anyone help me how to trace this issue?? Thanks for your attention
Here is my code
extension UIViewController{
func addCartBarButtonItem(){
let cartButton = UIButton(type: .custom)
cartButton.setImage(UIImage(named:"cart"), for: .normal)
cartButton.widthAnchor.constraint(equalToConstant: 28.0).isActive = true
cartButton.heightAnchor.constraint(equalToConstant: 28.0).isActive = true
cartButton.addTarget(self, action: #selector(self.goCheckOutController), for: .touchUpInside)
let cartBarButtonItem = UIBarButtonItem(customView: cartButton)
cartBarButtonItem.addBadge(number: CartDataManager.loadItems().count)
self.navigationItem.rightBarButtonItem = cartBarButtonItem
}
}
Try this,
var rightSearchBarButtonItem : UIBarButtonItem?
func addCartButtonToNavigationBar(){
self.rightSearchBarButtonItem = UIBarButtonItem(image: #imageLiteral(resourceName: "cart") , style: UIBarButtonItemStyle.plain, target: self, action: #selector(goCheckOutController))
self.navigationItem.rightBarButtonItem = self.rightSearchBarButtonItem;
}
This code is working for me

custom barbuttonItem doesn't show up

I have made a custom bar button item at my navigation controller and it was working fine but it doesn't anymore.
This is the lines that I use to make the custom bar button :
func addSlideMenuButton(){
let btnShowMenu = UIButton(type: UIButtonType.Custom)
//btnShowMenu.setImage(self.defaultMenuImage(), forState: UIControlState.Normal)
btnShowMenu.setImage(UIImage(named: "barBtnMenu"), forState: UIControlState.Normal)
btnShowMenu.frame = CGRectMake(0, 0, 30, 30)
btnShowMenu.addTarget(self, action: "onSlideMenuButtonPressed:", forControlEvents: UIControlEvents.TouchUpInside)
let customBarItem = UIBarButtonItem(customView: btnShowMenu)
// self.navigationItem.rightBarButtonItem = customBarItem;
self.navigationItem.leftBarButtonItem = customBarItem;
}
the image exists and there is no error or crash .
Even If I add the bar button item from soryboard , When I run the application it would hidden my bar button item.
What could be wrong ?
func addSlideMenuButton() {
let customBarItem = UIBarButtonItem(image: UIImage(named: "barBtnMenu"), style: .Plain, target: self, action: "onSlideMenuButtonPressed")
self.navigationItem.leftBarButtonItem = customBarItem;
}
A couple of options come to mind
Are you sure you're not setting navigationItem.hidesBackButton = true anywhere in that UIViewController?
Are you sure you're not adding another UINavigationBar on top of the one provided by the system?

Changing navigation bar back button image size globally

Currently I am using the following code to produce a custom back button image for my navbars:
appearance.backIndicatorImage = UIImage(named: "arrow-back")
appearance.backIndicatorTransitionMaskImage = UIImage(named: "arrow-back")
Unfortunately my image is large so it looks better on retina devices, and this method just displays the default size. Any way to shrink it down to get it fitting nicely?
My code will help you
let btnImg = UIImage(named: "Location_OnMap")
let btn = UIBarButtonItem(image: btnImg, style: .Plain, target: self, action: "doSomthing")
self.navigationItem.leftBarButtonItem = btn

Resources