cách tạo đường viền gradient của UIView?

Question

Tôi muốn làm một biên độ chênh lệch của view như hình ảnh sau:

nhưng tôi không biết làm thế nào để nó chính xác, ví dụ: những gì các màu gradient tôi nên sử dụng để làm điều đó? cách đặt chế độ xem của tôi để hiển thị đường viền như hình ảnh?

Tôi đang sử dụng đoạn mã sau để có được một biên giới:

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

Answer 1

Đây là cách bạn sẽ làm điều đó với Core Graphics. Tạo một lớp con UIView và trong của nó drawRect: tạo một gradient overlay và rằng với một hình chữ nhật nội dung đen:

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

Điều đó sẽ tạo ra một kết quả tương tự như những gì bạn đang cố gắng để đạt được.

Answer 2

này những gì tôi đã làm và nó làm việc một cách hoàn hảo

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 phiên bản của câu trả lời Christos Hadjikyriacou của

@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

Bạn có thể làm cho biên giới gradient của quan điểm và bán kính góc (nếu bạn muốn) sử dụng này--

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

điều này sẽ giúp bạn! Cảm ơn