问题描述
我必须创建一个自定义的 UIView
,它将有圆角、边框、阴影,并且它的 drawRect()
方法被覆盖以提供自定义绘图代码,视图中绘制了几条直线(我需要在这里使用快速、轻量级的方法,因为其中许多视图可能会被渲染).
I have to create a custom UIView
that will have round corners, a border, a shadow and its drawRect()
method is overridden to provide custom drawing code with which several straight lines are drawn into the view (I need to use a fast, lightweight approach here since many of these views may be rendered).
我目前面临的问题是,一旦我在视图类中覆盖 drawRect()
(即使没有任何自定义代码),阴影不再适用于圆角它).区别见附图:
The problem I'm currently facing is that the shadow doesn't apply anymore to the round corners as soon as I override drawRect()
in the view class (even without any custom code yet in it). See the attached image for the difference:
在视图控制器中,我使用以下代码:
In the view controller I'm using the following code:
view.layer.cornerRadius = 10;
view.layer.masksToBounds = true;
view.layer.borderColor = UIColor.grayColor().CGColor;
view.layer.borderWidth = 0.5;
view.layer.contentsScale = UIScreen.mainScreen().scale;
view.layer.shadowColor = UIColor.blackColor().CGColor;
view.layer.shadowOffset = CGSizeZero;
view.layer.shadowRadius = 5.0;
view.layer.shadowOpacity = 0.5;
view.layer.masksToBounds = false;
view.clipsToBounds = false;
在覆盖的 drawContext()
中,我会使用类似的东西:
In the overridden drawContext()
I would use something like:
var context:CGContext = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(context, 2.0);
CGContextMoveToPoint(context, 0.0, 0.0); //start at this point
CGContextAddLineToPoint(context, 20.0, 20.0); //draw to this point
CGContextStrokePath(context);
但是如上所述,即使不添加此代码也会出现阴影问题.
But as said above, the shadow problem occurs even without this code added.
除了这种与圆角和阴影兼容的方法之外,还有其他/更好的方法可以将轻量级元素绘制到视图上吗?我不想向视图添加任何不必要的额外视图或图像上下文,因为它们需要轻量级和高性能.
Is there any other/better way to draw lightweight elements onto a view other than this approach that is compatible with round corners and shadows? I don't want to add any unnecessary extra views or image contexts to the view since these need to be light and performant.
推荐答案
这是一个棘手的问题.UIView
的 clipsToBounds
是获得圆角所必需的.但是CALayer
的masksToBounds
必须是false
,所以阴影是可见的.不知何故,如果 drawRect
没有被覆盖,一切都会正常,但实际上它不应该被覆盖.
This is a tricky one. UIView
's clipsToBounds
is necessary to get the rounded corners. But CALayer
's masksToBounds
has to be false
so the shadow is visible. Somehow, everything works if drawRect
is not overridden, but actually it shouldn't.
解决方案是创建一个超级视图来提供阴影(在下面的演示中,这是shadowView
).您可以在 Playground 中测试以下内容:
The solution is to create a superview to provide the shadow (in the demonstration below this is the shadowView
). You can test the following in Playground:
class MyView : UIView {
override func drawRect(rect: CGRect) {
let c = UIGraphicsGetCurrentContext()
CGContextAddRect(c, CGRectMake(10, 10, 80, 80))
CGContextSetStrokeColorWithColor(c , UIColor.redColor().CGColor)
CGContextStrokePath(c)
}
}
let superview = UIView(frame: CGRectMake(0, 0, 200, 200))
let shadowView = UIView(frame: CGRectMake(50, 50, 100, 100))
shadowView.layer.shadowColor = UIColor.blackColor().CGColor
shadowView.layer.shadowOffset = CGSizeZero
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowRadius = 5
let view = MyView(frame: shadowView.bounds)
view.backgroundColor = UIColor.whiteColor()
view.layer.cornerRadius = 10.0
view.layer.borderColor = UIColor.grayColor().CGColor
view.layer.borderWidth = 0.5
view.clipsToBounds = true
shadowView.addSubview(view)
superview.addSubview(shadowView)
结果:
这篇关于带有阴影、圆角和自定义 drawRect 的 UIView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!