如何制作UIView的渐变边框？

Question

我想要的视图，如下面的图片渐变边框：

，但我不知道如何做到这一点究竟，即什么样的渐变颜色我应该用做呢？如何设置我的视图以显示图像等边框？

我用下面的代码来获得一个边界：

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

Answer 1

这里是你如何与核芯显卡做到这一点。创建UIView子类，并在其drawRect:创建渐变和覆盖与黑色矩形内容：

- (void)drawRect:(CGRect)rect 
{ 
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 

    // Create and draw the gradient 
    UIColor *gradientColorTop = [UIColor orangeColor]; 
    UIColor *gradientColorBottom = [UIColor yellowColor]; 
    NSArray *gradientColors = @[(id) gradientColorTop.CGColor, (id) gradientColorBottom.CGColor]; 
    CGFloat locations[] = {0.1, 0.80}; 

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)(gradientColors), locations); 

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect)); 
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect)); 

    UIBezierPath *gradientBorder = [UIBezierPath bezierPathWithRoundedRect:rect 
    byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10.0, 10.0)]; 
    [gradientBorder addClip]; 

    CGContextDrawLinearGradient(ctx, gradient, startPoint, endPoint, 0); 

    // Draw the inner content rectangle 
    UIBezierPath *contentPath = [UIBezierPath bezierPathWithRect:CGRectInset(rect, 20.0, 20.0)]; 
    [[UIColor blackColor] setFill]; 
    [contentPath fill]; 

    CGGradientRelease(gradient); 
    CGColorSpaceRelease(colorSpace); 
} 

这将产生类似于你想达到什么样的结果。

Answer 2

这是我没有和它使用的工作完美

extension CALayer { 
    func addGradienBorder(colors:[UIColor],width:CGFloat = 1) { 
     let gradientLayer = CAGradientLayer() 
     gradientLayer.frame = CGRect(origin: CGPointZero, size: self.bounds.size) 
     gradientLayer.startPoint = CGPointMake(0.0, 0.5) 
     gradientLayer.endPoint = CGPointMake(1.0, 0.5) 
     gradientLayer.colors = colors.map({$0.CGColor}) 

     let shapeLayer = CAShapeLayer() 
     shapeLayer.lineWidth = width 
     shapeLayer.path = UIBezierPath(rect: self.bounds).CGPath 
     shapeLayer.fillColor = nil 
     shapeLayer.strokeColor = UIColor.blackColor().CGColor 
     gradientLayer.mask = shapeLayer 

     self.addSublayer(gradientLayer) 
    } 

} 

Answer 3

克里斯托Hadjikyriacou的答案的Objective-C的版本

@implementation CALayer(Border) 

-(void) addGradientBorder { 

CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init]; 
gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height); 
gradientLayer.startPoint = CGPointMake(0.0, 0.5); 
gradientLayer.endPoint = CGPointMake(1.0, 0.5); 
gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor]; 

CAShapeLayer *shapeLayer =[[CAShapeLayer alloc] init]; 
shapeLayer.lineWidth = 0.5; 
shapeLayer.path = [UIBezierPath bezierPathWithRect:self.bounds].CGPath; 
shapeLayer.fillColor = nil; 
shapeLayer.strokeColor = [UIColor blackColor].CGColor; 
gradientLayer.mask = shapeLayer; 
[self addSublayer : gradientLayer]; 
} 
@end 

Answer 4

您可以视和圆角半径（如果你想）梯度边界这 -

self.yourView.layer.cornerRadius=4; 

self.yourView.layer.masksToBounds=YES; 

CAGradientLayer *gradient = [CAGradientLayer layer]; 

gradient.frame = self.yourView.bounds; 

gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:255/255.0 green:226/255.0 blue:138/255.0 alpha:1.0] CGColor], (id)[[UIColor colorWithRed:255/255.0 green:198/255.0 blue:91/255.0 alpha:0.9] CGColor],(id)[[UIColor colorWithRed:255/255.0 green:226/255.0 blue:138/255.0 alpha:1.0] CGColor], nil]; 

gradient.startPoint = CGPointMake(0.0, 0.0); 

gradient.endPoint = CGPointMake(1, 1); 

CAShapeLayer *shapeLayer =[[CAShapeLayer alloc] init]; 

shapeLayer.lineWidth = 15; // higher number higher border width 

shapeLayer.path = [UIBezierPath bezierPathWithRect:self.yourView.bounds].CGPath; 

shapeLayer.fillColor = nil; 

shapeLayer.strokeColor = [UIColor blackColor].CGColor; 

gradient.mask = shapeLayer; 

[self.yourView.layer insertSublayer:gradient atIndex:0]; 

这将帮助你！谢谢