Wie erstellt man einen Gradientenrahmen von UIView?

Question

Ich möchte einen Gradienten Grenze Blick wie das folgende Bild machen:

aber ich weiß nicht, wie es genau, das heißt, was die Steigung Farbe, die ich sollte es tun verwenden? Wie stelle ich meine Ansicht so ein, dass ein Rahmen wie das Bild angezeigt wird?

Ich verwende den folgenden Code, um eine Grenze zu bekommen:

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

Answer 1

Hier ist, wie Sie es mit Core Graphics tun würde. Erstellen Sie eine UIView-Unterklasse und in seinem drawRect: einen Gradienten erstellen und überlagern, dass mit einem schwarzen Rechteck Inhalt:

- (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); 
} 

, die ein Ergebnis erzeugen würde, ähnlich dem, was Sie erreichen wollen.

Answer 2

Das, was ich tat und es funktionierte perfekt

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 Version von Christos Hadjikyriacou Antwort

@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

Sie Gradienten Grenze Sichtweisen und Eckenradius machen können (wenn Sie möchten) mit this--

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

das wird Ihnen helfen! Danke