如何使UIView的渐变边框？

我想要制作一个如下图所示的渐变边框：

但我不知道它是如何做到这一点，即我应该用什么梯度颜色来做到这一点？ 如何设置我的视图来显示像图像的边框？

我正在使用下面的代码来获得一个边框：

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

Answer 1

这是我做的，它完美的工作

  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 2

你可以使用这个渐变边框的视图和angular落半径（如果你想）

 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]; 

这将帮助你！ 谢谢

Answer 3

这里是你如何使用Core Graphics来做到这一点。 创build一个UIView子类，在它的drawRect:创build一个带黑色内容矩形的渐变和覆盖：

 - (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 4

Christos Hadjikyriacou的答案的客观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