如何在UIView上设置渐变边框?

时间:2012-04-17 23:50:04

标签: ios uiview core-graphics quartz-2d

UIView上放置一个简单的边框非常容易。您只需链接到QuartzCore,导入它,然后使用:

self.view.layer.borderColor = [UIColor redColor].CGColor;
self.view.layer.borderWidth = 2.0f;

我的问题是......有没有办法让这个边框使用渐变。我知道如何将渐变蒙版应用于整个视图,而不仅仅是边框。我假设这可能涉及CoreGraphics内的自定义视图和drawRect:绘图,但我不知道从哪里开始。

2 个答案:

答案 0 :(得分:5)

我不完全确定“渐变”是什么意思。既然你已经说过你已经使用了核心图形来对形状应用渐变,那么我会假设你的意思是(而不是前一个答案所指的阴影)。

您无法将渐变应用于边框。但是,您可以使用自定义形状创建自己的边框。最简单的方法是创建两个路径,一个外部路径和一个内部路径。为简单起见,我们假设路径是一个简单的矩形(drawRect中给出的矩形):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];

第二条路径将是一条小于第一条路径的内部路径(足以构成边框):

//To create a 1.0f borderWidth
CGRect innerRect = rect;
innerRect.origin.x += 1.0f;
innerRect.origin.y += 1.0f;
innerRect.size.width -= 2.0f;
innerRect.size.height -= 2.0f;
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRect:innerRect];

现在,将内部路径附加到正常路径,并确保路径使用evenOddFillRule。 evenOddFillRule将告诉核心图形仅填充外部部分,留下内部部分。哦,你会想要剪辑到路径:

[path appendPath:innerPath];
path.usesEvenOddFillRule = YES;
[path addClip];

如果对此形状应用渐变,它将填充内部路径外部和外部路径内部,从而形成带渐变的边框。

<强> 更新

如果您的目标是iOS 5.0,则可能有更好的方法。我发现了一个名为CGPathCreateCopyByStrokingPath()的非凡的新路径函数。请参阅链接了解详细信息,但基本上它会创建一个新路径,即原始的stoke,因此,如果填充新路径,它将创建与抚摸旧路径相同的图像。这很棒,因为您可以剪切到它然后填充渐变,而不是填充新路径,为您提供渐变边框。这比我之前提到的方法容易得多,但当然,它仅适用于iOS 5.0。这也将使创建新的复杂形状变得更加容易。

答案 1 :(得分:0)

我创建了第二个渐变图层,其颜色在数组中反转,然后使第二个图层的框架略小于第一个图层。创建边框的外观。