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
Related
I want to put logo of my app as button on left of the navbar.
I tried to implement the same by calling configureNavbar() function in init of the veiw controller.
Definition of the function is as follows:
private func configureNavbar(){
var image = UIImage (named: "NetflixLogo")
image = image?.withRenderingMode(.alwaysOriginal)
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: nil)
}
By this I am getting logo in middle of the navbar like this:
But by using:
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),
]
I can see items at right of navbar.
Pls help how can I align app logo to the left?
This is what I am getting in debug hierarchy
In viewDidLoad set your custom view and add to navbar like a custom view:
let leftNavBarImageView = UIImageView()
leftNavBarImageView.image = UIImage(named: "yourImage")
leftNavBarImageView.contentMode = .scaleAspectFill
leftNavBarImageView.backgroundColor = .white
leftNavBarImageView.layer.cornerRadius = 4 // if you don't want corner radius comment this
leftNavBarImageView.clipsToBounds = true
leftNavBarImageView.widthAnchor.constraint(equalToConstant: 40).isActive = true // set inage view width constraint
leftNavBarImageView.heightAnchor.constraint(equalToConstant: 40).isActive = true // set inage view height constraint
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: leftNavBarImageView) // add left bar nutton custom view
This is the result:
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.
dI have a uitoolbar that has two buttons, First one is a System Button item Camera, second is a System item flixable space, and third is a Plain Button with text. However, when the toolbar comes up, the first button is centered but the Plain button is not.
Any idea on how to change the right button to center vertically?
This is the code on setting up the toolbar:
let sendButton = UIBarButtonItem(title: "test", style: .Plain, target: self, action: #selector(MyClass.test(_:)))
let toolBarItems = [UIBarButtonItem(barButtonSystemItem: .Camera, target: self, action: nil),
UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: self, action: nil),
sendButton]
Here is the code i tried .
import UIKit
class ViewController2 : UIViewController {
#IBOutlet weak var mytoolbar: UIToolbar!
override func viewDidLoad() {
super.viewDidLoad();
let sendButton = UIBarButtonItem(title: "test", style: .Plain, target: self, action: nil)
let toolBarItems = [UIBarButtonItem(barButtonSystemItem: .Camera, target: self, action: nil),
UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: self, action: nil),
sendButton]
mytoolbar.items = toolBarItems
}
}
Edit : I'm using the below code to create the uitoolbar programmatically.
let mytoolbar = UIToolbar.init(frame: CGRect(x: 0 , y: 0, width:self.view.frame.size.width, height: 44))
mytoolbar.backgroundColor = UIColor.blueColor()
let sendButton = UIBarButtonItem(title: "test", style: .Plain, target: self, action: nil)
let toolBarItems = [UIBarButtonItem(barButtonSystemItem: .Camera, target: self, action: nil),
UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: self, action: nil),
sendButton]
mytoolbar.items = toolBarItems
self.view.addSubview(mytoolbar)
Hope this helps now
Here are the results:
It is centered i guess . Can you show me your code to add UIToolbar ?
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")