How to make book cover shadow like below - ios

i need right left and bottom shadow on UIImageView not below tried below code for shadow but not working as expected
viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
viewCheck.layer.shadowOpacity = 0.9f;
viewCheck.layer.masksToBounds = NO;
UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);
UIBezierPath *shadowPath = [UIBezierPath
bezierPathWithRect:UIEdgeInsetsInsetRect(viewCheck.bounds, shadowInsets)];
viewCheck.layer.shadowPath = shadowPath.CGPath;

Related

How to get Shadow on UIView as from Top side Only ? [ Objective-c ]

I want shadow on UIView From Top side only as shown in image below.
I am trying this code to apply shadow , but shadow is applied on right side of view but i want it from top side.
UIEdgeInsets contentInsets = UIEdgeInsetsMake(10, 0, 0, 0);
CGRect shadowPath = UIEdgeInsetsInsetRect(self.dealMainContentView.bounds, contentInsets);
self.dealMainContentView.layer.shadowPath = [UIBezierPath bezierPathWithRect:shadowPath].CGPath;
self.dealMainContentView.layer.shadowColor = [[UIColor blackColor] CGColor];
self.dealMainContentView.layer.shadowOffset = CGSizeMake(0.0f,0.0f);
self.dealMainContentView.layer.shadowOpacity = 0.4f;
self.dealMainContentView.layer.masksToBounds=NO;
This how it should look like
I solved this with own , i was able to get the desired shadow by modifying the frame before making Path .
just the hack :)
Instead of passing view.frame in this method i modified the frame
UIEdgeInsetsInsetRect(viewFrame, contentInsets); and got shadow from top side .
this is the code below
UIEdgeInsets contentInsets = UIEdgeInsetsMake(-10, -10, 0, 0);
CGRect viewFrame=self.dealMainContentView.frame;
viewFrame.origin.x += 5; // 5 distance from left
viewFrame.origin.y -= 15;
viewFrame.size.width -= 1o; // 5 distance from Right
viewFrame.size.height -= 20;
CGRect shadowPathExcludingTop = UIEdgeInsetsInsetRect(viewFrame, contentInsets);
self.dealMainContentView.layer.shadowPath = [UIBezierPath bezierPathWithRect:shadowPathExcludingTop].CGPath;
self.dealMainContentView.layer.shadowColor = [[UIColor blackColor] CGColor];
self.dealMainContentView.layer.shadowOffset = CGSizeMake(0.0,0.0f);
self.dealMainContentView.layer.shadowOpacity = 0.3f;
self.dealMainContentView.layer.masksToBounds=NO;

Rounded circle with text and color using CAShapeLayer

I want circle the corner based on percentage.
For Example if rating is 3 out of 10 .I want to circle the corner radius with one color and remaining with other color.
Below is my code:
UIView *mainView = [[UIView alloc]initWithFrame:CGRectMake(170, 5, 50, 50)];
[mainView setBackgroundColor:[UIColor whiteColor]];
[viewAwesome addSubview:mainView];
mainView.layer.cornerRadius = mainView.frame.size.width / 2;
mainView.clipsToBounds = YES;
mainView.layer.rasterizationScale = [UIScreen mainScreen].scale;
mainView.layer.shouldRasterize = YES;
UILabel *lblRatingVal = [[UILabel alloc]initWithFrame:CGRectMake(170, 5, 50, 50)];
lblRatingVal.text = [NSString stringWithFormat:#" %#",[dictRelevance valueForKey:#"avg_rating"]];
lblRatingVal.textColor = [UIColor colorWithRed:59.0/255.0 green:59.0/255.0 blue:59.0/255.0 alpha:1.0f];
lblRatingVal.font = [UIFont fontWithName:#"HelveticaNeueLight" size:6.0] ;
lblRatingVal.textAlignment = NSTextAlignmentCenter;
[viewAwesome addSubview:lblRatingVal];
CAShapeLayer *circleLayerRating = [CAShapeLayer layer];
circleLayerRating.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)].CGPath;
circleLayerRating.fillColor = nil;
circleLayerRating.strokeColor = [UIColor redColor].CGColor;
circleLayerRating.strokeEnd = val;
circleLayerRating.lineWidth = 5;
[mainView.layer addSublayer:circleLayerRating];
I want to circle remaining with blue color.Any Help?
Maybe you could use https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIBezierPath_class/index.html#//apple_ref/occ/clm/UIBezierPath/bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:
for drawing the circles. draw the blue circle first with 0-2π und the red on top.

How to add a shadow to CALayer that is masked to custom content

I'm trying to add a shadow to a masked UIView (from a UIImage), but I believe because the view is masked to bounds, masksToBounds = YES the shadow isn't showing.
If this is indeed the case, how then can I accomplish drawing a shadow around a masked image?
-(UIView *)modifyViewWithMask:(UIView *)view
{
view.alpha = 0.5;
UIView *blackView = [[UIView alloc] initWithFrame:view.bounds];
blackView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
blackView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3];
[view addSubview:blackView];
UIImage* bubbleImage = [UIImage imageNamed:#"Bubble"];
CALayer* mask = [CALayer layer];
mask.contents = (id)[bubbleImage CGImage];
mask.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);
view.layer.mask = mask;
view.layer.masksToBounds = YES;
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(10, 10);
view.layer.shadowRadius = 10;
view.layer.shadowOpacity = 1;
}

SuperView becomes null after adding sublayers but the image is still visible

I am using MKNetwrkKit. I have an imageView, I have added it as a subView to a UIView. I download an image using "UIImageView+MKNetworkKitAdditions.h". I add a mask to the ImageView and remove it from superView, before the download is completed, and I get a crash!
- (void) testUIImageViewDownloadCrash {
UIImageView *imageView = [[UIImageView alloc] init];
[imageView mk_setImageAtURL:[NSURL URLWithString:#"http://www.gravatar.com/avatar/a717291747c76567bb0f086e15ae6e43?s=32&d=identicon&r=PG"] onCompletion:^(BOOL success, BOOL fromCache) {
//
}];
UIView *view = [[UIView alloc] init];
[view addSubview:imageView];
[self addMaskToImageView:imageView];
[imageView removeFromSuperview];
}
Now, the weird thing is, this crash occurs only when I add the mask... here is the function that adds the mask.
- (CAGradientLayer*) addMaskToImageView:(UIImageView *) inImageView
{
CALayer *imageLayer = inImageView.layer;
CGRect imageBounds = imageLayer.bounds;
CGRect ellipseRect = CGRectInset(imageBounds, 4, 4);
CGPathRef maskPath = CGPathCreateWithEllipseInRect(ellipseRect, NULL);
if (maskPath)
{
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.bounds = imageBounds;
maskLayer.position = (CGPoint){CGRectGetMidX(imageBounds), CGRectGetMidY(imageBounds)};
maskLayer.path = maskPath;
maskLayer.fillColor = [UIColor blackColor].CGColor;
imageLayer.mask = maskLayer;
CFRelease(maskPath);
}
CAGradientLayer *gradientRingLayer = [self createGradientRing:imageBounds];
CALayer *containerLayer = [CALayer layer];
[imageLayer.superlayer addSublayer:containerLayer];
// Move container layer to the image position
containerLayer.position = imageLayer.position;
// Image is now at 0,0 in the container
imageLayer.position = CGPointZero;
[containerLayer addSublayer:gradientRingLayer];
[containerLayer addSublayer:imageLayer];
layer.shouldRasterize = YES;
layer.rasterizationScale = [[UIScreen mainScreen] scale];
layer.contentsScale = [[UIScreen mainScreen] scale];
containerLayer.shadowColor = [UIColor blackColor].CGColor;
containerLayer.shadowOpacity = 1.0f;
containerLayer.shadowOffset = CGSizeMake(2.0f, 5.0f);
containerLayer.shadowRadius = 7.5f;
// Create shadow at the righ place around the image
CGPathRef containerShadowPath = CGPathCreateWithEllipseInRect(imageLayer.frame, NULL);
containerLayer.shadowPath = containerShadowPath;
CFRelease(containerShadowPath);
return gradientRingLayer;
}
- (CAGradientLayer*)createGradientRing:(CGRect)inBounds {
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.anchorPoint = CGPointMake(0.5f, 0.5f);
gradient.position = CGPointMake(0.0f, 0.0f);
// gradient.startPoint = CGPointMake(0.0,0.0);
// gradient.endPoint = CGPointMake(0.0,0.0);
gradient.bounds = inBounds;
gradient.cornerRadius = 0.0;
gradient.colors = [NSArray arrayWithObjects:
(id)[UIColor ringLight].CGColor,
(id)[UIColor ringLight].CGColor,
nil];
CAShapeLayer *frameLayer = [CAShapeLayer layer];
CGPathRef framePath = CGPathCreateWithEllipseInRect(CGRectInset(inBounds, 0, 0), NULL);
if (framePath)
{
frameLayer.bounds = inBounds;
frameLayer.position = (CGPoint){CGRectGetMidX(inBounds), CGRectGetMidY(inBounds)};
frameLayer.path = framePath;
frameLayer.fillColor = [UIColor blackColor].CGColor;
CFRelease(framePath);
}
gradient.mask = frameLayer;
return gradient;
}
If I comment out adding the mask, it won't crash. Another thing that I don't understand is, after adding the mask, if do this:
NSLog(#"subviews count : %i",[view.subviews count]);
then I get 0! Where did the imageView go?
I observed that the addMask function is making a superView of the imageView null. I found out that the line [containerLayer addSublayer:imageLayer]; is the culprit. This is making the superView of the imageView null. But why? And how can I fix it?
Sometimes I get this exception too, and I don't know why.
-[__NSCFString sublayers]: unrecognized selector sent to instance
I tried on iOS 5 and iOS 6.

UIView Round Corners with Shadow

I am trying to display a UIView with round corners and with a drop shadow. But the problem is that maskToBounds property only works for either of the case.
If maskToBounds is YES then round corners show up and when NO then shadow shows up. Here is the implementation but it only displays round corners with no shadow:
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"blue_gradient.jpeg"]]];
self.view.layer.masksToBounds = YES;
self.view.layer.opaque = NO;
self.view.layer.cornerRadius = 15.0f;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 5.0;
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
ideas!
NOTE: I have read and implemented the code in the following thread but it does not work:
UIView with rounded corners and drop shadow?
UPDATE 1:
I tried to create two separate views. One will represent the radius and one will represent the shadow. The problem is that is creates the shadow on top of the radius view as shown in the screenshot below:
H
ere is the code:
self.view.layer.masksToBounds = YES;
self.view.layer.opaque = NO;
self.view.layer.cornerRadius = 15.0f;
// self.view.backgroundColor = [UIColor clearColor];
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"blue_gradient.jpeg"]];
//
UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 2.0;
shadowView.backgroundColor = [UIColor clearColor];
shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
shadowView.layer.shadowOpacity = 0.9f;
shadowView.layer.shadowPath = [UIBezierPath
bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:shadowView];
UPDATE 2:
Inverted still does not work. No round corners are created.
UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
roundCornerView.layer.masksToBounds = YES;
roundCornerView.layer.opaque = NO;
roundCornerView.layer.cornerRadius = 15.0f;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 2.0;
//self.view.backgroundColor = [UIColor clearColor];
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
self.view.layer.shadowPath = [UIBezierPath
bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:roundCornerView];
SOLUTION:
UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
roundCornerView.layer.masksToBounds = YES;
roundCornerView.layer.opaque = NO;
roundCornerView.layer.cornerRadius = 15.0f;
roundCornerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"blue_gradient.jpeg"]];
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 2.0;
self.view.backgroundColor = [UIColor clearColor];
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
//self.view.layer.shadowPath = [UIBezierPath
// bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:roundCornerView];
Create two views.
one with the drop shadow (and don't forget to set the shadowPath)
in which you add a subview with cornerRadius and maskToBounds.
The accepted answer didn't include any code, so here is an example in Swift (See the original question for the OP's solution in Obj-C).
Like the accepted answer, this solution uses separate views for the shadow and the corner radius.
// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0
// improve performance
baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale
// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)
// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)
My full answer is here.
You can do it with a single view by applying following:
1. Firstly add a corner radius
yourview.layer.cornerRadius = 5.0
2. Call a function below
shadowToView(view : yourview)
func shadowToView(view : UIView){
view.layer.shadowOffset = CGSize(width: 0, height: 3)
view.layer.shadowOpacity = 0.6
view.layer.shadowRadius = 3.0
view.layer.shadowColor = UIColor.darkGray.cgColor
}

Resources