Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create UINavigationBar drop shadow

Would like to know create drop shadow for UINavigationbar. I tried to create custom navigation bar background with drop shadow, but the drop shadow cover the background view.

@implementation UINavigationBar (CustomImage) - (void)drawRect:(CGRect)rect {    UIImage *image = [[UIImage imageNamed:@"titleBar.png"] retain];;    [image drawInRect:rect];    [image release]; }  - (CGSize)sizeThatFits:(CGSize)size {    CGSize newSize = CGSizeMake(320,50);    return newSize; } @end  I also tried on following solution: http://www.travisboudreaux.com/adding-a-drop-shadow-to-a-uinavigationbar:   @interface UINavigationBar (dropshadow)  -(void) applyDefaultStyle;  @end  @implementation UINavigationBar (dropshadow)  -(void)willMoveToWindow:(UIWindow *)newWindow{    [self applyDefaultStyle]; }  - (void)applyDefaultStyle {   // add the drop shadow   self.layer.shadowColor = [[UIColor blackColor] CGColor];   self.layer.shadowOffset = CGSizeMake(0.0, 3.0);   self.layer.shadowOpacity = 0.25; } @end 

It shows drop shadow for my navigationbar button, but no the navigation bar itself.

Final Solution: Here's how I create drop shadow for UINavigationBar. Big thanks for MusiGenesis for pointing out the missing link of my code:

#import <QuartzCore/QuartzCore.h>  @interface UINavigationBar (CustomImage)  -(void) applyDefaultStyle;  @end  //Override For Custom Navigation Bar @implementation UINavigationBar (CustomImage) - (void)drawRect:(CGRect)rect {     UIImage *image = [UIImage imageNamed: @"titleBar.png"];     [image drawInRect:CGRectMake(0, 0, 320, 44)];    }  -(void)willMoveToWindow:(UIWindow *)newWindow{     [super willMoveToWindow:newWindow];     [self applyDefaultStyle]; }  - (void)applyDefaultStyle {     // add the drop shadow     self.layer.shadowColor = [[UIColor blackColor] CGColor];     self.layer.shadowOffset = CGSizeMake(0.0, 3);     self.layer.shadowOpacity = 0.25;     self.layer.masksToBounds = NO;     self.layer.shouldRasterize = YES; }  @end 

** Remember to import quartzcore or it will throw error.

like image 829
TonyTakeshi Avatar asked May 09 '11 16:05

TonyTakeshi


1 Answers

If you apply a drop shadow to a UINavigationBar, the shadow is clipped at below the corners:

clipped shadow

This is just how shadows behave on rectangles. I usually create a path for the shadow that's a bit wider than the actual nav bar, which creates an effect that is more like what you'd generally expect:

@implementation UINavigationBar (DropShadow)  -(void)willMoveToWindow:(UIWindow *)newWindow {     [super willMoveToWindow:newWindow];     self.layer.shadowColor = [UIColor blackColor].CGColor;     self.layer.shadowOpacity = 1;     self.layer.shadowOffset = CGSizeMake(0,4);     CGRect shadowPath = CGRectMake(self.layer.bounds.origin.x - 10, self.layer.bounds.size.height - 6, self.layer.bounds.size.width + 20, 5);     self.layer.shadowPath = [UIBezierPath bezierPathWithRect:shadowPath].CGPath;     self.layer.shouldRasterize = YES; } 

better

like image 184
Christopher Pickslay Avatar answered Sep 21 '22 09:09

Christopher Pickslay