UINavigationController with custom shape navigation Bar

Question

I\'m trying to create a custom UINavigationBar with a custom shape, like this (ignore transparency)

Answer 1

Hm, are you sure the bar has this shape, or it's just it's texturized with a translucent/transparent background with the rounded shape? I'm asking you because, as far as I know, you can't alter the drawRect method from the UINavigationBar.

If it were me, I'd pick up gimp and make a rectangular background with the required shape, using alpha channel to achieve transparency. It's probably easier :)

EDIT: Maybe you shouldn't give up on your idea yet ;) Check this https://developer.apple.com/library/ios/documentation/2ddrawing/conceptual/drawingprintingios/BezierPaths/BezierPaths.html and you'll find that maybe your code is still incomplete. Also, a couple of small things:

• You're drawing the curve to the 180,100 point. Note that this is not the center of the bar, you should put 160,100 if you don't want it to be irregular. Also, you should take care with those "320"'s from here on. What if it's run on an iPad? What if it's landscape? What if iOS 8 comes and the size is not 320 anymore? ;)

• Take care also with these "90"'s from the height. As far as I know, the navigation bar is normally 44 pixels tall (64 counting the status bar). It's likely that the height is trimmed to 64 somehow and you end not seeing the curve, so I would consider using a small number until you have it working.

EDIT 2: about your last issues... this is a crazy guess, but have you tried calling the [super drawRect:rect] method before even building the bezier path? It's likely that the superclass has already implemented the painting mechanism for the status bar / transparency, and you just need to call it. Never done it on the past so I don't know if it will work, but it's worth a try ;)

EDIT 3: About the status bar problem, have you tried implementing this protocol? https://developer.apple.com/library/ios/documentation/uikit/reference/UIBarPositioning_Protocol/Reference/Reference.html#//apple_ref/c/econst/UIBarPositionTop This is another crazy guess since I've not done it before, but it looks like UINavigationBar implements the UIBarPositioning protocol, where you can implement the barPosition method, force it to return the UIBarPositionTopAttached value, and this way your navigation bar will show under the status bar. If it's like that, then probably the only remaining step is make it be 20 pixels higher and add a 20px vertical offset to all views. Worth a try, I guess! ;)

Answer 2

Well, I'm silly xD

Finally I got a solution for this issue and it was much simpler than I expected.

Here are the steps:

1) Subclass UINavigationBar, I created a CustomNavigationBar object.

2) Inside it's init, write this lines

UIImage *image = [UIImage imageNamed:@"barBackgroundImageName"];
[self setBackgroundImage:image forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];
[self setShadowImage:[UIImage new]];

This is important and the reason why I couldn't make all this thing work, image's height must be 64px. I find out this on the online Apple Documentation where it describes the behaviour between UINavigationBar and the Status Bar.

3) And that's all. This is the result in my case (I know the background isn't symmetric, just a test).

Thanks to all for your time and help!!!