How to adjust UIToolBar left and right padding
I had the same issue, and there's a neat trick you can do with a UIBarButtonSystemItemFixedSpace, add one of these with a negative width before your first button and after your last button and it will move the button to the edge.
For example, to get rid of the right hand margin add the following FixedSpace bar item as the last item:
Update for iOS 11 up to 13
Swift
let negativeSeperator = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil) negativeSeperator.width = 12
Width must be positive in Swift version
Objc
UIBarButtonItem *negativeSeparator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil]; negativeSeparator.width = -12;
The margins on the left and right are 12px.
Update for iOS7 - margins are 16px on iPhone and 20px on iPad!
This is a great question and even with the solutions provided - it did not resolve the problem on iOS11.
WORKING SOLUTION
If you create a new extension of UIButton
:
class BarButton: UIButton {
override var alignmentRectInsets: UIEdgeInsets {
return UIEdgeInsetsMake(0, 16, 0, 16)
}
}
Then when you use it in your layout:
lazy var btnLogin: BarButton = {
let btn = BarButton(type: .custom)
// Add your button settings
btn.widthAnchor.constraint(equalToConstant: self.frame.size.width).isActive = true
btn.heightAnchor.constraint(equalToConstant: 50).isActive = true
btn.translatesAutoresizingMaskIntoConstraints = false
return btn
}()
This solved a very annoying problem, if you have any issues give me a shout.
Before iOS 11
You had three possible solutions:
- The first was using fixed a space item UIBarButtonItem(barButtonSystemItem: .fixedSpace …) with a negative width
- The other was to override alignmentRectInsets on the custom view
- The last one, if you use UIButton as your item's custom view, you can override contentEdgeInsets and hitTest(_:with:)
Absolutely, the first solution seems better than other
UIBarButtonItem *negativeSeparator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
negativeSeparator.width = -12;
if you use swift, code will be look like this
var negativeSeparator = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
negativeSeparator.width = -12
After iOS 11(contain iOS 11)
unfortunately, all the solution can't be use in iOS 11
- first solution: setting a negative width no longer works
- second solution: override alignmentRectInsets will cause part of item no longer receives touches
- the last solution: i think override hitTest(_:with:) is not a good idea, don't do this please!
You can also see some suggestion on the Developer Forums, but after you look all the comment, you will find suggestion on this topic is to create a custom UINavigationBar subclass and do something complexity.
Oh my god, All i want to do is to change the padding, not the navigation bar!
Fortunately, we can do this with a trick in iOS 11!
Here We Go:
1. create a custom button
- set translatesAutoresizingMaskIntoConstraints as false
- override alignmentRectInsets
- item in right side use UIEdgeInsets(top: 0, left: -8, bottom: 0, right: 8)
- item in left side use UIEdgeInsets(top: 0, left: 8, bottom: 0, right: -8)
if you don't know alignmentRectInsets, you can read this blog first
swift version
var customButton = UIButton(type: .custom)
customButton.overrideAlignmentRectInsets = UIEdgeInsets(top: 0, left: x, bottom: 0, right: -x) // you should do this in your own custom class
customButton.translatesAutoresizingMaskIntoConstraints = false;
objective-c version
UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
customButton.overrideAlignmentRectInsets = UIEdgeInsetsMake(0, x, 0, -x); // you should do this in your own custom class
customButton.translatesAutoresizingMaskIntoConstraints = NO;
2. create an item with your custom button
swift version
var item = UIBarButtonItem(customView: customButton)
objective-c version
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:customButton]
3. create a fixedSpace type UIBarButtonItem with positive width
set a positive value, not a negative value
swift version
var positiveSeparator = UIBarButtonItem(barButtonSystemItem:.fixedSpace, target: nil, action: nil)
positiveSeparator.width = 8
objective-c version
UIBarButtonItem *positiveSeparator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
positiveSeparator.width = 8;
4. set an array to leftitems or rightitems
fixedSpace type UIBarButton item must be the first element in array.
swift version
self.navigationItem.leftBarButtonItems = [positiveSeparator, item, ...]
objective-c version
self.navigationItem.leftBarButtonItems = @{positiveSeparator, item, ...}
Well Done
after you doing all of the steps, you will see your padding become smaller and type area seems correct!
If you find something wrong, please let me know! I will try my best to answer your question!
Note
Before iOS 11, you should care about the device's screen width; if the screen is 5.5 inch, the negative is -12 pt, on other screens is -8pt.
If you use my solution on iOS 11, you don't need to care about the device screen, just set 8pt, You should care about item's position in navigation bar, left side or right side, this will affect your custom view's alignmentRectInsets
Want more tap area
If you want to promise your tap area is larger than 44 * 44 , you can override method below
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
CGSize acturalSize = self.frame.size;
CGSize minimumSize = kBarButtonMinimumTapAreaSize;
CGFloat verticalMargin = acturalSize.height - minimumSize.height >= 0 ? 0 : ((minimumSize.height - acturalSize.height ) / 2);
CGFloat horizontalMargin = acturalSize.width - minimumSize.width >= 0 ? 0 : ((minimumSize.width - acturalSize.width ) / 2);
CGRect newArea = CGRectMake(self.bounds.origin.x - horizontalMargin, self.bounds.origin.y - verticalMargin, self.bounds.size.width + 2 * horizontalMargin, self.bounds.size.height + 2 * verticalMargin);
return CGRectContainsPoint(newArea, point);
}