how can I add attached drop shadows to uinavigationbar and uitoolbar

Question

I'm working on an app that uses a custom image for UINavigationBar and UIToolbar, which is fine, but they also need a drop shadow below the nav bar and above the toolbar, which would always rest above all other view controllers. I cannot simply make background images which include the shadows as this would not work well with my tableviews. I also need the shadows animate away when I set nav bar and tool bar to hidden (animated).

I've looked through Stack Overflow and other sources on the net, and have worked through the proposed solutions but I cannot successfully subclass UINavigationBar, UIToolbar or even UINavigationController to provide the results I am after.

Would appreciate any help that could be offered. Thanks :)

Answer 1

In the end I decided to just use background png images with the shadows, and apply them with a subclass for UINavigationBar and UIToolbar which implemented the drawRect method (for the background image) and the sizeThatFits method to resize the navigation bar. Here is the final product (the button hides the bars):

Here are the methods I implemented in each subclass:

 - (void)drawRect:(CGRect)rect {
   UIImage *image = [[UIImage imageNamed:@"bargloss-withshadow.png"] retain];
   [image drawInRect:rect];
   [image release];
}


- (CGSize)sizeThatFits:(CGSize)size {
    CGSize newSize = CGSizeMake(320,60);
    return newSize;
}

Please note that I also made the bars Black Translucent in IB so that the content flowed under them.

Answer 2

It can be done relatively easy assuming you are not doing anything too fancy with your view hierarchy. Add the following lines of code the your application:didFinishLaunchingWithOptions method.

dispatch_async(dispatch_get_main_queue(), ^{
    UIWindow* mainWindow = [[[UIApplication sharedApplication] windows] objectAtIndex:0];
    UIView* mainView = [[mainWindow subviews] objectAtIndex:0];
    UIImageView* shadowImageView = [[UIImageView alloc] initWithImage:kImgNavbarShadowResizeable];
    shadowImageView.frame = CGRectMake(0, 64, 320, shadowImageView.frame.size.width);
    [mainView insertSubview:shadowImageView atIndex:1];
});

The shadowImageView is the imageView you want to use as the shadow.

Answer 3

Check out Matt Gallagher's blog post. It covers (part of) what you want to do. Other than that, you can try adding a "shadow view" above your navigation controller which you can animate as you wish.