Ios Swift中的径向梯度背景

我一直在尝试制作一个基本的径向渐变背景，但没有成功。我设法得到了一个线性梯度，如下面的代码所示，但我不知道如何使它与不同的颜色径向-如下图所示。任何帮助都将不胜感激。：）

---

看一看我的RadialGradientLayer实现，可以随意修改

class RadialGradientLayer: CALayer {

   override init(){

        super.init()

        needsDisplayOnBoundsChange = true
    }

     init(center:CGPoint,radius:CGFloat,colors:[CGColor]){

        self.center = center
        self.radius = radius
        self.colors = colors

        super.init()

    }

    required init(coder aDecoder: NSCoder) {

        super.init()

    }

    var center:CGPoint = CGPointMake(50,50)
    var radius:CGFloat = 20
    var colors:[CGColor] = [UIColor(red: 251/255, green: 237/255, blue: 33/255, alpha: 1.0).CGColor , UIColor(red: 251/255, green: 179/255, blue: 108/255, alpha: 1.0).CGColor]

    override func drawInContext(ctx: CGContext!) {

        CGContextSaveGState(ctx)

        var colorSpace = CGColorSpaceCreateDeviceRGB()

        var locations:[CGFloat] = [0.0, 1.0]

        var gradient = CGGradientCreateWithColors(colorSpace, colors, [0.0,1.0])

        var startPoint = CGPointMake(0, self.bounds.height)
        var endPoint = CGPointMake(self.bounds.width, self.bounds.height)

        CGContextDrawRadialGradient(ctx, gradient, center, 0.0, center, radius, 0)

    }

}

---

在我的例子中，我只需要两种颜色，如果需要更多颜色，则需要修改

location

在

drawInContext

中声明的数组。另外，从这个类创建对象之后，不要忘记调用它的

setNeedsDisplay（）

，否则它将无法工作。有时我还需要不同大小的渐变，这就是为什么您必须在初始值设定项中传递半径参数和渐变的中心点，如果您只是在寻找UIView径向渐变背景，这里是Swift 3中的一个实现：

class RadialGradientLayer: CALayer {

    var center: CGPoint {
        return CGPoint(x: bounds.width/2, y: bounds.height/2)
    }

    var radius: CGFloat {
        return (bounds.width + bounds.height)/2
    }

    var colors: [UIColor] = [UIColor.black, UIColor.lightGray] {
        didSet {
            setNeedsDisplay()
        }
    }

    var cgColors: [CGColor] {
        return colors.map({ (color) -> CGColor in
            return color.cgColor
        })
    }

    override init() {
        super.init()
        needsDisplayOnBoundsChange = true
    }

    required init(coder aDecoder: NSCoder) {
        super.init()
    }

    override func draw(in ctx: CGContext) {
        ctx.saveGState()
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let locations: [CGFloat] = [0.0, 1.0]
        guard let gradient = CGGradient(colorsSpace: colorSpace, colors: cgColors as CFArray, locations: locations) else {
            return
        }
        ctx.drawRadialGradient(gradient, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: radius, options: CGGradientDrawingOptions(rawValue: 0))
    }

}



class RadialGradientView: UIView {

    private let gradientLayer = RadialGradientLayer()

    var colors: [UIColor] {
        get {
            return gradientLayer.colors
        }
        set {
            gradientLayer.colors = newValue
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if gradientLayer.superlayer == nil {
            layer.insertSublayer(gradientLayer, at: 0)
        }
        gradientLayer.frame = bounds
    }

}

查看我的完整答案。

如今，CAGradientLayer内置于iOS中。 这很简单： 多年来，您只需这样做：

class GlowBall: UIView {
    private lazy var pulse: CAGradientLayer = {
        let l = CAGradientLayer()
        l.type = .radial
        l.colors = [ UIColor.red.cgColor,
            UIColor.yellow.cgColor,
            UIColor.green.cgColor,
            UIColor.blue.cgColor]
        l.locations = [ 0, 0.3, 0.7, 1 ]
        l.startPoint = CGPoint(x: 0.5, y: 0.5)
        l.endPoint = CGPoint(x: 1, y: 1)
        layer.addSublayer(l)
        return l
    }()

    override func layoutSubviews() {
        super.layoutSubviews()
        pulse.frame = bounds
        pulse.cornerRadius = bounds.width / 2.0
    }

}
    

重点是：

l.colors = [ UIColor.red.cgColor,
                UIColor.yellow.cgColor,
                UIColor.green.cgColor,
                UIColor.blue.cgColor]
l.locations = [ 0, 0.3, 0.7, 1 ]
    

请注意，您可以根据需要更改“拉伸”

l.locations = [ 0, 0.1, 0.2, 1 ]
    
    

使用任何你喜欢的颜色

l.colors = [ UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor,
                    UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor,
                    UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor,
                    UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor]
                l.locations = [ 0,0.1,0.2,0.3,0.4,0.5,0.6,1 ]
    

现在真的很容易

非常有用的技巧： 假设您想要黄色，蓝色条带为0.6：

l.colors = [ UIColor.yellow.cgColor,
                    UIColor.blue.cgColor,
                    UIColor.yellow.cgColor]
                l.locations = [ 0, 0.6, 1 ]
    

那很好

    # yellow...
    # blue...
    # yellow...
    

但通常你会这样做：

    # yellow...
    # yellow...
    # blue...
    # yellow...
    # yellow...
    

请注意，每一端有两个黄色

l.colors = [ UIColor.yellow.cgColor,
 UIColor.yellow.cgColor,
 UIColor.blue.cgColor,
 UIColor.yellow.cgColor,
 UIColor.yellow.cgColor]
    

通过这种方式，您可以控制蓝带的“宽度”：

在本例中：蓝带将窄且尖锐：

l.locations = [ 0, 0.58, 0.6, 0.68, 1 ]
    

l.locations = [ 0, 0.5, 0.6, 0.7, 1 ]
    

在本例中，蓝带将宽而软：

l.locations = [ 0, 0.58, 0.6, 0.68, 1 ]
    

l.locations = [ 0, 0.5, 0.6, 0.7, 1 ]
    

---

这才是控制渐变并获得所需外观的真正秘诀。

函数的一种稍微不同的方法，它将父视图、颜色和位置作为输入。该函数返回添加图层的子视图。这样可以灵活地隐藏/显示/删除子视图

---

如果你这样做是为了学习，那没关系，但如果你是为了设计，我建议你在sketch3中设计它，并将其用作UIImages，这可能会对你有所帮助。@sriramhegde背景需要动态更改。一张照片也无济于事。谢谢。请注意这个老问题，这是现在非常简单的回答下面！（显然，在iPhone应用程序中永远不要使用图像进行渐变！gpu非常擅长制作渐变；图像看起来很糟糕，不可缩放，而且非常无性能。）这就是我在viewDidLoad中创建对象的方式，但出于这样或那样的原因，它不起作用@泽勒布。var screencenter=CGPointMake（100100）让innerColour=UIColor.redColor（）作为！CGColor let outtercolor=UIColor.greenColor（）as！CGColor var radialGradientBackground=RadialGradientLayer（中心：屏幕中心，半径：CGFloat（50.0），颜色：[内部颜色，外部颜色]）radialGradientBackground.frame=self.view！。绑定self.view！。layer.insertSublayer（radialGradientBackground，atIndex:0）self.view！。setNeedsDisplay（）setNeedsDisplay必须在radialGradientBackground上调用，而不是在viewSweet中调用。在zellb工作得很好。谢谢@Gugulethu很高兴听到您的DrawingInTextNeat解决方案中甚至没有使用位置、起点和终点，+以便于扩展。如何在游乐场中使用此功能？对于在这里搜索的任何人，请注意，

CAGradientLayer

现在已经存在。现在你肯定不需要

画画
。它是完全内置的。（作为一个细节，我相信如果发送的数组中有2个项目以外的数字，这将崩溃。）是的，没问题！：）感谢您的解决方案。
CAGradientLayer
现在已经完全内置到iOS中，已经有好几年了
override func viewDidLoad() {
    super.viewDidLoad()
    //squareView is my parent view I am going to add gradient view to it
    squareView.backgroundColor = UIColor.black
    //Add CG colors
    let colours = [UIColor.red.cgColor,UIColor.green.cgColor,UIColor.clear.cgColor]
    //Add location with same count as colors, these describe contribution in gradient from center 0 to end 1
    let locations:[NSNumber] = [0,0.6,0.8]
    //Use gradientView reference to show/hide, remove/re-add from view
    let gradientView = self.addGradientViewTo(parentView: self.squareView, colors:colours,locations: locations)
}

func addGradientViewTo (parentView:UIView,colors:[CGColor],locations:[NSNumber]) -> UIView  {
    //Create customGradientView with exact dimension of parent, add it with centering with parent
    let customGradientView = UIView()
    customGradientView.backgroundColor = UIColor.clear
    customGradientView.frame = parentView.bounds
    parentView.addSubview(customGradientView)
    customGradientView.centerXAnchor.constraint(equalTo: parentView.centerXAnchor).isActive = true
    customGradientView.centerYAnchor.constraint(equalTo: parentView.centerYAnchor).isActive = true
    parentView.clipsToBounds = true

    //Create layer add it to customGradientView
    let gradientLayer = CAGradientLayer()
    gradientLayer.type = .radial //Circular
    gradientLayer.opacity = 0.8
    gradientLayer.colors = colors
    gradientLayer.locations = locations
    gradientLayer.frame = customGradientView.bounds
    
    //Set start point as center and radius as 1, co-ordinate system maps 0 to 1, 0,0 top left, bottom right 1,1
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
    let radius = 1.0
    gradientLayer.endPoint = CGPoint(x: radius, y: radius)
          
    //Add layer at top to make sure its visible
    let layerCount:UInt32 = UInt32(customGradientView.layer.sublayers?.count ?? 0)
    customGradientView.layer.insertSublayer(gradientLayer, at: layerCount)
    customGradientView.layoutIfNeeded()
    
    //Use reference to show/hide add/remove gradient view
    return customGradientView
}