如何在iOS 8的UINavigationViewController中更改UINavigationBar的大小？

Question

What is the proper way to change height of navigation bar?

I need to create custom title in navigation bar, it should contains two UILabels one above other. The Title should be resized to fit those UILabels.

Should I override sizeThatFits : method in my custom TitleView, would other buttons correctly change to fit that size? How can I change a size of NavigationBar?

That is what I need to create using latest SDK features.

Answer 1

Create the following class category (you can create it in your implementation file):

#import "objc/runtime.h"

@interface UINavigationBar (CustomHeight)

- (void)setHeight:(CGFloat)height;

@end

static char const *const kHeight = "Height";

@implementation UINavigationBar (CustomHeight)

- (void)setHeight:(CGFloat)height
{
    objc_setAssociatedObject(self, kHeight, @(height), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (NSNumber *)height
{
    return objc_getAssociatedObject(self, kHeight);
}

- (CGSize)sizeThatFits:(CGSize)size
{
    CGSize newSize;

    if (self.height) {
        newSize = CGSizeMake(self.superview.bounds.size.width, [self.height floatValue]);
    } else {
        newSize = [super sizeThatFits:size];
    }

    return newSize;
}
@end

And after that, simply call [self.navigationController.navigationBar setHeight:100.0] in your viewDidLoad or where you need it. Works in both iOS 7.1 and 8.1.

Disclaimer: Any alteration of the API and its functions is prone to future issues with new OS releases! Apple does not intend to allow us to change the navigation bar height (except for some rare instances) so use any solution wisely after assessing the risks vs advantages.

Answer 2

Add custom view for both navigation title and navigation right bar button.

Here how you can add title view like above.

// Custom view for navigation title.
UIView *customTitleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];

UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 22)];
label1.text = @"Stasik";
label1.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:20];
label1.textAlignment = NSTextAlignmentCenter;
[customTitleView addSubview:label1];

UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 22, 100, 22)];
label2.text = @"Stasik iPhone";
label2.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:16];
label2.textAlignment = NSTextAlignmentCenter;
label2.textColor = [UIColor darkGrayColor];
[customTitleView addSubview:label2];

self.navigationItem.titleView = customTitleView;

// Custom view for right navigation.

UIButton *upButton = [UIButton buttonWithType:UIButtonTypeCustom];
upButton.frame = CGRectMake(0, 0, 20, 44);
[upButton setImage:[UIImage imageNamed:@"up"] forState:UIControlStateNormal];
[upButton addTarget:self action:@selector(upButtonTapped:) forControlEvents:UIControlEventTouchUpInside];

UIBarButtonItem *upButtonBarItem = [[UIBarButtonItem alloc] initWithCustomView:upButton];

UIButton *downButton = [UIButton buttonWithType:UIButtonTypeCustom];
downButton.frame = CGRectMake(0, 0, 20, 44);
[downButton setImage:[UIImage imageNamed:@"down"] forState:UIControlStateNormal];
[downButton addTarget:self action:@selector(downButtonTapped:) forControlEvents:UIControlEventTouchUpInside];

UIBarButtonItem *downButtonBarItem = [[UIBarButtonItem alloc] initWithCustomView:downButton];

// Remove trailing space for right view.
UIBarButtonItem *nagativeSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
nagativeSpace.width = -11;

self.navigationItem.rightBarButtonItems = @[nagativeSpace, upButtonBarItem, downButtonBarItem];

// Left item
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, 40, 44);
[backButton setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
[backButton addTarget:self action:@selector(backButtonTapped:) forControlEvents:UIControlEventTouchUpInside];

// Remove leading space for left view.
nagativeSpace.width = -15;

UIBarButtonItem *backButtonBarItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.navigationItem.leftBarButtonItems = @[nagativeSpace, backButtonBarItem];

OutPut:

Arrow images are different than OP's requirement but it serves layout for navigation views.

From above code make change in nagativeSpace.width value to arrange buttons with accurate distance from left as well as right margins.

Answer 3

Looking at that design that you posted, I don't have the impression that the bar is really higher than the standard 44pt. Please note that starting with iOS7 the status bar is integrated into the same bar and the 20pt of the status bar is added to the total height.

IMHO, the only problem you need to solve is to stack the title/subtitle, and that can be easily done with a custom titleView , as Kampai has demonstrated.