Ancient Programming

What I encounter in my software part of life is in danger of being commented upon here

How to implement drop shadow and immerse effects for UIViews

Posted by Jacob von Eyben on December 30th, 2011


It is pretty easy to create a drop shadow or immerse effect like this in iOS.

Here is two static helper methods I created to do the trick.
The first method is capable of dropping a shadow from one view onto another:

+ (void)dropColor:(UIColor *)dropColor from:(UIView *)dropFromView onto:(UIView *)toView x:(CGFloat)x y:(CGFloat)y {
    CGFloat cornerRadius = [[dropFromView layer] cornerRadius];
    UIView *shadow = [[[UIView alloc] initWithFrame:dropFromView.frame] autorelease];
    [[shadow layer] setCornerRadius:cornerRadius];
    CGRect dropRect = dropFromView.frame;
    shadow.frame = CGRectMake(dropRect.origin.x + x, dropRect.origin.y + y, dropRect.size.width, dropRect.size.height);
    [shadow setBackgroundColor:dropColor];
    [toView insertSubview:shadow belowSubview:dropFromView];
}

The second takes advantage of the first and creates an effect that makes it looks like the first view is immersed into the other:

+ (void)immerse:(UIView *)immerseView into:(UIView *)toView depth:(CGFloat)depth {
    CGFloat x = 0.7;
    CGFloat y = 1.4;
    [UIUtil dropColor:[UIColor darkGrayColor] from:immerseView onto:toView x:-1 * x * depth y:-1 * y * depth];
    [UIUtil dropColor:[UIColor whiteColor] from:immerseView onto:toView x:x*depth y:y*depth];
}

The following effect can be added to a tableview by doing this:

- (void)viewDidLoad {
    [super viewDidLoad];
    [[_tableView layer] setCornerRadius:5];
    [UIUtil immerse:_tableView into:self.view depth:1.5];
}

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>