【问题标题】:How to set a gradient border on UIView?如何在 UIView 上设置渐变边框?
【发布时间】:2012-04-17 23:50:03
【问题描述】:

UIView 上添加简单的边框非常容易。您只需链接到QuartzCore,将其导入并使用:

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

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

【问题讨论】:

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


    【解决方案1】:

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

    您不能将渐变应用到边框。但是,您可以使用自定义形状创建自己的边框。最简单的方法是创建两条路径,一条外部路径和一条内部路径。为简单起见,我们假设路径是一个简单的矩形(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()。有关详细信息,请参阅链接,但基本上它会创建一个新路径,即原始路径的描边,因此如果您填充新路径,它将创建与抚摸旧路径相同的图像。这太棒了,因为您可以剪辑到新路径,然后用渐变填充,而不是填充新路径,从而为您提供渐变边框。这比我之前提到的方法要容易得多,但当然,它只在 iOS 5.0 中可用。这也将使创建新的复杂形状变得更加容易。

    【讨论】:

    • 谢谢。完整的实现可以在gist.github.com/2423583 找到。请注意,这会绘制一个内部边框,如果其他视图位于其顶部,这可能会出现问题。
    • @shawnwall 我已经更新了我的答案。如果您使用的是 iOS 5.0,有一种更简单的方法可以创建渐变边框。
    【解决方案2】:

    我创建了第二个渐变层,阵列中的颜色反转,然后使第二层的框架比第一层略小。创建边框的外观。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-15
      相关资源
      最近更新 更多