圆角渐变 UIButton iOS

Posted 2023-03-16

【中文标题】圆角渐变 UIButton iOS

【英文标题】：Round corner Gradient UIButton iOS

【发布时间】：2015-08-18 02:03:56

【问题描述】：

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

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

创建圆角

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

我也可以创建单一的边框颜色

view.layer.borderColor = color.CGColor; view.layer.borderWidth = 宽度；

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

我做了以下操作，但效果不理想。我关注了这篇文章，但它没有为我提供渐变边框颜色。 UIButton w/ gradient, rounded corners, border, and drop shadow

谁能帮我理解，如何为 UIButton 绘制渐变边框。伪代码/示例将非常有帮助。

【问题讨论】：

如果您想要按钮边缘周围的线性渐变，您可以尝试将线变成空心多边形，然后用径向渐变填充它。否则，您最简单的方法很可能是在 Photoshop 或您选择的图像处理包中绘制按钮背景，然后将其用作按钮背景。

【参考方案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)
    

斯威夫特 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()
    

【讨论】：

还有CGPathCreateCopyByStrokingPath() 可以在这里工作。

@David Berry，真的很棒，Thenks。

@iamMobile，使用CGContextSetFillColorWithColor(context, UIColor.clearColor().CGColor) 代替CGContextSetFillColorWithColor(context, UIColor.whiteColor().CGColor) 进行完美设计。

感谢大卫和甜蜜的天使。这真的很有帮助。我能做到。

@nielsbot 谢谢你的指点，我忘了，这会让事情变得更简单:)

【参考方案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];

【讨论】：

这个渐变不是只在按钮内创建填充渐变吗？问题是创建一个带边框的渐变，而不是在按钮内填充渐变