Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IOS: How to make a shadow for UIView on 4 side (top,right,bottom and left)

Tags:

ios

uiview

I am using the code below to make the shadow for my ImageView

UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:self.avatarImageView.bounds]; self.avatarImageView.layer.masksToBounds = NO; self.avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor; self.avatarImageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f); self.avatarImageView.layer.shadowOpacity = 0.8f; self.avatarImageView.layer.shadowPath = shadowPath.CGPath; 

It will drop a shadow in the right and bottom like this image.

enter image description here

Now I want to make my ImageView also have a shadow in top and left. What should I change in code? Is possible to make the view contains shadow in top,right,bottom,left by config in code only or I need to create other layout view for shadow? Any help would be great appreciated.

Here is what I want to achieve
enter image description here

Update
Thank @Dipen Panchasara for give a simple solution. Follow @Dipen Panchasara (with the shadow color is black) I will have the shadow image like this
enter image description here

like image 226
Linh Avatar asked Mar 23 '16 08:03

Linh


People also ask

What is shadow offSet?

ShadowOffset is a CGSize representing how far to offset the shadow from the path. The default value of this property is (0.0, -3.0).

How do I add a shadow to a UIView?

Adding a shadow to a UIView can be implemented by setting the shadowColor, shadowOpacity, shadowOffset, and shadowRadius properties on the view’s layer: An @IBDesignable UIView extension marking the shadow properties as @IBInspectable can be implemented to allow view shadows to be configured in a Storyboard:

How do I add a shadow to a view in Java?

To add a shadow to our new view, we need to add the following lines of code to our newView () method just below the view.backgroundColor = .blue: view. layer. shadowOffset = CGSize( width: 10, height: 10) view. layer. shadowRadius = 5 view. layer. shadowOpacity = 0.3

How do I round the edges of a UIView?

UIImageView Shadows With Content Mode [Aspect Fill, Center, etc] Rounding all corners on a UIView can be implemented by setting the cornerRadius property on the view’s layer: Sometimes rounding on only certain corners of a view is desirable.

How do I set the shadow of a view in storyboard?

An @IBDesignable UIView extension marking the shadow properties as @IBInspectable can be implemented to allow view shadows to be configured in a Storyboard: By implementing the @IBDesignable UIView extension and applying the @IBInspectable modifier to the shadow properties, a view’s shadow to be set in a Storyboard’s Attributes Inspector:


2 Answers

Only following code will do the job for your requirement, You don't need to create UIBezierPath for shadow path.

// *** Set masks bounds to NO to display shadow visible *** self.avatarImageView.layer.masksToBounds = NO; // *** Set light gray color as shown in sample *** self.avatarImageView.layer.shadowColor = [UIColor lightGrayColor].CGColor; // *** *** Use following to add Shadow top, left *** self.avatarImageView.layer.shadowOffset = CGSizeMake(-5.0f, -5.0f);  // *** Use following to add Shadow bottom, right *** //self.avatarImageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);  // *** Use following to add Shadow top, left, bottom, right *** // avatarImageView.layer.shadowOffset = CGSizeZero; // avatarImageView.layer.shadowRadius = 5.0f;  // *** Set shadowOpacity to full (1) *** self.avatarImageView.layer.shadowOpacity = 1.0f; 
like image 60
Dipen Panchasara Avatar answered Sep 20 '22 17:09

Dipen Panchasara


Like this:

float shadowSize = 10.0f; UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(self.avatarImageView.frame.origin.x - shadowSize / 2,                                                                        self.avatarImageView.frame.origin.y - shadowSize / 2,                                                                        self.avatarImageView.frame.size.width + shadowSize,                                                                        self.avatarImageView.frame.size.height + shadowSize)]; self.avatarImageView.layer.masksToBounds = NO; self.avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor; self.avatarImageView.layer.shadowOffset = CGSizeMake(0.0f, 0.0f); self.avatarImageView.layer.shadowOpacity = 0.8f; self.avatarImageView.layer.shadowPath = shadowPath.CGPath; 

Swift 3 version:

    let shadowSize : CGFloat = 5.0     let shadowPath = UIBezierPath(rect: CGRect(x: -shadowSize / 2,                                                y: -shadowSize / 2,                                                width: self.avatarImageView.frame.size.width + shadowSize,                                                height: self.avatarImageView.frame.size.height + shadowSize))     self.avatarImageView.layer.masksToBounds = false     self.avatarImageView.layer.shadowColor = UIColor.black.cgColor     self.avatarImageView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)     self.avatarImageView.layer.shadowOpacity = 0.5     self.avatarImageView.layer.shadowPath = shadowPath.cgPath 
like image 34
gvuksic Avatar answered Sep 19 '22 17:09

gvuksic