Adjusting navigationItem.titleView's frame?

Question

I noticed that the titleView's position depends on the rightbarbutton title. How can I set the frame of the titleView to be in the center instead?

I've tried setting titleView.frame, but to no avail.

Here's the code:

UIButton *titleLabel = [UIButton buttonWithType:UIButtonTypeCustom];
[titleLabel setTitle:@"Right Eye" forState:UIControlStateNormal];
[titleLabel setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[titleLabel setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
titleLabel.frame = CGRectMake(100, 0, 180, 44);
titleLabel.titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.titleLabel.font = [UIFont boldSystemFontOfSize:20.0];
titleLabel.titleLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.3];
//  titleLabel.titleLabel.textAlignment = UITextAlignmentCenter; (this doesn't work either)
[titleLabel addTarget:self action:@selector(titleTap:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.titleView = titleLabel;
self.navigationItem.titleView.frame = CGRectMake(100, 0, 180, 44); //(this doesn't work either)

Answer 1

Sometime in between your view controller's viewWillAppear: & viewDidAppear:, the navigation bar is repositioning your titleView and resizing it to fit if necessary. It can end up uncentered because the navigation bar is prefering not to resize your titleView to fit between the buttons. It seems to try to center the title view if it's small enough, but if not will move your titleView off-center, and then I think only as last resort will resize. The effect is that the titleView is taking up all the space between the two buttons, if its textAlignment is centered then it will centered in that space though not the centered with respect to the whole screen. You can see this in your screen shot.

One answer is to make your titleView narrower so the navigation bar can center it, so try about 160 instead of 180 when you set your titleView.frame. It sucks that, when creating the view programmatically like you are, one has to put an estimate for that width into the code. What would be good is a way to maximize that space while staying centered.

It's possible to start with the titleView being the screen width, then after the navigation bar changes titleView.frame, update it again yourself in the view controller's viewDidAppear:. Using its adjusted titleView.frame.origin.x and size.width along with the screen width, you can calculate the largest of the left & right margins, then set the origin.x to that, the size.width to the screen width minus that times 2. However that doesn't take effect until after the pushed view has animated in and the shift afterwards is visible. You could hide the titleView in viewWillAppear: then unhide in viewDidAppear: after centering it, so instead of sliding in with an off-center titleView which is then shifted, it would slide in with no title which then appears.

A better possibility is to make your titleView your own subclass of UIView (or UILabel or whichever) and override setFrame to resize itself to stay centered in its superview. If I ever end up doing this myself I'll post it here. Or maybe someone else knows another place to change the titleView's frame after its been updated but before the view slides in without a view subclass.

Answer 2

After setting up your titleView or titleLabel, call sizeToFit on it, also make sure titleLabel.textAlignment = UITextAlignmentCenter . It'll be centered in the width of the navbar rather than in the space between the button edge and far edge of navbar.

Answer 3

None of the suggestions here really worked for me. My issue was that I was setting titleView while the navigation bar was in the middle of it's transition - I'd get this weird jitter where the titleView would flicker over to the left, and then end up back in the center.

I ended up following smallduck's idea and overriding setFrame, was as simple as:

- (void)setFrame:(CGRect)frame {
    [super setFrame:CGRectMake(0, 0, self.superview.bounds.size.width, self.superview.bounds.size.height)];
}

Answer 4

You can try set the frame to CGRectZero initially and call sizeToFit. Below is the code I used to change the title text and made sure it is still centered. I had a back button on the left.

UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];    
label.text = @"Title";
[label sizeToFit];
self.navigationItem.titleView = label;

Answer 5

Override intrinsicContentSize in your custom view:

- (CGSize )intrinsicContentSize {
    return CGSizeMake(180, 44);
}

Answer 6

My solution was to manually resize the navigation bar in viewDidAppear:

- (void)viewDidAppear
{
     [super viewDidAppear];
     [self.navigationController.navigationBar setFrame:CGRectMake(x, y, width, height)];
}

...after that you can reposition the title view as well. I just noticed that the main issue was the fact that the navigation bar wqas resized as well, so I brought it back to its regular size. I got the regular size from debugging and checking its size in viewDidLoad before it got modified...

Answer 7

-(void) awakeFromNib
{
    UIButton *titleLabel = [UIButton buttonWithType:UIButtonTypeCustom];
    [titleLabel setTitle:@"Right Eye" forState:UIControlStateNormal];
    [titleLabel setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [titleLabel setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
    titleLabel.titleLabel.backgroundColor = [UIColor clearColor];
    titleLabel.titleLabel.font = [UIFont boldSystemFontOfSize:20.0];
    titleLabel.titleLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.3];
    [titleLabel addTarget:self action:@selector(titleTap:) forControlEvents:UIControlEventTouchUpInside];
    titleLabel.frame = CGRectMake(0, 0, 400, 20);
    self.navigationItem.titleView = titleLabel;

}

Answer 8

I have a slightly other use case (vertical offset of UIButton as titleView on iOS 7). After a long time I came up with using the contentEdgeInsets property of the UIButton to shift the content in its frame.

Answer 9

Only way I found to Fix this is to not use UINavigationItems. Insted use two different views on eace button side of the UINavigationBar like so:

-(UIView *)rightButtonViewSection {
    if (!_rightButtonViewSection) {

        _rightButtonViewSection = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 45)];

    }
    return _rightButtonViewSection;

}

-(UIView *)leftButtonViewSection {
    if (!_leftButtonViewSection) {

        _leftButtonViewSection = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 45)];

    }
    return _leftButtonViewSection;

}

and setButtons on it like so:

 ButtonBase *searchButton = [[ButtonBase alloc] initWithFrame:CGRectMake(0, 0, 32, 30)];
    [searchButton setImage:[UIImage imageNamed:SEARCH_IMAGE] forState:UIControlStateNormal];
    SEL searchSelector = @selector(tradersSearchButtonPress);
    [searchButton addTarget:self action:searchSelector forControlEvents:UIControlEventTouchUpInside];

    self.notificationButton.view.frame = [self rightButtonFrame];
    searchButton.frame = [self rightSecoundButtonFrame];

    [self.rightButtonViewSection removeAllSubviews];
    [self.rightButtonViewSection addSubview:self.notificationButton.view];
    [self.rightButtonViewSection addSubview:searchButton];

    UIBarButtonItem *buttonItem  = [[UIBarButtonItem alloc] initWithCustomView:self.rightButtonViewSection];
    self.topViewController.navigationItem.rightBarButtonItem = buttonItem;

ButtonsFrames:

-(CGRect) rightButtonFrame {
    return CGRectMake(self.rightButtonViewSection.width - 32, 7, 32, 30);
}
-(CGRect) rightSecoundButtonFrame {
    return CGRectMake(self.rightButtonViewSection.width - 80, 7, 32, 30);
}

Then the title will not move! because the UIButtonsViews are same width.

Answer 10

Same problem here. Implementing autoscrolling label as titleView. So that long text in navigation title could be scrolled automatically for user to see it all. All that problems with unknown real dimensions of titleView prevents text centering in simplest special case: when label text fits and no autoscrolling needed (like setting text to title property of navigationItem).

Answer 11

I was implementing a two row title similar to something WhatsApp is doing (title and subtitle).

I fixed this problem by subclassing UINavigationController and overriding viewDidLayoutSubviews() .

My titleView looks like the following (in a viewController ):

let frame = self.navigationController?.navigationBar.bounds ?? CGRect.zero

// This is a container view for the two labels, laying them out vertically
let titleView = UIStackView(arrangedSubviews: [self._titleLabel, self._promptLabel])
titleView.axis = .vertical
titleView.alignment = .center
titleView.distribution = .fill
titleView.frame = frame // set the frame to the navbarFrame initially
titleView.spacing = 0

// The wrapper is necessary for laying out the stackView as the titleView
let wrapperView = UIView(frame: frame)
wrapperView.addSubview(titleView)

self.navigationItem.titleView = wrapperView

My viewDidLayoutSubviews() :

guard let navigationItem = self.topViewController?.navigationItem,
      let titleView = navigationItem.titleView,
      let wrapperView = titleView.subviews[0] as? UIStackView else { return }

var width : CGFloat = 0

for view in wrapperView.arrangedSubviews {
    view.sizeToFit()
    width = max(width, view.frame.size.width)
}

titleView.frame.size.width = width
titleView.frame.size.height = self.navigationBar.frame.height
wrapperView.frame = titleView.bounds
wrapperView.center.x = self.navigationBar.convert(self.navigationBar.center, to: titleView).x
wrapperView.center.y = titleView.frame.height / 2

self.navigationBar.layoutIfNeeded()

Note: The trick is to have a wrapper view around your titleView which can be layed out by the navigation bar. Then adjust the frame of your titleView to what you desire.

Answer 12

Recently I face with the same problem, I have a complex title view whose contents may changes, so I want can show as more content as possible, my left bar button item and right bar button item has different width, so if I set it a long width, the navigation bar won't center it. As you may know when the left or right bar button item is very long, it's impossible to center the title view, so I want to center it as much as possible.

Once we set a view to self.navigationItem.titleView , the navigation bar will manage title view's frame, it's hard to center it directly, so I subclass a view which works as the real title view's container view, I set its width with the screen width, UINavigationBar with set its frame to a property value respecting to its left/right bar button item.

The container view is MDLNavigationTitleContainer and the real title view is MDLMessagesNavigationTitleView , MDLMessagesNavigationTitleView is managed by auto layout, as it's super view is MDLNavigationTitleContainer , every time its width changes, layoutSubviews will be called. The code in layoutSubviews seems a little weird, it is used to handle the push/pop animation.

@interface MDLNavigationTitleContainer ()

@property (nonatomic) CGRect oldFrame;

@end

@implementation MDLNavigationTitleContainer

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        UINib *nib = [UINib nibWithNibName:@"MDLMessagesNavigationTitleView" bundle:[NSBundle bundleForClass:[MDLMessagesNavigationTitleView class]]];
        self.titleView = [[nib instantiateWithOwner:nil options:nil] firstObject];
        self.titleView.translatesAutoresizingMaskIntoConstraints = NO;
        [self addSubview:self.titleView];
        NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:self.titleView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
        NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:self.titleView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
        NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:self.titleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationLessThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:0];
        width.priority = 200;
        NSLayoutConstraint *width1 = [NSLayoutConstraint constraintWithItem:self.titleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationLessThanOrEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
        [self addConstraint:centerX];
        [self addConstraint:centerY];
        [self addConstraint:width];
        [self addConstraint:width1];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];

    if (!self.superview) {
        return;
    }

    if (self.center.x > [UIScreen mainScreen].bounds.size.width) {
        self.titleView.frame = self.oldFrame;
        return;
    }

    CGFloat centerX = self.center.x;

    CGFloat superWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat superCenterX = superWidth/2;
    CGFloat offsetX = superCenterX - centerX;
    CGPoint center = self.titleView.center;

    if (CGRectGetMaxX(self.titleView.frame) + offsetX < self.bounds.size.width &&
        CGRectGetMinX(self.titleView.frame) + offsetX > 0) {
        center = CGPointMake(self.bounds.size.width/2 + offsetX, self.bounds.size.height/2);
    }
    CGSize size = self.titleView.bounds.size;
    if (size.width > self.bounds.size.width) {
        size.width = self.bounds.size.width;
    }

    self.titleView.frame = CGRectMake(center.x-size.width/2, center.y-size.height/2, size.width, size.height);
    self.oldFrame = self.titleView.frame;
}

Set the title view:

MDLNavigationTitleContainer *titleView = [[MDLNavigationTitleContainer alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 44)];
self.navigationItem.titleView = titleView;

Answer 13

只需在导航栏右侧添加不可见按钮（无文本），并将其大小更改为例如 20 px