如何製作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]; 

這將幫助你！謝謝