How to change space between UIBarButtonItems in UINavigationBar? - ios

This is how it looks now:
This is how it is represented in Debug view Hierarchy:
And here is how I set it up in code:
func setupUserAndCartButtons() {
var rightBarButtonItems = [UIBarButtonItem]()
let cartBarButtonItem = UIBarButtonItem(image: DBCart.sharedCart().icon, style: .Plain, target: self, action: Selector("cartButtonTapped:"))
rightBarButtonItems.append(cartBarButtonItem)
let userIcon = UIImage(named: "icon-user")
let userBarButtonItem = UIBarButtonItem(image: userIcon, style: .Plain, target: self, action: Selector("userButtonTapped:"))
rightBarButtonItems.append(userBarButtonItem)
navigationItem.rightBarButtonItems = rightBarButtonItems
}
Hot to move them closer to each other without using custom view?

use imageInsets property of UIBarButtonItem
In Objective-C
[addContact setImageInsets:UIEdgeInsetsMake(0, -10,0, 0)];

Swift 4.1
buttonName.imageInsets = UIEdgeInsetsMake(0, 30, 0, 0)
This will move button to right side to other button.
Hope this will help someone

Add buttons using custom View:
//MARK:Customize Navigation Bar
func addButtonsToNavigationBar(){
let cartButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
cartButton.frame = CGRectMake(0,0,20,20)
cartButton.addTarget(self, action: "cartButtonTapped:", forControlEvents: .TouchUpInside)
cartButton.setImage(UIImage(named: DBCart.sharedCart().icon), forState: .Normal)
let cartBarButtonItem = UIBarButtonItem(customView: cartButton)
let userButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
userButton.frame = CGRectMake(0,0,20,20)
userButton.addTarget(self, action: "userButtonTapped:", forControlEvents: .TouchUpInside)
userButton.setImage(UIImage(named: "icon-user"), forState: .Normal)
let userBarButtonItem = UIBarButtonItem(customView: userButton)
self.navigationItem.rightBarButtonItems=[cartBarButtonItem,userBarButtonItem]
}

UIBarButtonSystemItemFixedSpace is used to adjust spacings of navigation bar items.
Example code:
- (void)setRightBarButtonItems {
UIBarButtonItem *addTaskButton =
[[UIBarButtonItem alloc] bk_initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
handler:handler];
UIBarButtonItem *negativeSeperator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
if ([UIDevice isIOS7Plus]) {
negativeSeperator.width = -12;
} else {
negativeSeperator.width = -8;
}
UIBarButtonItem *separator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
separator.width = 50;
[self.navigationItem setRightBarButtonItems:#[addTaskButton, separator, [self filterButton]]];
}

Related

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)

UIBarButtonItem disable animation

I have an UIBarButtonItem, which is a non-clickable logo. How do I disable the touch animation for this logo?
I have tried getting at the view:
let view = self.appTitle.performSelector(Selector("view")).takeRetainedValue() as? UIView
view?.userInteractionEnabled = false
but then the app crashes.
The UIBarButtonItem is inside a UiToolbar, created in a storyboard.
This works:
self.appTitle.customView = UIImageView(image: UIImage(named: "footer"))
If you want UIBarButtonItem be don't clicked use
barBtnItem.enabled = false
let transitionOptions: UIViewAnimationOptions = [.TransitionCrossDissolve, .ShowHideTransitionViews]
UIView.transitionWithView(#yourUIBarButtonItem outlet, duration: 1.0, options: transitionOptions, animations: {
self.#yourUIBarButtonItem outlet.enabled = false
}, completion: nil)
If your UIBarButtonItem is in NavigationItem then first assign it to leftBarButtonItem or rightBarButtonItem and then set enabled property of UIBarButtonItem to NO in objective-c and false in swift
Objective-C:
UIImage *menuImage = [UIImage imageNamed:#"menu"];
UIButton *menu = [UIButton buttonWithType:UIButtonTypeCustom];
menu.frame = CGRectMake( 10, 0, menuImage.size.width, menuImage.size.height);
[menu addTarget:self action:#selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
[menu setImage:menuImage forState:UIControlStateNormal];
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:menu];
self.navigationItem.leftBarButtonItem = backButton;
self.navigationItem.leftBarButtonItem.enabled = NO;
Swift:
var menuImage: UIImage = UIImage(named: "menu")!
var menu: UIButton = UIButton(type: .Custom)
menu.frame = CGRectMake(10, 0, menuImage.size.width, menuImage.size.height)
menu.addTarget(self, action: #selector(self.handleBack), forControlEvents: .TouchUpInside)
menu.setImage(menuImage, forState: .Normal)
var backButton: UIBarButtonItem = UIBarButtonItem(customView: menu)
self.navigationItem.leftBarButtonItem = backButton
self.navigationItem.leftBarButtonItem.enabled = false

iOS rightBarButtonItem on UINavigationController in swift

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

How to add multiple UIBarButtonItems on right side of Navigation Bar?

I would like to have more than a single UIBarButtonItem on the right side of my UINavigationBar. How can I achieve this?
An example of what I am trying are shown below - you can notice that the top right has more than one button.
Use this in swift:
override func viewDidLoad() {
super.viewDidLoad()
let editImage = UIImage(named: "plus")!
let searchImage = UIImage(named: "search")!
let editButton = UIBarButtonItem(image: editImage, style: .Plain, target: self, action: "didTapEditButton:")
let searchButton = UIBarButtonItem(image: searchImage, style: .Plain, target: self, action: "didTapSearchButton:")
navigationItem.rightBarButtonItems = [editButton, searchButton]
}
Write the action functions like this:
func didTapEditButton(sender: AnyObject){
...
}
func didTapSearchButton(sender: AnyObject){
...
}
Swift 4 & 5
override func viewDidLoad() {
super.viewDidLoad()
let editImage = UIImage(named: "edit")!
let searchImage = UIImage(named: "search")!
let editButton = UIBarButtonItem(image: editImage, style: .plain, target: self, action: #selector(didTapEditButton(sender:)))
let searchButton = UIBarButtonItem(image: searchImage, style: .plain, target: self, action: #selector(didTapSearchButton(sender:)))
navigationItem.rightBarButtonItems = [editButton, searchButton]
}
#objc func didTapEditButton(sender: AnyObject){
}
#objc func didTapSearchButton(sender: AnyObject){
}
-(void)viewDidLoad{
UIBarButtonItem *anotherButton1 = [[UIBarButtonItem alloc] initWithTitle:#"Button_1" style:UIBarButtonItemStylePlain target:self action:#selector(button_1:)];
UIBarButtonItem *anotherButton2 = [[UIBarButtonItem alloc] initWithTitle:#"Button_" style:UIBarButtonItemStylePlain target:self action:#selector(button_2:)];
self.navigationItem.rightBarButtonItems=#[anotherButton1,anotherButton2];
}
In Swift 3 you can use:
let editImage = UIImage(named: "plus")!
let searchImage = UIImage(named: "search")!
let editButton = UIBarButtonItem(image: editImage, style: .plain, target: self, action: #selector(didTapEditButton))
let searchButton = UIBarButtonItem(image: searchImage, style: .plain, target: self, action: #selector(didTapSearchButton))
navigationItem.rightBarButtonItems = [editButton, searchButton]
I think nothing of the above is going to work
Try this
var burgerItem = UIBarButtonItem(image: UIImage(named:"categories"), style: .Plain, target: self, action: "categories")
var weatherItem = UIBarButtonItem(title: "Weather", style: .Plain, target: self, action: "weather")
burgerItem.tintColor = UIColor.whiteColor()
weatherItem.tintColor = UIColor.whiteColor()
navigationItem.setRightBarButtonItems([burgerItem,weatherItem], animated: true)
You have to use navigationItem.setRightBarButtonItems and be carefull. navigationItem has to be of a view controller.
class testViewController:UIViewController {
ovverride func viewDidLoad() {
self.navigationItem.setRightBarButtonItems(...
}
}
Simply add this code:
self.navigationItem.leftBarButtonItem = nil
let button = UIButton(type: .custom)
button.setImage(UIImage (named: "ChatTab"), for: .normal)
button.frame = CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0)
//button.addTarget(target, action: nil, for: .touchUpInside)
let barButtonItem = UIBarButtonItem(customView: button)
let button2 = UIButton(type: .custom)
button2.setImage(UIImage (named: "ActivityTab"), for: .normal)
button2.frame = CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0)
//button.addTarget(target, action: nil, for: .touchUpInside)
let barButtonItem2 = UIBarButtonItem(customView: button2)
self.navigationItem.rightBarButtonItems = [barButtonItem, barButtonItem2]
This is the result:
With Swift 4
let editImage = UIImage(named: "toolbar_edit")!
let favoriteImage = UIImage(named: "toolbar_fav_solid")!
let editButton = UIBarButtonItem(image: editImage, style: .plain, target: self, action: #selector(didTapEditButton))
let favoriteButton = UIBarButtonItem(image: favoriteImage, style: .plain, target: self, action: #selector(didTapFavoriteButton))
navigationItem.rightBarButtonItems = [editButton, favoriteButton]
Click action for those buttons
#objc func didTapEditButton(sender: AnyObject) {
print("edit")
}
#objc func didTapFavoriteButton(sender: AnyObject) {
print("favorite")
}
Output screenshot (iPhone X)
Accepted answer as well as few of the answer is absolutely correct but in my case none of them work.
Reason : My View Controller was Inherited from UIViewController and I had to set Add to Cart Button and Search Button On Right hand side. And All my view controllers were a part of UITabbarController.
let editImage = UIImage(named: "OrdersTabIcon")
let searchImage = UIImage(named: "OrdersTabIcon")
let editButton = UIBarButtonItem(image: editImage, style: .plain, target: self, action: #selector(iconTapped))
let searchButton = UIBarButtonItem(image: searchImage, style: .plain, target: self, action: #selector(iconTapped))
Instead of using
self.navigationItem.setRightBarButtonItems([editButton, searchButton], animated: true)
Use This .
self.navigationController?.navigationBar.topItem?.setRightBarButtonItems([editButton, searchButton], animated: true)
This is may be help for you in objective-c,
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.navigationItem.title = #"Title";
UIBarButtonItem *logOutButton = [[UIBarButtonItem alloc] initWithTitle:#"Logout" style:UIBarButtonItemStylePlain target:self action:#selector(ButtonClickedAtIndex1:)];
[logOutButton setTintColor:[UIColor blackColor]];
logOutButton.tag = 1;
UIBarButtonItem *syncBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"Sync" style:UIBarButtonItemStylePlain target:self action:#selector(ButtonClickedAtIndex1:)];
[syncBarButtonItem setTintColor:[UIColor blackColor]];
syncBarButtonItem.tag = 2;
self.navigationItem.leftBarButtonItem = logOutButton;
self.navigationItem.rightBarButtonItem = syncBarButtonItem;
float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
if (systemVersion >= 7.0) {
self.edgesForExtendedLayout = UIRectEdgeNone;
self.navigationController.navigationBar.translucent = NO;
}
}
return self;
}
Use navigationItem's rightBarButtonItems, which takes an array of UIBarButton. Appledoc
let share = UIBarButtonItem(barButtonSystemItem: .action, target: self, action: #selector(shareTapped))
let add = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTapped))
navigationItem.rightBarButtonItems = [add, share]
I don't know wether an Interface Builder solution was not possible before, but at least with the most recent update (Xcode 11.0), it is possible to drag two UI Bar Buttons into the rightBarButton space. Two outlets and actions can then be dragged into the code like always.
Since the OP didn't ask for a solution without IB, I think this also qualifies as an answer.
For Xamarin iOS with the new updates, it is like:
UIBarButtonItem Button1 = new UIBarButtonItem(UIImage.FromBundle("Image1"), UIBarButtonItemStyle.Plain,YourEventHandler);
UIBarButtonItem Button2 = new UIBarButtonItem(UIImage.FromBundle("Image1"), UIBarButtonItemStyle.Plain,YourEventHandler);
NavigationItem.SetRightBarButtonItems(new[]{ Button1, Button2 }, true);

Navigation bar button image

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)

Resources