如何向UIView添加径向渐变？

Question

我有一个UIView我想要一个径向渐变,我想知道如何去做这个？

Answer 1

第一个子类是UIView:

@implementation UIRadialView

- (void)drawRect:(CGRect)rect
{
    // Setup view
    CGFloat colorComponents[] = {0.0, 0.0, 0.0, 1.0,   // First color:  R, G, B, ALPHA (currently opaque black)
                                 0.0, 0.0, 0.0, 0.0};  // Second color: R, G, B, ALPHA (currently transparent black)
    CGFloat locations[] = {0, 1}; // {0, 1) -> from center to outer edges, {1, 0} -> from outer edges to center
    CGFloat radius = MIN((self.bounds.size.height / 2), (self.bounds.size.width / 2));
    CGPoint center = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);

    // Prepare a context and create a color space
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    // Create gradient object from our color space, color components and locations
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colorComponents, locations, 2);

    // Draw a gradient
    CGContextDrawRadialGradient(context, gradient, center, 0.0, center, radius, 0);
    CGContextRestoreGState(context);

    // Release objects
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
}

@end

然后将其添加到您的视图中:

UIRadialView *radialView = [[UIRadialView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
radialView.backgroundColor = [UIColor redColor];
[self.view addSubview:radialView];

结果:

Answer 2

Swift 3 - @IBDesignable

我解决了卡里斯和亚历山大的答案.我的目标是尽可能简化.例如删除颜色空间和位置(nil),以便渐变使用默认值.

如何使用

步骤1

创建文件并添加以下代码:import UIKit

@IBDesignable
class RadialGradientView: UIView {

    @IBInspectable var InsideColor: UIColor = UIColor.clear
    @IBInspectable var OutsideColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let colors = [InsideColor.cgColor, OutsideColor.cgColor] as CFArray
        let endRadius = min(frame.width, frame.height) / 2
        let center = CGPoint(x: bounds.size.width / 2, y: bounds.size.height / 2)
        let gradient = CGGradient(colorsSpace: nil, colors: colors, locations: nil)
        UIGraphicsGetCurrentContext()!.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: endRadius, options: CGGradientDrawingOptions.drawsBeforeStartLocation)
    }
}

第2步

在Storyboard上,RadialGradientView在Identity Inspector 中将UIView设置为上面的内容:

第3步

在Attributes Inspector中为渐变设置Inside Color和Outside Color,并在Storyboard上查看更改:

(注意:我在故事板上制作的UIView足够大,所以它填满整个

Answer 3

为此,您需要下载到Core Graphics并使用CGContextDrawRadialGradient.

类似的Stack Overflow问题

如何绘制径向渐变扇区(iphone)

如何使用Core Graphics/iPhone绘制渐变线(淡入/淡出)？

其他资源

这里有一个教程,展示如何在iOS上使用渐变绘制图标:

http://redartisan.com/2011/05/13/porting-iconapp-core-graphics

他把代码放在Github上,完成了一个UIView子类,它显示了使用Core Graphics制作渐变的(相当漫长的)方法:

https://github.com/crafterm/IconApp/blob/master/IconApp/IconView.m

Answer 4

这是Karlis在Swift 3中的回答:

override func draw(_ rect: CGRect) {

    // Setup view
    let colors = [UIColor.white.cgColor, UIColor.black.cgColor] as CFArray
    let locations = [ 0.0, 1.0 ] as [CGFloat]
    let radius = min((self.bounds.size.height / 2), (self.bounds.size.width / 2))
    let center = CGPoint.init(x: self.bounds.size.width / 2, y: self.bounds.size.height / 2)

    // Prepare a context and create a color space
    let context = UIGraphicsGetCurrentContext()
    context!.saveGState()
    let colorSpace = CGColorSpaceCreateDeviceRGB()

    // Create gradient object from our color space, color components and locations
    let gradient = CGGradient.init(colorsSpace: colorSpace, colors: colors, locations: locations)

    // Draw a gradient
    context!.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: radius, options: CGGradientDrawingOptions(rawValue: 0))
    context?.restoreGState()
}