Search code examples
objective-ciosuinavigationcontrolleruinavigationbaruinavigationitem

vertically aligning UINavigationItems


I have customized the UINavigationBar's height to 100px and I'd like to add buttons onto this customized bar.

All is good except the button seems to want to sit on the bottom of the nav bar no matter what. I can't get it to align to the center or the top of the nav bar.

enter image description here

Here is the code; first I create a navigation controller in the app delegate and add one button on the right.

// set main navigation controller
temp *tempc = [[temp alloc] initWithNibName:@"temp" bundle:nil];
self.navigationController = [[UINavigationController alloc] initWithRootViewController:tempc];

UIBarButtonItem *navItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil];

[tempc.navigationItem setRightBarButtonItem:navItem];
[self.window addSubview:self.navigationController.view];
[self.window makeKeyAndVisible];

then I resize the navigation bar in the "temp" view controller like so:

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, 100.0f);
    [self.navigationController.navigationBar setFrame:frame];
    [self.navigationController.navigationBar setAutoresizingMask:UIViewAutoresizingFlexibleBottomMargin];
}

I've also tried to add a custom view to the rightBarButtonItem but I can't get the added custom view to touch the top completely.

enter image description here

And the code for this unfortunate attempt:

// set main navigation controller
temp *tempc = [[temp alloc] initWithNibName:@"temp" bundle:nil];
self.navigationController = [[UINavigationController alloc] initWithRootViewController:tempc];

UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 36.0f, 80.0f)];
[customView setBackgroundColor:[UIColor blueColor]];

UIButton *customButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[customButton setFrame:CGRectMake(0, 22.0f, 36.0f, 36.0f)];
[customButton setTitle:@"+" forState:UIControlStateNormal];

[customView addSubview:customButton];
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithCustomView:customView];

Does anyone know how to vertically align UIBarButtonItems on a UINavigationBar?


Solution

  • Option 1:

    • create UINavigationBar subclass
    • inside this class override - (void)layoutSubviews where you will reposition UIBarButtonItems
    • in Interface Builder set UINavigationBar class to UINavigationBar subclass

    Example:

    inside subclass of UINavigationBar:

    - (void)layoutSubviews {
        int index = 0;
        for ( UIButton *button in [self subviews] ) {
            if(index == 1) {
                [button setFrame:CGRectMake(5,40,60,40)]; //leftBarButtonItem
            } else if(index == 2) {
                [button setFrame:CGRectMake(275,40,40,40)]; //rightBarButtonItem
            }
            ++index;
        }
    }
    

    view controller:

    - (void)viewDidLoad {
    ...
        UIBarButtonItem *navItem1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil];
        UIBarButtonItem *navItem2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:nil action:nil];
        [self.navigationItem setRightBarButtonItem:navItem1];   
        [self.navigationItem setLeftBarButtonItem:navItem2];
    
        CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, 100.0f);
        [self.navigationController.navigationBar setFrame:frame];
    ...
    }
    

    Option 2 (inserting UIBarButtonItem doesn't work):

    UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0,0,320,100)];
    [self.view addSubview:navigationBar];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setFrame:CGRectMake(0,25,50,50)];
    [navigationBar addSubview:button];