Change Spacing Between UIBarButtonItems in iOS 8
Solution 1
Thanks to @Fogmeister's help, I figured out that the width of the view1
and view2
objects, which are UIButtons
, was too large. That was why there was abnormal spacing between them. Here is my final code:
// Get the first button's image
let view1Img = UIImage(named: "Image1")!
// Create the first button
let view1 = UIButton(frame: CGRect(x: 0, y: 0, width: view1Img.size.width, height: view1Img.size.height))
// Get the second button's image
let view2Img = UIImage(named: "Image2")!
// Create the second button
let view2 = UIButton(frame: CGRect(x: 0, y: 0, width: view2Img.size.width, height: view2Img.size.height))
// Create two UIBarButtonItems
let item1 = UIBarButtonItem(customView: view1)
let item2 = UIBarButtonItem(customView: view2)
// Set 26px of fixed space between the two UIBarButtonItems
let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
fixedSpace.width = 26.0
// Set -7px of fixed space before the two UIBarButtonItems so that they are aligned to the edge
let negativeSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
negativeSpace.width = -7.0
// Add the rightBarButtonItems on the navigation bar
viewController.navigationItem.rightBarButtonItems = [negativeSpace, item2, fixedSpace, item1]
I create the background image for the first UIButton
and then use its size to create the frame for that UIButton
. I perform the same actions for the second UIButton
. Then, I create UIBarButtonItems
from the two UIButtons
. After that, I create 26px of fixed space and then -7.0px of fixed space. The purpose of the former is to create a certain amount of space between the two buttons. The purpose of the latter is to move all UIBarButtonItems
over to the right. Then, I add all of the UIBarButtonItems
as rightBarButtonItems
in a particular order so I get the look that I want.
It works great now! Thanks for all of the help, Fogmeister!
Solution 2
Another way is just by changing the Left and Right Image Inset in IB.
Solution 3
From the docs for UIBarButtonItem...
If the value is 0.0 or negative, the item sets the width of the combined image and title to fit.
If you set the width to -20.0
it will ignore it and use the standard width.
What is it you are trying to achieve with a negative width anyway? I'm almost certain there will be a better way.
Related videos on Youtube
Alexander
Co-founder of ClassHook: http://www.classhook.com I'm an experienced desktop/mobile/game/web developer. I am happy to offer assistance in any of the following languages: C# VB.NET XAML Objective-C Swift HTML CSS JavaScript Ruby on Rails Don't hesitate to ask for anything!
Updated on July 08, 2022Comments
-
Alexander almost 2 years
I have a
UINavigationItem
on my view controller, and I am trying to reduce the spacing between my twoRightBarButtonItems
. Here is some of my code:// Create two UIBarButtonItems let item1:UIBarButtonItem = UIBarButtonItem(customView: view1) let item2:UIBarButtonItem = UIBarButtonItem(customView: view2) var fixedSpace:UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FixedSpace, target: nil, action: nil) fixedSpace.width = -20.0 // Add the rightBarButtonItems on the navigation bar viewController.navigationItem.rightBarButtonItems = [item2, fixedSpace, item1]
As can be seen, I am using a FixedSpace
UIBarButtonItem
, but this is not changing the spacing for some reason. I have thought about subclassing either theUINavigationItem
or theUIBarButtonItem
so that I can set the spacing accordingly, but I couldn't seem to find any methods that I could override to change the spacing between items.Any insight on how to solve this problem would be greatly appreciated!
-
Alexander over 9 yearsThanks for the response, Fogmeister! I've looked at other SO questions about this, and the recommended solution was to add negative fixed spacing between two UIBarButtonItems to close the gap between them. My goal is to have less padding between item1 and item2, but nothing that I found online has helped.
-
Fogmeister over 9 yearsWhat happens if you don't add a fixed width space at all? Just add button1 and button2 without the space.
-
Alexander over 9 yearsThere is too much space between the two items if I don't add fixed width space at all.
-
Fogmeister over 9 years@Alexander What if you change the custom views? Make view1 and view2 smaller. What are they anyway?
-
Alexander over 9 yearsThanks for asking all of these questions. view1 and view2 are UIButtons with set background images. I didn't start out making this app, but using your help I realized that I overlooked something. I found out that the frame width for both images was too large, resulting in the extra spacing between them. I've reduced the frame to the size of the images, and the spacing is a lot better now! Now all I have to do is move the UIBarButtonItems over to the right a little bit, but I'm having trouble doing so.
-
Alexander over 9 yearsGot it all figured out! Followed the advice on this SO topic: stackoverflow.com/questions/18914812/… To move both UIBarButtonItems over to the right, I just added negative spacing before them. I'll post what I did to resolve the issue in an answer.
-
ToolmakerSteve over 7 yearsIt has been reported elsewhere on stackoverflow that this moves the image visually, but does not move the tapable area to correspond to the visual change. I have not verified this flaw myself; recommend testing to be sure taps anywhere on the button image still works, especially if use a large offset.