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];
}
