I want to add an image to UIBarButtonItem.
MY CODE:
let button1 = UIBarButtonItem(image: UIImage(named: "icon1"), style: .Plain, target: self, action: "Onb1ClickListener")
let button2 = UIBarButtonItem(image: UIImage(named: "icon2"), style: .Plain, target: self, action: "Onb2ClickListener")
let button3 = UIBarButtonItem(image: UIImage(named: "icon3"), style: .Plain, target: self, action: "Onb3ClickListener")
self.navigationItem.setRightBarButtonItems([button1, button2, button3], animated: false)
self.navigationItem.setHidesBackButton(true, animated: false)
this works but i get tinted blue images. how can i get the original images not tinted?
How can i add an image to the left of the UINavigationBar (not a bar button just a image)?
Thanks
The default image rendering case in a UIBarButtonItem is UIImageRenderingMode.AlwaysTemplate. So you have to create an image with the rendering options of UIImageRenderingMode.AlwaysOriginal, and set that image to the UIBarButtonItem. So:
let customImage = UIImage(named: "icon1")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
let button1 = UIBarButtonItem(image: customImage, style: .Plain, target: self, action: "Onb1ClickListener")
Related
I have set up a navigationBar and i'm trying to a PNG to the left as a leftBarButtonItem but it's showing up on the middle of the navigationBar.
private func configureNavBar() {
var image = UIImage(named: "netflixLogo") // PNG
image = image?.withRenderingMode(.alwaysOriginal)
//self.navigationController?.navigationBar.topItem?.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil) This didn't work either.
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
//These buttons are working, they are on the right side.
navigationItem.rightBarButtonItems = [
UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil),
]
navigationController?.navigationBar.tintColor = .white
}
This is what i see on the simulator:
enter image description here
It's on the left, but the image is just too wide and tall for the nav bar so is displayed aspect fitted in the center of its bounds
In my view controller that extends UIDocumentBrowserViewController, I did this
additionalTrailingNavigationBarButtonItems = [
UIBarButtonItem(
image: UIImage(systemName: "book"),
style: .plain,
target: self,
action: nil
),
UIBarButtonItem(
barButtonSystemItem: .bookmarks,
target: self,
action: #selector(onReaderButtonClicked)
),
]
and results in
But if I do similar things in another view controller that is shown by UINavigationController
navigationItem.rightBarButtonItems = [
UIBarButtonItem(
image: UIImage(systemName: "book"),
style: .plain,
target: nil,
action: nil
),
UIBarButtonItem(
barButtonSystemItem: .bookmarks,
target: nil,
action: nil
),
]
The two icon have the same size as I expected
Why is the result in pic 1 happened and how can i deal with it?
Try to add a custom button in your navigation bar, add bar button items array in right or left position like this:
let customButtonWithImage = UIButton(type: .system) // declare your button
now in view did load set image, title and assign array of buttons to your navigation bar:
let image = UIImage(systemName: "book")?.withRenderingMode(.alwaysTemplate)
customButtonWithImage.setImage(image, for: .normal)
customButtonWithImage.setTitle(" Select", for: .normal)
customButtonWithImage.titleLabel?.font = .systemFont(ofSize: 16, weight: .regular)
customButtonWithImage.setTitleColor(.white, for: .normal) // set text color
let customNavBarButton = UIBarButtonItem(customView: customButtonWithImage)
let navBarButton = UIBarButtonItem(image: UIImage(systemName: "book"), style: .plain, target: self, action: nil)
navigationItem.rightBarButtonItems = [customNavBarButton, navBarButton]
navigationController?.navigationBar.tintColor = .white // set tint color
This is the result:
I couldn't reproduce your issue, but be aware you're allowed to specify an UIImage.SymbolConfiguration object to be used, when creating an UIImage with the systemName: method.
The scale used on navigation items is .large. So if you create the image like this:
let config = UIImage.SymbolConfiguration(scale: .large)
let image = UIImage(systemName: "book", withConfiguration: config)
let button = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(ItemsTableViewController.settingsTapped))
self.navigationItem.leftBarButtonItem = button
It will create an image that matches the size of a UIBarButtonItem created using barButtonSystemItem:.
I'm learning how to use Swift, and I realized that I can't add a toolbar directly into a storyboard with a UITableViewController, so I'm struggling trying to add it programmatically.
This is what I'm trying to make it look like:
Now, I added this code:
let homeButton = UIBarButtonItem(title: "H", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let addButton = UIBarButtonItem(title: "+", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let loveButton = UIBarButtonItem(title: "Love", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let arr: [Any] = [homeButton, addButton, loveButton]
setToolbarItems(arr as? [UIBarButtonItem] ?? [UIBarButtonItem](), animated: true)
super.viewDidAppear(animated)
And it looks like this:
But I can`t find a way to make it look with the same spacing as the original, and also If I set the image I didn't find a way to adapt the size as I need it.
I tried using this code that I found here and seemed to work, but when I load my app, it simply shows the bar without any element.
navigationController?.setToolbarHidden(false, animated: true)
let homeButn = UIImage(named: "HomeButton")
let zeroPoint = CGPoint.zero
let settingsButton = UIButton(type: UIButtonType.custom) as UIButton
settingsButton.frame = CGRect(origin: zeroPoint, size: CGSize(width: 27, height: 27))
settingsButton.setImage(homeButn, for: [])
settingsButton.addTarget(self, action: #selector(ProfileButtonTapped), for: UIControlEvents.touchUpInside)
let rightBarButtonItem = UIBarButtonItem(customView: settingsButton)
navigationItem.setRightBarButton(rightBarButtonItem, animated: true)
I don't really know how to do this, any ideas? Thanks a lot!
Try this if it helps:
let flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
let homeButton = UIBarButtonItem(title: "H", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let flexibleSpace1 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
let addButton = UIBarButtonItem(title: "+", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let flexibleSpace2 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
let loveButton = UIBarButtonItem(title: "Love", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let arr: [Any] = [flexibleSpace, homeButton, flexibleSpace1, addButton, flexibleSpace2, loveButton]
setToolbarItems(arr as? [UIBarButtonItem] ?? [UIBarButtonItem](), animated: true)
super.viewDidAppear(animated)
You can add flexible space on left side of 'H' too to get left space.
I have the following code that adds a UIToolbar on the top of the keyboard when a textField is tapped.
How can I add a background image to one of the buttons?
I tried...
toolBar.items![1].setBackButtonBackgroundImage(clearButton, forState:.Normal, barMetrics:.Default)
but it didn't work, I get error...
Use of unresolved identifier 'imageName'
Code:
func addButtonsToKeyboard(){
let toolBar = UIToolbar(frame: CGRectMake(0, 0, self.view.frame.size.width, 50))
toolBar.barStyle = UIBarStyle.Default
toolBar.tintColor = UIColor.blueColor()
toolBar.barTintColor = UIColor.grayColor()
toolBar.items = [
UIBarButtonItem(title: "Button1", style: UIBarButtonItemStyle.Plain, target: self, action: #selector(someFunction)),
UIBarButtonItem(title: "Button2", style: UIBarButtonItemStyle.Plain, target: self, action: #selector(someFunction)),
UIBarButtonItem(title: "Button3", style: UIBarButtonItemStyle.Plain, target: self, action: #selector(someFunction))]
toolBar.sizeToFit()
toolBar.items![1].setBackButtonBackgroundImage(myImage, forState:.Normal, barMetrics:.Default)
myTextField.inputAccessoryView = toolBar
}
BTW - The image myImage is located in Assets.xcassets.
Perhaps you could try to create a UIImage variable, and then pass that in just to be more explicit:
var myImage = UIImage(named: "myImage")
toolBar.items![1].setBackButtonBackgroundImage(myImage, forState:.Normal, barMetrics:.Default)
I add a right navigation bar item that has a coloured background image:
let rightButton = UIBarButtonItem(image: UIImage(named: "avatar")!,
style: UIBarButtonItemStyle.Plain,
target: self,
action: #selector(self.rightNavBarItemAction))
navigationItem.rightBarButtonItem = rightButton
Instead of having the image as the background of the button (in colours), I get a white placeholder.
You can update the image's rendering mode to
UIImageRenderingMode.alwaysOriginal.
Swift 4.2:
let img = UIImage(named: "avatar")!.withRenderingMode(.alwaysOriginal)
let rightButton = UIBarButtonItem(image: img,
style: UIBarButtonItem.Style.Plain,
target: self,
action: #selector(self.rightNavBarItemAction))
Swift 4:
let img = UIImage(named: "avatar")!.withRenderingMode(.alwaysOriginal)
let rightButton = UIBarButtonItem(image: img,
style: UIBarButtonItemStyle.Plain,
target: self,
action: #selector(self.rightNavBarItemAction))
Swift 3:
let img = UIImage(named: "avatar")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
let rightButton = UIBarButtonItem(image: img,
style: UIBarButtonItemStyle.Plain,
target: self,
action: #selector(self.rightNavBarItemAction))
Alternatively you can set a custom view as in Vladimir's answer.
To achieve this you need a button UIButton, set the image of that button and then assigned it as the custom view if your UIBarButtonItem:
let button = UIButton()
button.frame = CGRectMake(0, 0, 51, 31)
button.setImage(UIImage(named: "avatar"), forState: .Normal)
button.addTarget(self, action: #selector(self.rightNavBarItemAction)), forControlEvents: .TouchUpInside)
let barButton = UIBarButtonItem()
barButton.customView = button
self.navigationItem.rightBarButtonItem = barButton