Search code examples
iosobjective-cuibuttonbaritem

UINavigationBar - Change Height / Add Big Button

I need to change the height of my Navigation Bar and add a custom Image button to the top left corner. I am part way there, but lost now on getting the custom Image button in the right position. Here is what I have:

To adjust the height I have created a UINavBar category with one method as follows: @implementation UINavigationBar (myNavBar)

- (CGSize)sizeThatFits:(CGSize)size {
    CGSize newSize = CGSizeMake(768,80);
    return newSize;
}

@end

I have also created a UINavigationController subclass to modify the button. Here is the viewDidLoad from that class:

UIImage *navBackgroundImage = [UIImage imageNamed:@"bar"];
[[UINavigationBar appearance] setBackgroundImage:navBackgroundImage forBarMetrics:UIBarMetricsDefault];


// Change the appearance of back button
UIImage *backButtonImage = [[UIImage imageNamed:@"back_off"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 6)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

// Change the appearance of other navigation button
UIImage *barButtonImage = [[UIImage imageNamed:@"menu_off"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
[[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

So far this solution resizes the top nav bar, but positions my button in a weird position. Here are what I want vs. what is happening:

What I want

goal

What I get

actual

Solution

  • I have a UIBarButtonItem Category that I use which has an offset property:

    UIBarButtonItem+CustomImage.h

    @interface UIBarButtonItem (CustomImage)

+ (UIBarButtonItem*)barItemWithImage:(UIImage*)image target:(id)target action:(SEL)action offset:(CGPoint)offset;

@end

    UIBarButtonItem+CustomImage.m

    #import "UIBarButtonItem+CustomImage.h"

@implementation UIBarButtonItem (CustomImage)

+ (UIBarButtonItem *)barItemWithImage:(UIImage *)image target:(id)target action:(SEL)action offset:(CGPoint)offset {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:image forState:UIControlStateNormal];
    [button setFrame:CGRectMake(0.0, 0.0, image.size.width, image.size.height)];
    [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    [button setBounds:CGRectOffset(button.bounds, 0.0, -10.0)];

    UIView *container = [[UIView alloc] initWithFrame:button.frame];
    [container setBounds:CGRectOffset(container.bounds, offset.x, offset.y)];
    [container addSubview:button];

    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:container];
    return item;
}

@end

    Example Usage

    #import "UIBarButtonItem+CustomImage.h"

UIBarButtonItem *settingsButton = [UIBarButtonItem barItemWithImage:settingsImage
                                                 target:self
                                                 action:@selector(revealSettings:)
                                                 offset:CGPointMake(0.0, 0.0)];

[self.navigationItem setLeftBarButtonItem:settingsButton];