First leftBarButtonItem is hiding - ios

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)
}

Related

navigation bar button item is bigger than the frame i set

I don't know what's wrong with my code or what did I did that leads to this I spent half an hour trying to figure out what's wrong with my code but I have no idea, I'm calling this func in viewDidLoad()
func setupNavBarBtn(){
let backBtn = UIButton(type: .system)
backBtn.setImage(#imageLiteral(resourceName: "cellarrow").withRenderingMode(.alwaysOriginal), for: .normal)
backBtn.contentMode = .scaleAspectFit
backBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let callBtn = UIButton(type: .system)
callBtn.setImage(#imageLiteral(resourceName: "Call").withRenderingMode(.alwaysOriginal), for: .normal)
callBtn.contentMode = .scaleAspectFit
callBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
self.navigationItem.leftBarButtonItems = [UIBarButtonItem(customView: backBtn), UIBarButtonItem(customView: callBtn)]
}
You should create UIBarButtonItem instead of UIButton:
let backBtn = UIBarButtonItem(image:UIImage(named: "cellarrow.png"), style: .plain, target: nil, action: nil)
let callBtn = UIBarButtonItem(image:UIImage(named: "Call.png"), style: .plain, target: nil, action: nil)
self.navigationItem.leftBarButtonItems = [backBtn,callBtn]
The size of bar button should better be 20x20

Design navigation bar in iOS swift

I want to design a navigation View like.
1. Left Menu , and title in center
2. Left Menu , and Image just next to it, and left side button
i am trying to add buttons like this , but button is not properly showing
func addMenuButton(){
let btn_menu = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 44))
btn_menu.addTarget(self, action: #selector(self.refreshBtnClicked), for: .touchUpInside)
btn_menu.setImage(#imageLiteral(resourceName: "ic_menu"), for: .normal)
btn_menu.setImage(#imageLiteral(resourceName: "ic_menu"), for: .selected)
self.navigationController?.navigationItem.leftBarButtonItems = [UIBarButtonItem(customView: btn_menu)]
}
//Option 1
self.title = "Title Here"
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(named: "menu"), style: .plain, target: self, action: #selector(menuBtnAction(_:)))
//Option 2
let plusBtn = UIBarButtonItem(image: UIImage(named: "plus"), style: .plain, target: self, action: #selector(plusBtnAction(_:)))
let logoView = UIImageView(image: UIImage(named:"ins"))
logoView.translatesAutoresizingMaskIntoConstraints = false
logoView.widthAnchor.constraint(equalToConstant: 180).isActive = true
self.navigationItem.leftBarButtonItems = [plusBtn,UIBarButtonItem(customView: logoView)]
let titleLabel = UILabel()
titleLabel.text = "Main Controller"
titleLabel.frame = self.navigationController!.view.frame
titleLabel.textAlignment = .left
self.navigationItem.titleView = titleLabel
self.navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(tapped))
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .save, target: self, action: #selector(tapped))
Try like this
func addMenuButton(){
let leftBarButtonItem : UIBarButtonItem? = UIBarButtonItem(image: #imageLiteral(resourceName: "ic_menu"), style: UIBarButtonItem.Style.plain, target: self, action: #selector(refreshBtnClicked))
self.navigationController?.navigationItem.leftBarButtonItem = leftBarButtonItem;
}

How do I adjust the position of a UIBarButtonItem

I need to adjust the vertical position of my UIBarButtonItems.
I seem to be able to do it for the title just fine but the buttons don't seem to go along with it. What am I doing wrong?
var leftBarButtonItem : UIBarButtonItem?
leftBarButtonItem
= UIBarButtonItem(title: "", style: .done, target: self, action: #selector(self.leftBarButtonPressed(_:)))
leftBarButtonItem?.image = UIImage(named: "menu_ic")
self.navigationItem.leftBarButtonItem = leftBarButtonItem
self.navigationController?.navigationItem.leftBarButtonItem?.setBackgroundVerticalPositionAdjustment(CGFloat(18), for: UIBarMetrics.default)
var rightBarButtonItem : UIBarButtonItem?
rightBarButtonItem
= UIBarButtonItem(title: "MAP", style: .done, target: self, action:
#selector(self.rightBarButtonPressed(_:)))
self.navigationItem.rightBarButtonItem = rightBarButtonItem
let height: CGFloat = 60 //sets height of UINavigationBar
let bounds = self.navigationController!.navigationBar.bounds
self.navigationController?.navigationBar.frame = CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height + height)
self.navigationController!.navigationBar.setTitleVerticalPositionAdjustment(CGFloat(18), for: UIBarMetrics.default)

In iOS, How to remove UINavigationBarBackIndicatorView in UINavigationBar?

I found, the UINavigationBarBackIndicatorView in the leftItem above! I want to remove it or CGRect.Zero. Thanks!
ADD:
add leftItem Before in hierarchy:
enter image description here
After I add a leftItem in hierarchy:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))
let image = UIImage(named: "search-icon-blue")
button.setImage(image, for: .normal)
let leftItem = UIBarButtonItem(customView: button)
let spaceItem = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
spaceItem.width = -10
navigationItem.leftBarButtonItems = [spaceItem, leftItem]
enter image description here
When button clicked,it become dark!
But it not become dark when I click left area,I think the reason is UINavigationBarBackIndicatorView above it!
So, I want to remove it!
Try this code:
self.navigationItem.leftBarButtonItems = nil
self.navigationController?.navigationBar.setNeedsLayout()
Objective-C:
self.navigationItem.leftBarButtonItems = nil;
[self.navigationController.navigationBar setNeedsLayout];
Or you can use:
self.navigationController.navigationBar.backItem.hidesBackButton = YES;
[self.navigationController.navigationBar setNeedsLayout];
Swift:
self.navigationItem.leftBarButtonItems = nil
self.navigationController?.navigationBar.setNeedsLayout()
set
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.plain, target: nil, action: nil)

navigation bar right bar button items spacing

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]

Resources