This question already has an answer here:
How to make custom right UIBarButtonItem with image and label?
(1 answer)
Closed 5 years ago.
How to add an image and label to my navigation on leftBarButtonItem?
I have assigned an image to my navigation item like this:
let notifButton = UIButton(frame: CGRect(x: 0.0, y: 0.0, width: 40.0, height: 40.0) )
notifButton.setImage(UIImage(named: "notifications_white"), for: UIControlState.normal)
notifButton.addTarget(self, action: #selector(self.notifButtonCLicked), for: UIControlEvents.touchUpInside)
let leftBarButtonItem = UIBarButtonItem(customView: notifButton)
self.UIViewController?.navigationItem.leftBarButtonItem = leftBarButtonItem
let button = UIButton(type: .custom)
button.setImage(UIImage(named: "icon_right"), for: .normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
button.frame = CGRect(x: 0, y: 0, width: 53, height: 31)
button.imageEdgeInsets = UIEdgeInsetsMake(-1, 32, 1, -32)//move image to the right
let label = UILabel(frame: CGRect(x: 3, y: 5, width: 20, height: 20))
label.font = UIFont(name: "Arial-BoldMT", size: 16)
label.text = "title"
label.textAlignment = .center
label.textColor = .black
label.backgroundColor = .clear
button.addSubview(label)
let barButton = UIBarButtonItem(customView: button)
self.navigationItem.rightBarButtonItem = barButton
Related
these several days im learning iOS Development, I have a problem where my text button is clipped to the wrong width,
how can I make the UIButton match the width of the content? below is my code
let btnPost = UIButton()
btnPost.setTitle("POST", for: .normal)
btnPost.backgroundColor = Color.shared.accent
btnPost.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
btnPost.layer.cornerRadius = 10
btnPost.layer.masksToBounds = true
btnPost.titleEdgeInsets = UIEdgeInsets(top: 5, left: 15, bottom: 5, right: 15)
btnPost.addTarget(
self,
action: #selector(baseDidTapPost(_:)),
for: .touchUpInside)
let barButtonItem = UIBarButtonItem(customView: btnPost)
navigationItem.rightBarButtonItem = barButtonItem
Thanks
You have to just remove the btnPost.titleEdgeInsets and add a frame to your button
btnPost = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 20))
complete code :
let btnPost = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 20))
btnPost.setTitle("POST", for: .normal)
btnPost.backgroundColor = UIColor.blue
btnPost.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
btnPost.layer.cornerRadius = 10
btnPost.layer.masksToBounds = true
btnPost.addTarget(self,action: #selector(baseDidTapPost(_:)),for: .touchUpInside)
let barButtonItem = UIBarButtonItem(customView: btnPost)
navigationItem.rightBarButtonItem = barButtonItem
I would like to use a custom View as UIBarButtonItem left in an UINavigationController, is it possible to remove the left padding here?
Ill alrady tried:
let btn = UIButton()
btn.frame = CGRect(x: -50, y: -50, width: 44, height: 50)
btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
let leftButtonBar = UIBarButtonItem(customView: btn)
self.navigationItem.leftBarButtonItems = ( [leftButtonBar , otherBtn ])
how to remove space left setting icon
update. tired this code:
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height:
view.backgroundColor = .gray
let btn = UIButton()
btn.frame = CGRect(x: -15, y: 0, width: 44, height: 50)
btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(DashboardTabBarController.openSetting), for: .touchUpInside)
view.addSubview(btn)
let leftButtonBar = UIBarButtonItem(customView: view)
problem this user when clicked btn setting user
and other problem title navigation not center align
You should have noticed that whatever x value you provide to your custom view i.e, btn, it will always start from the same position because internally navigation bar doesn't count for position provided for that item and it always set the internally defined position as in below image, I set the background color to the custom button for better visuals.
So, the trick here is to put your custom button into another container view as below,
let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 200, height: 50)))
view.backgroundColor = .green
let btn = UIButton(frame: CGRect(x: -10, y: 10 , width: 30, height: 30))
btn.setImage(UIImage(named: "cancelled")?.withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
btn.backgroundColor = .yellow
btn.tintColor = .red
view.addSubview(btn)
let btn2 = UIButton(frame: CGRect(x: 20, y: 10, width: 30, height: 30))
btn2.setImage(UIImage(named: "cancelled")?.withRenderingMode(.alwaysTemplate), for: .normal)
btn2.contentMode = .scaleAspectFit
btn2.tintColor = .yellow
btn2.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
view.addSubview(btn2)
let itemsContainer = UIBarButtonItem(customView: view)
self.navigationItem.leftBarButtonItems = [itemsContainer]
This will result into this,
Now, if you change the x, y, width, height of btn, it will adjust accordingly.
Please try this. It works fine for me. If this code not working properly then I will give you another solution.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
let btn = UIButton()
btn.frame = CGRect(x: -15, y: 0, width: 44, height: 50)
btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
view.addSubview(btn)
let leftButtonBar = UIBarButtonItem(customView: view)
self.navigationItem.leftBarButtonItems = ( [leftButtonBar])
Please add other button in View and set the width of view accordingy.It may hepls to you.Thank you
You can set imageInsets and set image this is example of left margin to set back image on position of default back button
let rightBtn = UIBarButtonItem(image: UIImage(named: "BackArrow"), style: .done, target: self, action: #selector(actnClose))
rightBtn.imageInsets = UIEdgeInsets(top: 0, left: -12, bottom: 0, right: 0)
self.navigationItem.setLeftBarButton(rightBtn, animated: true)
Set the x value of cRect to zero:
btn.frame = CGRect(x: 0, y: -50, width: 44, height: 50)
The less painful and actually cleanest solution was to hide the left button and just add a subview directly to the navigationBar and customise it's position and size with the good old constraints. Worked like a charm. Haven't tested it in every situation but seems to work fine.
I have stuck on this bug for days. I have a problem with rightBarButtonItem. I want to create a custom view. Inside custom view, there are 2 items: label, imageView. When I type this:
let customView = UIView()
customView.translatesAutoresizingMaskIntoConstraints = false
customView.backgroundColor = .black
customView.frame = CGRect(x: 0, y: 0, width: 90, height: 40)
let coinLabelNavigationBar = UILabel()
coinLabelNavigationBar.frame = CGRect(x: 40, y: 0, width: 30, height: 25)
coinLabelNavigationBar.translatesAutoresizingMaskIntoConstraints = false
coinLabelNavigationBar.text = "200"
coinLabelNavigationBar.font = UIFont(name: ".SFUIText-Medium", size: 20)
coinLabelNavigationBar.textColor = UIColor.white
let coinImage = UIImageView()
coinImage.frame = CGRect(x: 75, y: 0, width: 25, height: 25)
coinImage.translatesAutoresizingMaskIntoConstraints = false
coinImage.image = UIImage(named: "Coin")
customView.addSubview(coinLabelNavigationBar)
customView.addSubview(coinImage)
let rightBarButton = UIBarButtonItem(customView: customView)
navigationItem.rightBarButtonItem = rightBarButton
It doesn't work, navigationBar shows me this:
Do you have any idea, how to fix it?
Thanks for your answers.
try this -
let customView = UIView()
// customView.translatesAutoresizingMaskIntoConstraints = false
customView.backgroundColor = .black
customView.frame = CGRect(x: 0, y: 0, width: 90, height: 40)
let coinLabelNavigationBar = UILabel()
coinLabelNavigationBar.frame = CGRect(x: 40, y: 0, width: 30, height: 25)
// coinLabelNavigationBar.translatesAutoresizingMaskIntoConstraints = false
coinLabelNavigationBar.text = "200"
coinLabelNavigationBar.font = UIFont(name: ".SFUIText-Medium", size: 20)
coinLabelNavigationBar.textColor = UIColor.white
let coinImage = UIImageView()
coinImage.frame = CGRect(x: 75, y: 0, width: 25, height: 25)
// coinImage.translatesAutoresizingMaskIntoConstraints = false
coinImage.image = UIImage(named: "coin.jpg")
customView.addSubview(coinLabelNavigationBar)
customView.addSubview(coinImage)
let rightBarButton = UIBarButtonItem(customView: customView)
navigationItem.rightBarButtonItem = rightBarButton
For Swift 3.0:
let btn1 = UIButton(type: .custom)
btn1.setImage(UIImage(named: "imagename"), for: .normal)
btn1.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
btn1.addTarget(self, action: #selector(Class.Methodname), for: .touchUpInside)
let item1 = UIBarButtonItem(customView: btn1)
let btn2 = UIButton(type: .custom)
btn2.setImage(UIImage(named: "imagename"), for: .normal)
btn2.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
btn2.addTarget(self, action: #selector(Class.MethodName), for: .touchUpInside)
let item2 = UIBarButtonItem(customView: btn2)
self.navigationItem.setRightBarButtonItems([item1,item2], animated: true)
I'm doing a tutorial that replicates Twitter's iOS app.
I have a BarButtonItem on the left, an ImageView in the middle, and an array of two BarButtonItems on the right. If the array is only populated with one button, the titleView is centered. If I add the other button, the titleView moves over.
I understand the issue lies with the width of the titleView as shown in the pictures at the end.
let titleImageView = UIImageView(image: #imageLiteral(resourceName: "title_icon"))
titleImageView.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
titleImageView.contentMode = .scaleAspectFit
navigationItem.titleView = titleImageView
let followButton = UIButton(type: .system)
followButton.setImage(#imageLiteral(resourceName: "follow").withRenderingMode(.alwaysOriginal), for: .normal)
followButton.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: followButton)
let searchButton = UIButton(type: .system)
searchButton.setImage(#imageLiteral(resourceName: "search").withRenderingMode(.alwaysOriginal), for: .normal)
searchButton.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
let composeButton = UIButton(type: .system)
composeButton.setImage(#imageLiteral(resourceName: "compose").withRenderingMode(.alwaysOriginal), for: .normal)
composeButton.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
// THIS IS THE PROBLEM
navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: composeButton), UIBarButtonItem(customView: searchButton)]
navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: composeButton)]:
navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: composeButton), UIBarButtonItem(customView: searchButton)]:
Thank you!
You can insert a dummy button on the left side of the navigationbar just for balance. Make the button the same size as the searchButton and clear background.
I'm using this code to set custom image in UINavigationItem:
let button = UIButton(type: .system)
button.frame = CGRect(origin: .zero, size: CGSize(width: 34, height: 34))
button.setImage(image, for: .normal)
button.addTarget(target, action: action, for: .touchUpInside)
leftBarButtonItem = UIBarButtonItem(customView: button)
Effect looks like this:
In comparison screen shot from the same device but from Photos app looks like this:
As you can see back button in my app is moved a little bit to the center.
Why my image is not the same like in other apps?
Try to set a UIView with your desired width and then add UIButton as subview to that UIView and only then assign to leftbarbuttonItem
let button = UIButton(type: .system)
button.frame = CGRect(x: -20, y: 0, width: 35, height: 35 )
button.backgroundColor = UIColor.blue
button.setImage(UIImage.init(named: "backButton"), for: .normal)
let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 35)));
view.addSubview(button);
view.backgroundColor = UIColor.yellow
let leftButton = UIBarButtonItem(customView: view)
self.navigationItem.leftBarButtonItem = leftButton