CODEWITHSUNDEEP
iosobjective-cuiviewcore-graphics
tranvutuan
tranvutuan

Reputation: 6109

A view with a shadow

enter image description here

I am looking for the way to write an effect like the image above (from the Groupon app) for a view. Using the code below, I tried to get a shadow going, but it's not working. The effect I am looking for is the view getting darker from top to bottom. Can anybody tell me what I've done wrong, and how to get closer to the effect Groupon gets?

   view.layer.shadowColor           =   [[UIColor blackColor] CGColor];
   view.layer.shadowRadius          =   8.0f;
   view.layer.shadowOpacity         =   0.75f;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:view.bounds cornerRadius:4.0];
   view.layer.shadowPath            =   path.CGPath;

Upvotes: 1

Views: 224

Answers (2)

DOLOisSOLO
DOLOisSOLO

Reputation: 141

Just to reiterate Jesse Rusak's solution above, in your UIView's Drawrect you create a gradient from clear to black and add it to your view's sublayer:

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    UIColor * darkerColor = [UIColorcolorWithWhite:0.0alpha:0.5];
    CGContextSetFillColorWithColor(context, darkerColor.CGColor);
    CGContextFillRect(context, self.bounds);
    NSArray *colors = [NSArrayarrayWithObjects:
                   ((id)[self.backgroundColorcolorWithAlphaComponent:0.0f].CGColor),
                   ((id) [UIColorcolorWithWhite:0.0alpha:1.0].CGColor), nil];
    gradientLayer = [[CAGradientLayeralloc] init];
    gradientLayer.startPoint = CGPointMake(0.5, 0);
    gradientLayer.endPoint = CGPointMake(0.5,1);
    gradientLayer.frame = self.frame;
    gradientLayer.colors = colors;
    [self.layerinsertSublayer:gradientLayeratIndex:0];
}

Upvotes: 0

Jesse Rusak
Jesse Rusak

Reputation: 57188

The effect you're looking for is called a gradient. (In iOS terms, a shadow is a duplicate of some object, blurred, tinted and offset.)

You can use a CAGradientLayer to get the kind of effect you're looking for; try adding one of these as a sublayer of your view.

Upvotes: 3

Related Questions