Related
I used 2 bar button items. One is for back button and second is for the title. It is working fine. But when the title string is large, the title shifts to left and back button does not appear, but it is working.
I am also using a rightBarButtonItem, that is attached with a badge button. But that is not affecting this as I have tried the same code after removing that button. This is my code -
let backBtnImg: UIImage = UIImage(named: "Back Image")!
let Back: UIBarButtonItem = UIBarButtonItem(image: backBtnImg, style: .plain, target: self, action: #selector(backButtonAction))
let titleStr = ("titleString")
let titleItem: UIBarButtonItem = UIBarButtonItem(title: titleStr, style: .plain, target: nil, action: nil)
self.navigationItem.leftBarButtonItems = [Back, titleItem]
I have attached both the images.
Please try this code if you want to set the title in left side. It may helps to you.
In viewDidLoad method
let navView = UIView(frame: CGRect(x: 0, y: 0, width: (self.navigationController?.navigationBar.frame.size.width)! - 50, height: 40))
lblTitle = UILabel(frame: CGRect(x: 0, y: 0, width: navView.frame.size.width - 40, height: 40))
lblTitle?.text = strTitle
lblTitle?.backgroundColor = UIColor.clear
lblTitle?.textColor = UIColor.white
lblTitle?.textAlignment = .left
navView.addSubview(lblTitle!)
self.navigationItem.titleView = navView
Use this One It help you
-> take only one left button
-> For Title use: self.navigationItem.title = "Navigation Title"
let backBtnImg: UIImage = UIImage(named: "back")!
let Back: UIBarButtonItem = UIBarButtonItem(image: backBtnImg, style: .plain, target: self, action: #selector(backButtonAction))
self.navigationItem.title = "Navigation Title"
self.navigationItem.leftBarButtonItems = [Back]
func setupNevigationBar(){
let btnBack = UIButton(type: .custom)
btnBack.setImage(#imageLiteral(resourceName: "back"), for: .normal)
btnBack.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
btnBack.addTarget(self, action: #selector(btnBackPressed), for: .touchUpInside)
let itemBack = UIBarButtonItem(customView: btnBack)
let titleStr = ("Regular Title")
let titleItem: UIBarButtonItem = UIBarButtonItem(title: titleStr, style: .plain, target: nil, action: nil)
self.navigationItem.leftBarButtonItems = [itemBack, titleItem]
self.navigationItem.setLeftBarButton(itemBack, animated: true)
}
I am creating a UINavigationController programmatically and add my ViewController to it:
// wrap in a navigation controller
let navigationController = UINavigationController(rootViewController: myViewController)
self.present(navigationController, animated: true, completion: nil)
And then add an image to navigation item:
let backButton: UIBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: target, action: selector)
backButton.image = UIImage(named: "ic_back")
self.navigationItem.rightBarButtonItem = backButton
But my BarButton is not displayed in the correct location. What am I doing wrong?
You need to init UIBarButton directly to UIImage or Custom View:
i.e.,
Swift 3.0:
let image = UIImage(named: "ic_back")?.withRenderingMode(.alwaysOriginal)
let button = UIBarButtonItem(image: image, style: .plain, target: target, action: selector)
self.navigationItem.rightBarButtonItem = button
This will fix your issue.
alloc and init UIButton with desired frame! set image to that button. Set content mode if required! add target on this button to handle click! then alloc and init UIBarButtonItem using initWithCustomView method and pass UIButton as parameter that you have created.
Then set navigationItem's rightBarbuttonItem to this barbutton!
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)
self.navigationItem.setRightBarButtonItems(item1, animated: true)
You can set the button on navigation bar like this..
let Button = UIButton(frame: CGRect(x: 0, y: 0, width: 35, height: 40))
Button.setBackgroundImage(UIImage(named: "btn.png"), for: .normal)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: Button)
So this code is helps you to achieve your query
Add frame to your backButton using the following code and let us know if it worked.
backButton.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
You may change width and height acc. to your need.
I have created a
with left bar button item added from storyboard, titleView and three right bar button items from code.
Here is the code:
override func viewDidLoad() {
super.viewDidLoad()
var screenWidth = UIScreen.mainScreen().bounds.width
// custom title view
var navBarWidth: CGFloat = self.navigationController!.navigationBar.frame.size.width
let customTitleView = UIView(frame: CGRectMake(0, 0, navBarWidth, 44))
titleLabel = UILabel(frame: CGRectMake(20, 0, navBarWidth, 40))
titleLabel.text = conversationName
if let titleFont = UIFont(name: "Roboto-Regular", size: 20) {
titleLabel.font = titleFont
}
titleLabel.textColor = UIColor.whiteColor()
customTitleView.addSubview(titleLabel)
self.navigationItem.titleView = customTitleView
// right bar buttons
var searchImage = UIImage(named: "search")!
var clipImage = UIImage(named: "clip")!
var pencilImage = UIImage(named: "pencil")!
var searchBtn = UIBarButtonItem(image: searchImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("searchBtnPressed"))
searchBtn.tintColor = UIColor.whiteColor()
var clipBtn = UIBarButtonItem(image: clipImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("clipBtnPressed"))
clipBtn.tintColor = UIColor.whiteColor()
var pencilBtn = UIBarButtonItem(image: pencilImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("pencilBtnPressed"))
pencilBtn.tintColor = UIColor.whiteColor()
self.navigationItem.setRightBarButtonItems([pencilBtn, clipBtn, searchBtn], animated: false)
}
My problem is that I want to change the spacing between right buttons but I don't know how.
I've tried to add a fixedButton between them but it just increased the existing space.
Can some one help me? Thanks.
I solved my problem in this way:
var searchImage = UIImage(named: "search-selected")!
var clipImage = UIImage(named: "clip")!
var pencilImage = UIImage(named: "pencil")!
let searchBtn: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
searchBtn.setImage(searchImage, forState: UIControlState.Normal)
searchBtn.addTarget(self, action: "searchBtnPressed", forControlEvents: UIControlEvents.TouchUpInside)
searchBtn.frame = CGRectMake(0, 0, 30, 30)
let searchBarBtn = UIBarButtonItem(customView: searchBtn)
let clipBtn: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
clipBtn.setImage(clipImage, forState: UIControlState.Normal)
clipBtn.addTarget(self, action: "clipBtnPressed", forControlEvents: UIControlEvents.TouchUpInside)
clipBtn.frame = CGRectMake(0, 0, 30, 30)
let clipBarBtn = UIBarButtonItem(customView: clipBtn)
let pencilBtn: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
pencilBtn.setImage(pencilImage, forState: UIControlState.Normal)
pencilBtn.addTarget(self, action: "pencilBtnPressed", forControlEvents: UIControlEvents.TouchUpInside)
pencilBtn.frame = CGRectMake(0, 0, 30, 30)
let pencilBarBtn = UIBarButtonItem(customView: pencilBtn)
self.navigationItem.setRightBarButtonItems([pencilBarBtn, clipBarBtn, searchBarBtn], animated: false)
Now it looks good,
Update for Swift 4.1
let testButton : UIButton = UIButton.init(type: .custom)
testButton.setImage(editImage, for: .normal)
testButton.addTarget(self, action: #selector(didTapCameraButton), for: .touchUpInside)
testButton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let addButton = UIBarButtonItem(customView: testButton)
Set testButton.frame doesn't help.
This solution is correct for me!
rightButton.imageEdgeInsets = UIEdgeInsets(top: 3, left: 10, bottom: 7, right: 0)
For Swift 3:
let searchBtn: UIButton = UIButton(type: UIButtonType.custom)
searchBtn.setImage(UIImage(named: "search"), for: [])
searchBtn.addTarget(self, action: #selector(ViewController.searchBtnPressed(_:)), for: UIControlEvents.touchUpInside)
searchBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let searchButton = UIBarButtonItem(customView: searchBtn)
let clipBtn: UIButton = UIButton(type: UIButtonType.custom)
clipBtn.setImage(UIImage(named: "clip"), for: [])
clipBtn.addTarget(self, action: #selector(ViewController.clipBtnPressed(_:)), for: UIControlEvents.touchUpInside)
clipBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let clipButton = UIBarButtonItem(customView: clipBtn)
let pencilBtn: UIButton = UIButton(type: UIButtonType.custom)
pencilBtn.setImage(UIImage(named: "pencil"), for: [])
pencilBtn.addTarget(self, action: #selector(ViewController.pencilBtnPressed(_:)), for: UIControlEvents.touchUpInside)
pencilBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let pencilButton = UIBarButtonItem(customView: pencilBtn)
self.navigationItem.rightBarButtonItems = [pencilButton, clipButton, searchButton]
Replace ViewController with your view controller
// create three nav bar buttons
var searchBtn = UIBarButtonItem(image: searchImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("searchBtnPressed"))
searchBtn.tintColor = UIColor.whiteColor()
var clipBtn = UIBarButtonItem(image: clipImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("clipBtnPressed"))
clipBtn.tintColor = UIColor.whiteColor()
var pencilBtn = UIBarButtonItem(image: pencilImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("pencilBtnPressed"))
pencilBtn.tintColor = UIColor.whiteColor()
// create a spacer
var space = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: self, action: nil)
space.width = 10
var buttons = [pencilBtn, space, clipBtn, space, searchBtn]
navigationItem?.rightBarButtonItems = buttons
This solution is in Objective C
UIImage *settingImageName = [UIImage imageNamed:#"Menu_Burger_Icon"];
UIButton * settingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[settingButton setImage:settingImageName forState:UIControlStateNormal];
[settingButton addTarget:self action:#selector(settingsBtnClicked) forControlEvents:UIControlEventTouchUpInside];
settingButton.frame = CGRectMake(0, 0, 30, 30);
UIBarButtonItem *settingBarButton = [[UIBarButtonItem alloc] initWithCustomView:settingButton];
UIImage *notificationImageName = [UIImage imageNamed:#"NotificationON"];
UIButton * notificationButton = [UIButton buttonWithType:UIButtonTypeCustom];
[notificationButton setImage:notificationImageName forState:UIControlStateNormal];
[notificationButton addTarget:self action:#selector(notificationButtonClicked) forControlEvents:UIControlEventTouchUpInside];
notificationButton.frame = CGRectMake(0, 0, 30, 30);
UIBarButtonItem *notificationBarButton = [[UIBarButtonItem alloc] initWithCustomView:notificationButton];
self.navigationItem.rightBarButtonItems = #[settingBarButton,notificationBarButton];
Solution reference by #mikle94. His answer is in Swift.
let rightActionButton:UIButton = UIButton()
if #available(iOS 11.0, *) {
let widthConstraint = rightActionButton.widthAnchor.constraint(equalToConstant: 30)
let heightConstraint = rightActionButton.heightAnchor.constraint(equalToConstant: 30)
heightConstraint.isActive = true
widthConstraint.isActive = true
}
else {
rightActionButton.frame = CGRect.init(x: 0, y: 0, width: 30, height: 30)
}
rightActionButton.setImage(UIImage.init(named: "3-dots-right-button"), for: .normal)
rightActionButton.addTarget(self, action: #selector(handleRightMenu), for: UIControlEvents.touchUpInside)
rightActionButton.setTitle("", for: .normal)
rightActionButton.tintColor = UIColor(hex:K.NODD_GREEN_HEX)
let rightActionBarButton:UIBarButtonItem = UIBarButtonItem(customView: rightActionButton)
let rightBarButtonItem1 = rightActionBarButton
let rightBarButtonItem2 = UIBarButtonItem(barButtonSystemItem: .action, target: self, action: #selector(handleRight2Menu))
self.navigationItem.rightBarButtonItems = [rightBarButtonItem1,rightBarButtonItem2]
Try to change the constraintEqualToConstant
[myUIButton.widthAnchor constraintEqualToConstant:24].active = YES;
[myUIButton.heightAnchor constraintEqualToConstant:24].active = YES;
Supporting solution by #mkz, by using function to reduce the code (Swift 4.2.1)
Added most important parameters to the function (note how to pass selector to a function), you may want to add more as per your need.
func makeCustomNavigationButton(imageName: String, action: Selector) -> UIBarButtonItem{
let image = UIImage(named: imageName)!
let btn: UIButton = UIButton(type: UIButton.ButtonType.custom)
btn.setImage(image, for: .normal)
btn.addTarget(self, action: action, for: .touchUpInside)
btn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let barBtn = UIBarButtonItem(customView: btn)
return barBtn
}
How to call:
let search = self.makeCustomNavigationButton(imageName: "search", action: #selector(searchBtnPressed(_:)))
let clip = self.makeCustomNavigationButton(imageName: "clip", action: #selector(clipBtnPressed(_:)))
let pencil = self.makeCustomNavigationButton(imageName: "pencil", action: #selector(pencilBtnPressed(_:)))
self.navigationItem.rightBarButtonItems = [search, clip, pencil]
You can also wire things up first in Storyboard.
I have two right bar button items.
(This is objective-c code, which you can modify for swift.)
First create references to them in view controller.
#interface MyViewController ()
#property (weak, nonatomic) IBOutlet UIButton *smsButton;
#property (weak, nonatomic) IBOutlet UIButton *checkoutButton;
#end
Then, in viewDidLoad, adjust their widths and heights.
// Adjust right bar button item spacing.
self.smsButton.frame = CGRectMake(0, 0, 30, 30);
self.lockButton.frame = CGRectMake(0, 0, 30, 30);
This is one of methods to solve that.
Use UIBarButtonItem as a space
let space = UIBarButtonItem(barButtonSystemItem: .FixedSpace, target: nil, action: nil)
space.width = -20 // adjust as needed
self.navigationItem.rightBarButtonItems = [pencilBtn, clipBtn, searchBtn, space]
I'm trying to put a rightBarButtonItem on a second view controller of an UINavigationViewController stack.
I'm creating and setting the button in viewDidLoad of the view controller that I want to show. My actual code looks like this:
override func viewDidLoad() {
super.viewDidLoad()
menu_button_ = UIBarButtonItem(image: UIImage(named: "menu"),
style: UIBarButtonItemStyle.Plain ,
target: self, action: "OnMenuClicked:")
self.navigationController!.navigationItem.rightBarButtonItem = menu_button_
}
What am I missing? The button doesn't appear.
You should set the menu_button_ as the rightBarButtonItem of your viewController rather than the navigationController.
Try
self.navigationItem.rightBarButtonItem = menu_button_
instead of
self.navigationController!.navigationItem.rightBarButtonItem = menu_button_
try with following code. it works for me.
let homeButton : UIBarButtonItem = UIBarButtonItem(title: "LeftButtonTitle", style: UIBarButtonItemStyle.Plain, target: self, action: "")
let logButton : UIBarButtonItem = UIBarButtonItem(title: "RigthButtonTitle", style: UIBarButtonItemStyle.Plain, target: self, action: "")
self.navigationItem.leftBarButtonItem = homeButton
self.navigationItem.rightBarButtonItem = logButton
And if you want to settle out custom image then please check with apple guidelines on below link.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1
In Swift 5
//For righter button item
let rightBtn = UIBarButtonItem(image: UIImage(named: "rightmenu"), style: .plain, target: self, action: #selector(onClickMethod))//Change your function name and image name here
self.navigationItem.rightBarButtonItem = rightBtn
//self.navigationItem.rightBarButtonItem = [rightBtn, anotherBtn] //If you want to add more buttons add like this
//This is your function
#objc func onClickMethod() {
print("Left bar button item")
}
Create an extension of UINavigationItem like -
extension UINavigationItem {
func addSettingButtonOnRight(){
let button = UIButton(type: .custom)
button.setTitle("setting", for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 15.0)
button.layer.cornerRadius = 5
button.backgroundColor = .gray
button.frame = CGRect(x: 0, y: 0, width: 100, height: 25)
button.addTarget(self, action: #selector(gotSettingPage), for: UIControlEvents.touchUpInside)
let barButton = UIBarButtonItem(customView: button)
self.rightBarButtonItem = barButton
}
#objc func gotSettingPage(){
}
}
And call it from viewDidLoad() like -
self.navigationItem.addSettingButtonOnRight()
I am using this code to get a logo on my nav bar.
override func viewDidAppear(animated: Bool) {
let image = UIImage(named: "LogoWithTextSmaller.png")
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: UIBarButtonItemStyle.Plain, target: nil, action: nil)
}
This is fine, but the logo doesn't have any colour - besides 'blue'. Is it because it is a png file. Is there something I can so it retains the original colours
I have done this:
self.navigationItem.titleView = UIImageView(image: image)
and that brings the image onto the nav bar with the correct colours - but it's in the middle and I want it on the left.
You need to declare that the image stays original all the time. so add the code as below
var image = UIImage(named: "image-name")
image = image?.withRenderingMode(.alwaysOriginal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style:.plain, target: nil, action: nil)
In Swift 3 the same would be accomplished using the following syntax
var image = UIImage(named: "Filter")
image = image?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(image:image , style: UIBarButtonItemStyle.plain, target: nil, action: nil)
Swift 3.0
let btnLogo = UIButton(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
btnLogo.setTitle("", for: .normal)
btnLogo.backgroundColor = UIColor.clear
btnLogo.layer.cornerRadius = 4.0
btnLogo.layer.masksToBounds = true
var imageLogo = UIImage(named: "LogoWithTextSmaller.png")
imageLogo = imageLogo?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
btnLogo.setImage(imageLogo, for: .normal)
let barButton = UIBarButtonItem(customView: btnLogo)
self.navigationItem.leftBarButtonItem = barButton
swift 2.0
var image = UIImage(named: "Filter")
image = image?.imageWithRenderingMode(UIImageRenderingMode.alwaysOriginal)
Objective-C
UIImage *image = [[UIImage alloc] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *_btnLeftBar = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:#"LogoWithTextSmaller.png"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(yourMethod)];
self.navigationItem.rightBarButtonItem= _btnLeftBar;
For withRenderingMode(_:) details see below apple documentation link
https://developer.apple.com/documentation/uikit/uiimage/1624153-withrenderingmode
SWIFT 4
let back = UIImage(named: "back_white")?.withRenderingMode(.alwaysOriginal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: back, style:.plain, target: nil, action: nil)
In swift 3.0
let Navigateimage = UIImage(named: "LogoWithTextSmaller.png")
Navigateimage = Navigateimage?.withRenderingMode(.alwaysOriginal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: Navigateimage, style:.plain, target: nil, action: nil)
Swift 3
If the item is missing, you can try this.
let navigationBar = navigationController?.navigationBar
let topItem = navigationBar?.topItem
var navigateimage = UIImage(named: "addConnectionFromSupport")
navigateimage = navigateimage?.withRenderingMode(.alwaysOriginal)
topItem?.rightBarButtonItem = UIBarButtonItem(image: navigateimage, style:.plain, target: nil, action: nil)