making drop shadows on UIViews

Question

I use this code in my customized UIView initialization:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        ...

        UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(frame.origin.x, frame.size.height, frame.size.width, 15)];
        self.layer.masksToBounds = NO;
        self.layer.shadowColor = [UIColor blackColor].CGColor;
        self.layer.shadowOffset = CGSizeMake(0.0f, 4.0f);
        self.layer.shadowOpacity = 0.5f;
        self.layer.shadowPath = shadowPath.CGPath;
    }
    return self;
}

trying to make a drop shadow like this:

1)

But I got this effect:

2)

You can see this is an upside down version of what I want to achieve. How to make the shadow effect of the first image?

Answer 1

The issue is just with your shadowPath.

Using CGRectMake(frame.origin.x, frame.size.height, frame.size.width, 15) to create your UIBezierPath will set an incorrect origin.

First, origin.x should be 0.0f or the shadow will shift far away if your UIView's origin.x != 0.0f. Second, you need to line up the bottom of the shadowPath with the bottom of your UIView.

This is a screenshot of UIViews using your shadow code illustrating these issues. (In the lower UIView you cannot see the shadow because it is far off the right of the screen).

You will see what you intended if you change the rect to:

const CGFloat shadowRectHeight = 15.0f;
CGRect shadowRect = CGRectMake(0.0f, self.bounds.size.height - shadowRectHeight, self.bounds.size.width, shadowRectHeight)];

Answer 2

Do like this and set the UIView alpha

CAGradientLayer *gradient = [CAGradientLayer layer];  
gradient.frame = rect;  
gradient.colors = [NSArray arrayWithObjects:(id)[UIColor blackColor].CGColor,   
                                            (id)[UIColor grayColor].CGColor,   
                                            (id)[UIColor blackColor].CGColor,nil];  
[self.layer insertSublayer:gradient atIndex:0];  

you can add or remove UIColor you want to display.