如何使用CALayer创建渐变边框

Question

我一直在尝试使用CAGradientLayer来制作这个。

最初，我尝试使用.colors属性来设置渐变背景，但这只是一个背景填充。尝试此方法时，我尝试添加另一个具有黑色背景的CALayer，但我无法正确设置半径，并且它会在圆角处创建各种厚度的线条。

是否有更好的方法来创建带渐变的圆角矩形边框？ CALayer不能实现这一点，我应该转移到UIBezierPath或CGContextRef吗？

UIView *view = [[UIView alloc]initWithFrame:CGRectMake(12*twelthWidth - squareCentre.x - squareSize.width, squareCentre.y, squareSize.width, squareSize.height)];
       // Create the rounded layer, and mask it using the rounded mask layer
        CAGradientLayer *roundedLayer = [CAGradientLayer layer];
        [roundedLayer setFrame:view.bounds];
        roundedLayer.cornerRadius = view.bounds.size.width/5;
        roundedLayer.masksToBounds = YES;
        roundedLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor], (id)[[UIColor blueColor] CGColor], nil];
        roundedLayer.borderWidth = 4;
        roundedLayer.borderColor = [UIColor clearColor].CGColor;

        // Add these two layers as sublayers to the view

        int BorderWidth = 5;

        CALayer *solidColour = [CALayer layer];
        solidColour.cornerRadius = view.bounds.size.width/5;
        solidColour.masksToBounds = YES;
        solidColour.backgroundColor = [UIColor blackColor].CGColor;
        [solidColour setFrame:CGRectMake(BorderWidth, BorderWidth, roundedLayer.bounds.size.width - 2*BorderWidth, roundedLayer.bounds.size.height - 2*BorderWidth)];


        [view.layer insertSublayer:roundedLayer atIndex:0];
        [view.layer insertSublayer:solidColour above:roundedLayer];
        [self.view addSubview:view];

生成的效果如下图所示:

其中角部不是直角。是否需要为第二层计算不同的半径?

编辑

将实色的半径设置为solidColour.bounds.size.width/5后，仍然不正确 - 角部太细了。

- Rambatino

---

展示你尝试过的代码和最接近实现的截图。 - Wain

好的，我现在就开始翻译。 - Rambatino

@Wain，代码已添加。 - Rambatino

设置框架后，您是否尝试将角半径设置为 solidColour.bounds.size.width/5？ - Wain

@Wain，看起来好多了，但是在角落处太细了。 - Rambatino

有没有更简单的方法创建一个渐变边框？ - Rambatino

Answer 1

你看到的问题是由于内角和外角半径相同导致的。这就是导致线条粗细变化的原因。这来自CSS-Tricks的插图突出了这个问题（即使你不使用CSS，问题仍然存在）。

解决方案是计算内半径为：

innerRadis = outerRadius - lineThickness

如 Joshua Hibbert所示：

- David Rönnqvist

Answer 2

如果您使用Swift，这只是为了方便您

    let v = yourUIVIEW
    let outerRadius:CGFloat = 60
    let borderWidth:CGFloat = 8;

    let roundedLayer = CAGradientLayer()
    roundedLayer.frame =  v.bounds
    roundedLayer.cornerRadius = outerRadius
    roundedLayer.masksToBounds = true

    roundedLayer.endPoint = CGPoint(x: 1 , y: 0.5)


    roundedLayer.colors = [ UIColor.redColor().CGColor, UIColor.blueColor()!.CGColor]


    let innerRadius = outerRadius - borderWidth
    //Solid layer
    let solidLayer = CALayer()

    solidLayer.masksToBounds = true
    solidLayer.backgroundColor = UIColor.whiteColor().CGColor
    solidLayer.cornerRadius = innerRadius
    solidLayer.frame = CGRect(x: borderWidth, y: borderWidth, width: roundedLayer.bounds.width - 2*borderWidth, height:roundedLayer.bounds.height - 2*borderWidth )


    v.layer.insertSublayer(roundedLayer, atIndex: 0)
    v.layer.insertSublayer(solidLayer, above: roundedLayer)

- Pak

Answer 3

不要使用视图边界来设置实心图层的cornerRadius，而是在将其设置为正确的插入值后，使用图层的框架值：

solidColour.masksToBounds = YES;
solidColour.backgroundColor = [UIColor blackColor].CGColor;
[solidColour setFrame:CGRectMake(BorderWidth, BorderWidth, roundedLayer.bounds.size.width - 2*BorderWidth, roundedLayer.bounds.size.height - 2*BorderWidth)];
solidColour.cornerRadius = solidColour.frame.size.width/5;
[view.layer insertSublayer:roundedLayer atIndex:0];
[view.layer insertSublayer:solidColour above:roundedLayer];

使用这个代码，我得到了以下图片

- Rich Tolley