vertically aligning UINavigationItems

Question

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.

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.

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?

Answer 1

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];

Answer 2

The current accepted answer from alhcr (Option 1) does not work if you only have a rightBarButtonItem and no left. It is also making an assumption about the subview ordering of the UINavigationBar which is not guaranteed and could very well change in a future version of iOS. Here is a better way of customizing navigation button frames:

// UINavigationBar subclass

- (void)layoutSubviews {

    [super layoutSubviews];

    UINavigationItem *navigationItem = [self topItem];

    for (UIView *subview in [self subviews]) {

        if (subview == [[navigationItem rightBarButtonItem] customView]) {

            CGRect newRightButtonRect = CGRectMake(...new rect...);
            [subview setFrame:newRightButtonRect];
        }
        else if (subview == [[navigationItem backBarButtonItem] customView]) {

            CGRect newBackButtonRect = CGRectMake(...new rect...);
            [subview setFrame:newBackButtonRect];
        }
    }
}

Answer 3

I found the solution of this problem by making adjustment in the Image Edge Insets of the custom button. I had the requirement in the app to increase the height of the navigation bar and after increasing the height makes the rightBarButtonItem and leftBarButtonItem images unpositioned problem.

Find the code below:-

UIImage *image = [[UIImage imageNamed:@"searchbar.png"];
UIButton* searchbutton = [UIButton buttonWithType:UIButtonTypeCustom];
[searchbutton addTarget:self action:@selector(searchBar:) forControlEvents:UIControlEventTouchUpInside]; 
searchbutton.frame = CGRectMake(0,0,22, 22);
[searchbutton setImage:image forState:UIControlStateNormal];
[searchbutton setImageEdgeInsets:UIEdgeInsetsMake(-50, 0,50, 0)];
// Make BarButton Item
 UIBarButtonItem *navItem = [[UIBarButtonItem alloc] initWithCustomView:searchbutton];
self.navigationItem.rightBarButtonItem = navItem;

Answer 4

This will move page title and all buttons up 20 px:

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:-20.0 forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundVerticalPositionAdjustment:-20.0 forBarMetrics:UIBarMetricsDefault];