无法在图像视图拉伸到其边界的图层上设置cornerRadius和阴影?
这让我难住了。我有一个 UIView (称之为“父级”)。该视图的最底部子视图是 UIImageView(称为“子视图”),其框架占据整个“父”边界。
我想在“父”视图上圆角,并设置阴影。我像往常一样在“parent”的 CALayer 上执行此操作:
[[parent layer] setShadowOffset:CGSizeMake(5, 5)];
[[parent layer] setShadowRadius:6];
[[parent layer] setShadowOpacity:0.4];
[[parent layer] setCornerRadius:6];
这正确显示了阴影,但没有圆角。
关键在于:
- 如果我删除“子”图像视图,或缩小它,使其不占据“父”视图的整个边界,我就能在父视图上正确获得圆角和阴影。
- 如果我保留“子”视图,但在“父”视图上设置“clipsToBounds”,我会正确地得到角点。但现在影子已经消失了。
- 在子层上设置角半径似乎也没有效果。
看起来“子”图像视图只是模糊了“父”视图上的圆角,因为它占据了整个矩形,并且基于父视图的剪切得到了角,但也掩盖了阴影。不知道为什么#3 不起作用。
我缺少什么?我是否因为盯着这个问题太久而忽略了一些显而易见的事情?
谢谢。
(令人震惊的是,标签“roundedcorners-dropshadow”已经存在。太棒了。)
This is stumping me. I have a UIView (call it "parent"). The bottommost subview of that view is a UIImageView (call it "child"), whose frame occupies the entirety of the "parent" bounds.
I want to round the corners on the "parent" view, and set a drop shadow. I do this on the CALayer
of "parent" as usual:
[[parent layer] setShadowOffset:CGSizeMake(5, 5)];
[[parent layer] setShadowRadius:6];
[[parent layer] setShadowOpacity:0.4];
[[parent layer] setCornerRadius:6];
This shows the shadow correctly, but does not round the corners.
Here's the kicker:
- If I remove the "child" image view, or shrink it so it doesn't occupy the whole bounds of the "parent" view, I get the rounded corners and shadow correctly on the parent.
- If I leave the "child" alone but set "clipsToBounds" on the "parent" view, I get the corners correctly. But now the shadow's gone.
- Setting the corner radius on the layer of the child as well seems to have no effect.
It seems like the "child" image view is just obscuring the rounded corners on the "parent" view since it takes up the whole rect, and clipping based on the parent view gets the corners but also masks off the shadow. Not sure why #3 doesn't work.
What am I missing? Have I been overlooking something obvious by staring at this too long?
Thanks.
(Shockingly, the tag "roundedcorners-dropshadow" already exists. Awesome.)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您将需要两个嵌套视图,内部视图设置圆角并剪切到边界,外部视图具有阴影(因此不剪切)。在您的情况下,内部和外部视图可能是“子”和“父”,但我猜您没有为这些视图设置正确的剪切值?
请参阅为什么 maskToBounds = YES 会阻止 CALayer 阴影?中的答案。
You will need two nested views, the inner one setting rounded corners and clipping to bound, and the outer view having the shadow (and therefore not clipping). In your case inner and outer view will probably be "child" and "parent", but I guess you didn't set the right clipping values for these views?
See the answer in Why masksToBounds = YES prevents CALayer shadow?.
通常,您必须将 ClipsToBounds 设置为圆角,但由于您想保留阴影,因此也必须将阴影的角设置为圆角。您是否尝试过使用贝塞尔路径设置阴影路径?将 ClipsToBounds/masksToBounds 保留为默认值“NO”。像这样的东西:
Normally you have to set clipsToBounds to have rounded corners, but since you want to retain the shadow you have to round the corners of the shadow as well. Have you tried setting the shadow path using a bezier path? Keep clipsToBounds/masksToBounds to the default, NO. Something like:
您是否尝试过设置子 UIImageView 的边界,使其也具有圆角?也许它不会覆盖容器视图的阴影。只是一个想法,不知道是否可行。
Have you tried setting the bounds of the child UIImageView so that it also has rounded corners? Perhaps then it wouldn't override the shadow of the container view. Just a thought, not sure if it will work.
使用 Swift 3,您可以选择以下两个代码片段之一,以便在图像视图或包含图像图层的视图上设置cornerRadius 和阴影。
#1.使用 UIView、CALayer 以及 Spring 和 Struts
#2。使用
UIView
、UIImageView
、CALayer
和自动布局这两个代码片段都会生成以下显示:
您可以找到更多在此 Github 存储库。
With Swift 3, you can choose one of the two following code snippets in order to set cornerRadius and shadow on an image view or on a view that contains an image layer.
#1. Using
UIView
,CALayer
and Spring and Struts#2. Using
UIView
,UIImageView
,CALayer
and Auto LayoutBoth code snippets generate the following display:
You can find more ways to combine images with rounded corners and shadow on this Github repo.
如果你想要 imageview 具有角半径的阴影层,更好的解决方案是将 imageview 视图作为具有 1 点边距的子视图..并且
If you want shadow layer with corner radius for imageview is that better solution put imageview a view as subview with 1 point margin.. and