带有阴影，圆角和自定义drawRect的UIView [英] UIView with shadow, rounded corners and custom drawRect

问题描述

我必须创建一个自定义UIView，该自定义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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！