iOS - Just a quick way to create a shadow on any view

Jeroen Leenarts

Sometimes you would want a shadow on a view.

Easiest and quickest way is to just add it on the view's layer:

-(void)loadView {
    CGRect frame = [[UIScreen mainScreen] applicationFrame];
    
    self.view = [[UIView alloc] initWithFrame:frame];
    self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    self.view.backgroundColor = [UIColor blackColor];
    
    UIView *glowView = [[UIView alloc] initWithFrame:CGRectMake(frame.size.width /2 -10, frame.size.height /2 -30, 20, 60)];
    glowView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | 
                                    UIViewAutoresizingFlexibleTopMargin |
                                    UIViewAutoresizingFlexibleLeftMargin |
                                    UIViewAutoresizingFlexibleRightMargin;
    
    glowView.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:glowView];
    
    //Setup the shadow on the view's CALayer.
    CALayer *viewLayer = glowView.layer;
    viewLayer.shadowOffset = CGSizeMake(0, 0);
    viewLayer.shadowColor = [[UIColor yellowColor] CGColor];
    viewLayer.shadowPath = [UIBezierPath bezierPathWithRect:glowView.bounds].CGPath;
    viewLayer.shadowRadius = 10.0f;
    viewLayer.shadowOpacity = 1.0f;
 
    //Let's animate it while we're at it.
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
    animation.duration = 0.5f;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.fromValue = [NSNumber numberWithFloat:1.0];
    animation.toValue = [NSNumber numberWithFloat:0.0];
    animation.autoreverses = YES;
    animation.repeatCount = HUGE_VALF;
    [viewLayer addAnimation:animation forKey:@"shadowOpacity"];
}

I must admit, this is kind of basic stuff. But it seems a lot of people actually forget about the fact that all UIView subclasses are based on Core Animation CALayers.

See the source code https://github.com/xebia/ios-DemoForBlog and try the example, the interesting bits about this example are all contained within the fourth tab of the application, it's the XSDFourthViewController in the code.

Comments (0)

    Add a Comment