How to replace UINavigationBar with CustomHeader in iOS7

Question

I would like to use a Custom header instead of default UINavigationBar. I am able to do it well, until I encountered a condition to keep the backward compatibility with iOS6 too. I have my previous question here ,un-answered.

Recently for Facebook App, I can see in iOS7, the blue-color header bar well aligned. To me it looks like its a custom header, I am not sure. FaceBook-Header

Now the problem is that, I am stuck with implementation of my custom app header. My Custom header height is 48px which goes behind the "network status bar" on top & I am getting only approx 35pixel as the rest is behind the "network status bar" like this.

Here are my goals to achieve.

I want a custom header. - Done
I don't want to use UINavigationBar. - Done
I want the support for iOS 5.0 till 7.0 - Stuck

Here is what it looks when I am using Custom header

Here is what it looks with UINavigationBar

How I can make app headers to appear like "FaceBook header" with "Custom Header" without getting underneath the "top network Header bar". If I Increase the height of Status Bar, it will look odd in iOS6 & older, but fits well in iOS7. I want to choose the right approach.

Any expert help is highly appreciated.

You can use UIToolbar like this. – karthika Sep 30 '13 at 05:10 — karthika, Sep 30 '13 at 05:10
@karthika Can you elaborate more ..? – Balram Tiwari Sep 30 '13 at 05:20 — Balram Tiwari, Sep 30 '13 at 05:20

score 2 · Accepted Answer · answered Sep 30 '13 at 05:23

You need to place UIToolbar in xib,

and add background image in toolbar,

 self.navigationController.navigationBarHidden = YES;

[self.toolBar setBackgroundImage:[UIImage imageNamed:@"background.png"] forToolbarPosition:UIToolbarPositionAny barMetrics: UIBarMetricsDefault];

add bar button,

UIButton *facebookButton =  [UIButton buttonWithType:UIButtonTypeCustom];
[facebookButton setImage:[UIImage imageNamed:@"facbookBarImage.png"] forState:UIControlStateNormal];
[facebookButton addTarget:self action:@selector(action:)forControlEvents:UIControlEventTouchUpInside];
[facebookButton setFrame:CGRectMake(0, 0, 53, 31)];
UIBarButtonItem *facebookBarButton = [[UIBarButtonItem alloc] initWithCustomView: facebookButton];

self.toolBar.items = [NSArray arrayWithObjects: facebookBarButton,nil];

What difference does that make using a `UIToolBar *toolbar` or `UIView *myCustomheader` and adding buttons to `myCustomheader` ? Is there any special functionality that I can achieve using `UIToolBar` ? Is that `UIToolBar` usage will solve my problem of my custom header getting underneath of "Network status Bar" — Balram Tiwari, Sep 30 '13 at 05:51

Balram Tiwari · Answer 2 · 2013-09-30T06:56:09.307

After some Research on Compatibility, I have come across a working solution to make a Custom header with no UINavigationBar & achieving what I was looking for. Feel free to use this approach.

Here are my results : iOS7 and Older iOS.

The approach is to figure out edgesForExtendedLayout (available in iOS 7). If we are on iOS7 then decide the height of "Custom Header" (probably 10Pixel more than what we keep in older version, so as to pad the extra 10Pixel underneath the "Top Network status bar").

Figure out the iOS7 compatibility for edgesForExtendedLayout here

CGFloat y;
if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) {
    self.edgesForExtendedLayout = UIRectEdgeNone;
    y= 58;
}else {
    y = 48;
}

Make Custom header with height of y here

self.customHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, appDimensions.width, y)];

Custom buttons on customHeaderView here

self.sideMenuButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.sideMenuButton setFrame:CGRectMake(0, y-45, 45, 45)];

So Now if I run this on iOS7, I see my header with enough height of 48pixel (more than what we have in Human Interface Guidelines for Touch Area (44 x 44)) even being 10 pixel is underneath the "Top network status bar).

If I run this in iOS < iOS7, I will have my custom header of 48 Pixel, starting right beneath the "Top network status bar"

Hope this helps other.

How to replace UINavigationBar with CustomHeader in iOS7

2 Answers2