Как сделать градиентную границу UIView?

Question

Я хочу, чтобы сделать градиент границы зрения, как на следующей картинке:

, но я не знаю, как это сделать точно, то есть то, что градиент цвета я должен использовать, чтобы сделать это? как настроить мой вид, чтобы показать границу, такую ​​как изображение?

Я использую следующий код, чтобы получить границу:

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

Answer 1

Вот как вы могли бы сделать это с Core Graphics. Создайте подкласс 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

Objective-C версия ответа Христоса Hadjikyriacou в

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

это поможет! Спасибо