IOS：如何设置UIImageView的白色边框、圆角和阴影？

Question

以下是我设置边框、阴影和圆角的代码

// set border
[self.avatarImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
[self.avatarImageView.layer setBorderWidth: 2.0];

// set shadow
[self.avatarImageView.layer setShadowOffset:CGSizeZero];
[self.avatarImageView.layer setShadowOpacity:1.0];
self.avatarImageView.clipsToBounds = NO;

// set corner
self.avatarImageView.layer.cornerRadius = 10.0;
self.avatarImageView.layer.masksToBounds = YES;

如果我只使用set border和set corner的代码，它可以正常工作，就像这样：

但是如果我添加了set corner的代码，结果会像这样（边框和角半径起作用，但阴影消失了）：

然而，如果只使用set corner的代码，它可以完美地工作。请指导我该怎么做。任何帮助都将不胜感激。

更新： 按照 @ozgur 的建议，添加两行代码到我的代码中，它会给出一个非常漂亮的视图，但是阴影会变小一点。

self.avatarImageView.layer.shouldRasterize = YES;
self.avatarImageView.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.avatarImageView.bounds cornerRadius:10].CGPath;

- Linh

---

self.view 是什么？ - Ozgur Vatansever

我复制了你的代码并运行了一下，但是图片看起来被裁剪了。你确定没有在其他地方更新masksToBounds或者clipsToBounds吗？ - Ozgur Vatansever

@ozgur 我确定在其他地方不要更新 masksToBounds 或 clipsToBounds。 - Linh

@ozgur 抱歉，我在self.view和self.avatarImageView之间感到困惑，我已经更新了我的代码和我的图片。 - Linh

@ozgur 你会发现阴影已经消失了。 - Linh

@PhanVănLinh 请尝试我的下面答案中的示例代码，看看它是否有效。 - Albert Renshaw

Answer 1

圆角需要将masksToBounds设置为YES。由于这个设置，超出边界的部分（如阴影）都会被遮挡，无法显示。如果你禁用masksToBounds以便能够显示，则圆角就无法工作，因为你禁用了masksToBounds，不能使图像裁剪成圆角。

所以，你不能在一个视图上同时实现这两个效果——你需要两个视图。

你需要创建一个与你的UIImageView相同尺寸的UIView，并将UIImageView作为其子视图。

然后，在你的UIImageView上设置masksToBounds为YES，在它的父视图上（与UIImageView具有相同尺寸的UIView）设置masksToBounds为NO，并添加相应的属性。

---

将你的代码更改为以下内容：（我没有使用xCode输入，所以可能有错别字）

UIView *avatarImageViewHolder = [[UIView alloc] initWithFrame:self.avatarImageView.frame];
avatarImageViewHolder.backgroundColor = [UIColor clearColor];
[avatarImageView.superview addSubview:avatarImageViewHolder];
avatarImageViewHolder.center = avatarImageView.center;
[avatarImageViewHolder addSubview:avatarImageView];
avatarImageView.center = CGPointMake(avatarImageViewHolder.frame.size.width/2.0f, avatarImageViewHolder.frame.size.height/2.0f);


self.avatarImageView.layer.masksToBounds = YES;
avatarImageViewHolder.layer.masksToBounds = NO;


// set avatar image corner
self.avatarImageView.layer.cornerRadius = 10.0;

// set avatar image border
[self.avatarImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
[self.avatarImageView.layer setBorderWidth: 2.0];

// set holder shadow
[avatarImageViewHolder.layer setShadowOffset:CGSizeZero];
[avatarImageViewHolder.layer setShadowOpacity:1.0];
avatarImageViewHolder.clipsToBounds = NO;

- Albert Renshaw

---

谢谢您的回答，但是当我使用您的代码时，我得到的结果就像我在帖子中发布的图片一样（圆角半径不起作用）。 - Linh

@PhanVănLinh 抱歉，我的代码有一个小拼写错误，我已经修正了，请再试一次。 - Albert Renshaw

抱歉回复晚了。现在它完美地工作了。非常感谢你 ;) - Linh

@AlbertRenshaw 不需要使用2个UIView或子视图来应用圆角和边框。 - Kanhaiya Sharma

@KanhaiyaSharma 你确定吗？如果你尝试做圆角半径，它会遮盖阴影，如果你禁用遮罩，它就不会是圆角。据我所知.. - Albert Renshaw

Answer 2

如果您不想阴影被剪裁，您应该更新 layer.shadowPath:

 self.avatarImageView.layer.shouldRasterize = YES;
 self.avatarImageView.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.avatarImageView.bounds cornerRadius:10].CGPath;

为了使这个技巧起作用，需要将clipsToBounds和他的兄弟masksToBounds设置为NO。

因此，如果您有一张大小大于avatarView自身边界的图片，您应该将avatarImageView定义为普通的UIView，创建另一个imageView来显示图片，并将其masksToBounds设置为YES，然后将其作为子视图添加到avatarImageView中，这样您就会拥有一个能够显示裁剪图像的好的带圆角和阴影的视图。

- Ozgur Vatansever

---

谢谢你的回答。我会将结果图像上传到我的问题中。我会使用你的解决方案来完成我的项目，因为它非常好看，但我仍然会保留这个问题，以找到如何使阴影变得更大的方法。 - Linh

另外，您提到让我将clipsToBounds和masksToBounds设置为NO，但是如果我将masksToBounds设置为NO，则半径不起作用。 - Linh

@PhanVănLinh 如果你想让阴影看起来更大，你应该更新阴影偏移量。 - Ozgur Vatansever

Answer 3

您需要添加一个容器视图，并将您的ImageView放在该容器视图内，完成后使用以下代码：

CALayer *imageViewLayer= self.imageView.layer;
imageViewLayer.cornerRadius= 20.0f;
imageViewLayer.masksToBounds= YES;

CALayer *containerLayer = self.containerView.layer;
containerLayer.borderColor= [UIColor whiteColor].CGColor;
containerLayer.borderWidth= 3.0f;
containerLayer.cornerRadius= 20.0f;
containerLayer.shadowOffset = CGSizeMake(0, 0);
containerLayer.shadowColor = [UIColor blackColor].CGColor;
containerLayer.shadowRadius = 10.0f;
containerLayer.shadowOpacity = 0.80f;
containerLayer.masksToBounds= NO;
containerLayer.shadowPath = [[UIBezierPath bezierPathWithRect:containerLayer.bounds] CGPath];

随意根据您的需求调整设置。享受吧！

- atulkhatri

Answer 4

在设置圆角时，您应该将self.avatarImageView.clipsToBounds = YES;设置为真。

- CHwang

---

我在set shadow中设置了self.avatarImageView.clipsToBounds = NO;。现在我应该将其更改为YES，或者需要在set corner中添加一行新的代码。此外，我尝试了上面的方法，但仍然无法正常工作。结果图像与我帖子中的第二个图像相同。 - Linh