Question

您好我想创建一个类似于（附加）图像的按钮。

这里的挑战是带有渐变色的圆角。我能够使用

创建圆角

view.layer setCornerRadius：radius; view.layer setMasksToBounds：YES;

我也可以创建单边框颜色

view.layer.borderColor = color.CGColor; view.layer.borderWidth = width;

但是渐变边框颜色需要做些什么？

我做了以下但是并不理想。我跟着这篇文章，但它没有提供渐变边框颜色。 UIButton w/ gradient, rounded corners, border, and drop shadow

任何人都可以帮助我理解，我如何为UIButton绘制渐变边框。伪代码/示例将非常有用。

Answer 1

这将线性渐变应用于圆形矩形周围的线，方法是创建一个圆形矩形，在中间切一个孔，然后用它来剪切线性渐变的填充。

class DisplayView : UIView {
    override func drawRect(var rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()

        CGContextSaveGState(context)

        // Inset the rect so we can stroke it and not be outside the button bounds
        rect = CGRectInset(rect, 4.0, 4.0)

        // Construct the the bounds
        var path = CGPathCreateWithRoundedRect(rect, rect.size.height / 2, rect.size.height / 2, nil)

        // Fill the middle with white (or other background color
        CGContextAddPath(context, path)
        CGContextSetFillColorWithColor(context, UIColor.whiteColor().CGColor)
        CGContextFillPath(context)

        // stroke the path
        path = CGPathCreateCopyByStrokingPath(path, nil, 4.0, kCGLineCapButt, kCGLineJoinBevel, 0)

        // Add the outer edge of the button frame
        CGContextAddPath(context, path)

        // Create a gradient from white to red
        let colors = [
            UIColor.yellowColor().CGColor,
            UIColor.redColor().CGColor
        ]

        // Set the round rect as the clip
        CGContextClip(context)

        // Fill the path with the radial gradient
        let baseSpace = CGColorSpaceCreateDeviceRGB();
        let gradient = CGGradientCreateWithColors(baseSpace, colors, nil);

        CGContextDrawLinearGradient(
            context,
            gradient,
            CGPoint(x:0, y:0),
            CGPoint(x:CGRectGetMaxX(rect), y:CGRectGetMaxY(rect)),
            .allZeros)

        // Fill the line
        CGContextFillPath(context)

        CGContextRestoreGState(context)
    }
}

Swift 4

class DisplayView : UIView {
    override func draw(_ rect: CGRect) {
        var rect = rect
        let context = UIGraphicsGetCurrentContext()

        context!.saveGState()

        // Inset the rect so we can stroke it and not be outside the button bounds
        rect = rect.insetBy(dx: 4.0, dy: 4.0)

        // Construct the the bounds
        var path = CGPath(roundedRect: rect,
                          cornerWidth: rect.size.width / 2,
                          cornerHeight: rect.size.height / 2,
                          transform: nil)

        // Fill the middle with white (or other background color
        context!.addPath(path)
        context?.setFillColor(UIColor.clear.cgColor)
        context?.fillPath()

        // stroke the path
        path = path.copy(strokingWithWidth: 4.0,
                         lineCap: CGLineCap.butt,
                         lineJoin: CGLineJoin.bevel,
                         miterLimit: 0)

        // Add the outer edge of the button frame
        context?.addPath(path)

        // Create a gradient from white to red
        let colors = [
            UIColor.yellow.cgColor,
            UIColor.red.cgColor
        ]

        // Set the round rect as the clip
        context?.clip()

        // Fill the path with the radial gradient
        let baseSpace = CGColorSpaceCreateDeviceRGB();
        let gradient = CGGradient(colorsSpace: baseSpace,
                                  colors: colors as CFArray,
                                  locations: nil);

        context?.drawLinearGradient(gradient!,
                                    start: CGPoint(x:0, y:0),
                                    end: CGPoint(x: rect.maxX, y: rect.maxY),
                                    options: CGGradientDrawingOptions())

        // Fill the line
        context?.fillPath()

        context?.restoreGState()
    }
}

Answer 2

我是这样做的。在我的情况下，@ loginButton绑定到一个故事板。试试这个，看看它是什么样子并调整到你需要的东西。

@property (nonatomic, retain) IBOutlet UIButton *loginButton;

- (void) viewDidLoad
{
    [super viewDidLoad];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    loginButton.clipsToBounds = YES;
    UIColor *topColor = [UIColor colorWithRed:255/255 green:255/255 blue:255/255 alpha:0.9];
    UIColor *middleColor = [UIColor colorWithRed:61.0/255 green:130.0/255 blue:244.0/255 alpha:1.0];
    UIColor *bottomColor = [UIColor colorWithRed:24.0/255 green:77.0/255 blue:214.0/255 alpha:1.0];
    gradient.colors = [NSArray arrayWithObjects:(id)topColor.CGColor,
                       (id)middleColor.CGColor, (id)bottomColor.CGColor, nil];
    gradient.locations = [NSArray arrayWithObjects:
                          [NSNumber numberWithFloat:0.0f],
                          [NSNumber numberWithFloat:0.05f],
                          [NSNumber numberWithFloat:0.7],
                          nil];
    gradient.frame = [[loginButton layer] bounds];
    gradient.cornerRadius = 4.0;
    gradient.borderWidth = 0.5;
    [loginButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [loginButton.layer insertSublayer:gradient atIndex:0]; 
    [loginButton addTarget:self action:@selector(loginTouchDown:)
            forControlEvents:UIControlEventTouchDown];
    [loginButton addTarget:self action:@selector(loginTouchUp:)
          forControlEvents:UIControlEventTouchUpOutside];

}

圆角渐变UIButton iOS

2 个答案: