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

user_5381331 0
Viewed 48716

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

uiview ios
11 Answers

Without using UIBezierPath, CGSize.zero is the key here

yourView.layer.masksToBounds = false
yourView?.layer.shadowColor = UIColor.red.cgColor
yourView?.layer.shadowOffset =  CGSize.zero
yourView?.layer.shadowOpacity = 0.5
yourView?.layer.shadowRadius = 4

enter image description here

user_22326540

The best solution for shadow with a rounded corner on the same view and no need to do clipsToBounds or maskToBounds

func addShadow(cornerRadius: CGFloat, maskedCorners: CACornerMask, color: UIColor, offset: CGSize, opacity: Float, shadowRadius: CGFloat) {
        self.layer.cornerRadius = cornerRadius
        self.layer.maskedCorners = maskedCorners
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOffset = offset
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = shadowRadius
    }
user_94147770

If you are still not getting proper shadow, the problem might be the place you added the code. You should call this in viewDidLayoutSubviews when you use UIBezierPath. If you call in ViewDidLoad, you may get wrong result since the views layout process might be unfinished.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    //Shadow code here
}
user_15225840

//If you’ve tried this before, you know exactly what happens. The corners will be rounded, but the shadow will be missing. If you set masksToBounds to false, the shadow will appear, but the corners will not be rounded. //to get Shadow with corner radius Add super view for container view with clear color and apply shadow for super view ,Apply corner radius for container View. try it.

   //view to apply shadow and corner radius
    containerView.layer.cornerRadius = 3
    containerView.clipsToBounds = true
    //superview of container View for to apply shadow 
    shadowView.layer.shadowOpacity = 0.1
    shadowView.layer.shadowRadius = 2.0
    shadowView.layer.masksToBounds = false
    shadowView.layer.shadowOffset = CGSize.zero

    shadowView.layer.shadowColor = UIColor.Black.cgColor

    shadowView.layer.shadowPath = UIBezierPath(roundedRect:containerView.bounds, cornerRadius: containerView.layer.cornerRadius).cgPath
    shadowView.layer.shouldRasterize = true
user_76342340 
**in swift 4**

  yourView.clipsToBounds = true
    yourView.layer.cornerRadius = 20
    yourView.layer.shadowPath = UIBezierPath(roundedRect: self.yourView.bounds,
                     cornerRadius: self.DeletConversation.layer.cornerRadius).cgPath
    yourView.layer.shadowColor = UIColor(hexString: "color")?.cgColor
    DeletConversation.layer.shadowOpacity = 1
    DeletConversation.layer.shadowOffset = CGSize(width: 0, height: 1.0)
    DeletConversation.layer.shadowRadius = 1
    DeletConversation.layer.masksToBounds = false
user_106666590

There is a very detailed explanation about this here: https://www.hackingwithswift.com/example-code/uikit/how-to-add-a-shadow-to-a-uiview.

If someone is straggling with no top shadow in a collection view then this may help:

I know that this may be obvious for some people, but if you have a CollectionView with header and cell, make sure that you have space between the header and the cell, otherwise, the top shadow of the cell will be blocked by the header.

To add space, just use the insetsForSectionAt section.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 5, left: 0, bottom: 5, right: 0)

}
user_31851080
Related