Negative spacer for UIBarButtonItem in navigation bar on iOS 11
EDIT:
This may no longer work as of iOS 13. You may get the error:
Client error attempting to change layout margins of a private view
OLD ANSWER:
I found a somewhat hacky solution on the Apple developer forums: https://forums.developer.apple.com/thread/80075
It looks like the problem comes from how iOS 11 handles the UIBarButtonItem
.fixedSpace
buttons and how a UINavigationBar
is laid out in iOS 11. The navigation bars now use autolayout and the layout margins to layout the buttons. The solution presented in that post (at the bottom) was to set all the layout margins to some value you want.
class InsetButtonsNavigationBar: UINavigationBar {
override func layoutSubviews() {
super.layoutSubviews()
for view in subviews {
// Setting the layout margins to 0 lines the bar buttons items up at
// the edges of the screen. You can set this to any number to change
// the spacing.
view.layoutMargins = .zero
}
}
}
To use this new nav bar with custom button spacing, you will need to update where you create any navigation controllers with the following code:
let navController = UINavigationController(navigationBarClass: InsetButtonsNavigationBar.self,
toolbarClass: UIToolbar.self)
navController.viewControllers = [yourRootViewController]
Just a workaround for my case, it might be helpful to some people. I would like to achieve this:
and previously I was using the negativeSpacer as well. Now I figured out this solution:
let logoImage = UIImage(named: "your_image")
let logoImageView = UIImageView(image: logoImage)
logoImageView.frame = CGRect(x: -16, y: 0, width: 150, height: 44)
logoImageView.contentMode = .scaleAspectFit
let logoView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 44))
**logoView.clipsToBounds = false**
logoView.addSubview(logoImageView)
let logoItem = UIBarButtonItem(customView: logoView)
navigationItem.leftBarButtonItem = logoItem
Based on keithbhunter's answer I've created a custom UINavigationBar:
NavigationBarCustomMargins.h:
#import <UIKit/UIKit.h>
@interface NavigationBarCustomMargins : UINavigationBar
@property (nonatomic) IBInspectable CGFloat leftMargin;
@property (nonatomic) IBInspectable CGFloat rightMargin;
@end
NavigationBarCustomMargins.m:
#import "NavigationBarCustomMargins.h"
#define DefaultMargin 16
#define NegativeSpacerTag 87236223
@interface NavigationBarCustomMargins ()
@property (nonatomic) BOOL leftMarginIsSet;
@property (nonatomic) BOOL rightMarginIsSet;
@end
@implementation NavigationBarCustomMargins
@synthesize leftMargin = _leftMargin;
@synthesize rightMargin = _rightMargin;
- (void)layoutSubviews {
[super layoutSubviews];
if (([[[UIDevice currentDevice] systemVersion] compare:@"11.0" options:NSNumericSearch] != NSOrderedAscending)) {
BOOL isRTL = [UIApplication sharedApplication].userInterfaceLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft;
for (UIView *view in self.subviews) {
view.layoutMargins = UIEdgeInsetsMake(0, isRTL ? self.rightMargin : self.leftMargin, 0, isRTL ? self.leftMargin : self.rightMargin);
}
} else {
//left
NSMutableArray *leftItems = [self.topItem.leftBarButtonItems mutableCopy];
if (((UIBarButtonItem *)leftItems.firstObject).tag != NegativeSpacerTag) {
UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
negativeSpacer.tag = NegativeSpacerTag;
negativeSpacer.width = self.leftMargin - DefaultMargin;
[leftItems insertObject:negativeSpacer atIndex:0];
[self.topItem setLeftBarButtonItems:[leftItems copy] animated:NO];
}
//right
NSMutableArray *rightItems = [self.topItem.rightBarButtonItems mutableCopy];
if (((UIBarButtonItem *)rightItems.firstObject).tag != NegativeSpacerTag) {
UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
negativeSpacer.tag = NegativeSpacerTag;
negativeSpacer.width = self.rightMargin - DefaultMargin;
[rightItems insertObject:negativeSpacer atIndex:0];
[self.topItem setRightBarButtonItems:[rightItems copy] animated:NO];
}
}
}
- (CGFloat)leftMargin {
if (_leftMarginIsSet) {
return _leftMargin;
}
return DefaultMargin;
}
- (CGFloat)rightMargin {
if (_rightMarginIsSet) {
return _rightMargin;
}
return DefaultMargin;
}
- (void)setLeftMargin:(CGFloat)leftMargin {
_leftMargin = leftMargin;
_leftMarginIsSet = YES;
}
- (void)setRightMargin:(CGFloat)rightMargin {
_rightMargin = rightMargin;
_rightMarginIsSet = YES;
}
@end
After that I set custom class to my UINavigationController in Interface Builder and just set needed margins: Screenshot 1
Works fine. Supports RTL and iOS prior 11: Screenshot 2