IOS:如何在4面(顶部,右侧,底部和左侧)为UIView制作阴影

时间:2022-08-22 11:38:07

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

我正在使用下面的代码为我的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.

它将像这个图像一样在右侧和底部投下阴影。

IOS:如何在4面(顶部,右侧,底部和左侧)为UIView制作阴影

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.

现在我想让我的ImageView在顶部和左侧也有一个阴影。我应该在代码中更改什么?是否可以使视图在顶部,右侧,底部,左侧仅包含在代码中的阴影,或者我需要为阴影创建其他布局视图?任何帮助将非常感谢。

Here is what I want to achieve
IOS:如何在4面(顶部,右侧,底部和左侧)为UIView制作阴影

这就是我想要实现的目标

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
IOS:如何在4面(顶部,右侧,底部和左侧)为UIView制作阴影

更新感谢@Dipen Panchasara提供简单的解决方案。关注@Dipen Panchasara(阴影颜色为黑色)我将拥有这样的阴影图像

6 个解决方案

#1


25  

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:

Swift 3版本:

    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

#2


26  

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

只有以下代码才能满足您的要求,您无需为阴影路径创建UIBezierPath。

// *** 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;

#3


1  

Little less code for swift 3:

swift 3的代码少了一点:

    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOpacity = 0.7
    view.layer.shadowOffset = CGSize.zero
    view.layer.shadowRadius = 4
    view.layer.shadowPath = UIBezierPath(rect: planView.bounds).cgPath

#4


0  

CGRectInset(self.avatarImageView.bounds, -10.0, -10.0)

CGRectInset(self.avatarImageView.bounds,-10.0,-10.0)

#5


0  

For UIView and Adding shadow, remember to set background color to the UIView.

对于UIView和添加阴影,请记住将背景颜色设置为UIView。

If the background color is clearColor, no shadow appears.

如果背景颜色为clearColor,则不显示阴影。

#6


0  

//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.

//如果您以前尝试过这个,那么您确切知道会发生什么。角落将变圆,但阴影将会丢失。如果将masksToBounds设置为false,则会出现阴影,但角落不会被舍入。 //获取具有圆角半径的阴影为具有清晰颜色的容器视图添加超视图并为超视图应用阴影,为容器视图应用角半径。尝试一下。

   //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

#1


25  

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:

Swift 3版本:

    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

#2


26  

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

只有以下代码才能满足您的要求,您无需为阴影路径创建UIBezierPath。

// *** 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;

#3


1  

Little less code for swift 3:

swift 3的代码少了一点:

    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOpacity = 0.7
    view.layer.shadowOffset = CGSize.zero
    view.layer.shadowRadius = 4
    view.layer.shadowPath = UIBezierPath(rect: planView.bounds).cgPath

#4


0  

CGRectInset(self.avatarImageView.bounds, -10.0, -10.0)

CGRectInset(self.avatarImageView.bounds,-10.0,-10.0)

#5


0  

For UIView and Adding shadow, remember to set background color to the UIView.

对于UIView和添加阴影,请记住将背景颜色设置为UIView。

If the background color is clearColor, no shadow appears.

如果背景颜色为clearColor,则不显示阴影。

#6


0  

//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.

//如果您以前尝试过这个,那么您确切知道会发生什么。角落将变圆,但阴影将会丢失。如果将masksToBounds设置为false,则会出现阴影,但角落不会被舍入。 //获取具有圆角半径的阴影为具有清晰颜色的容器视图添加超视图并为超视图应用阴影,为容器视图应用角半径。尝试一下。

   //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