How to create UIImage with vertical gradient using “from-color” and “to-color”

Question

How to create new image just with gradient colors, using \"from-color\" and \"to-color\"?

Answer 1

I think, It's more swifty

Swift 3

struct GradientPoint {
   var location: CGFloat
   var color: UIColor
}



extension UIImage {
convenience init?(size: CGSize, gradientPoints: [GradientPoint]) {
    UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)

    guard let context = UIGraphicsGetCurrentContext() else { return nil }       // If the size is zero, the context will be nil.
    guard let gradient = CGGradient(colorSpace: CGColorSpaceCreateDeviceRGB(), colorComponents: gradientPoints.flatMap { $0.color.cgColor.components }.flatMap { $0 }, locations: gradientPoints.map { $0.location }, count: gradientPoints.count) else {
        return nil
    }

    context.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: size.height), options: CGGradientDrawingOptions())
    guard let image = UIGraphicsGetImageFromCurrentImageContext()?.cgImage else { return nil }
    self.init(cgImage: image)
    defer { UIGraphicsEndImageContext() }
}
}


extension UIImageView {
   func gradated(gradientPoints: [GradientPoint]) {
    let gradientMaskLayer       = CAGradientLayer()
    gradientMaskLayer.frame     = frame
    gradientMaskLayer.colors    = gradientPoints.map { $0.color.cgColor }
    gradientMaskLayer.locations = gradientPoints.map { $0.location as NSNumber }
    self.layer.insertSublayer(gradientMaskLayer, at: 0)
}
}

Use like this,

let points = [GradientPoint(location: 0, color: #colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 0.2530534771)), GradientPoint(location: 0.2, color: #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 0.5028884243)), GradientPoint(location: 0.4, color: #colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 0.3388534331)),
          GradientPoint(location: 0.6, color: #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 0.3458681778)), GradientPoint(location: 0.8, color: #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 0.3851232394))]

UIImage(size: CGSize(width: 300, height: 300), gradientPoints: points)


let veniceImageView = UIImageView(image: #imageLiteral(resourceName: "venice-italy.jpg"))
veniceImageView.gradated(gradientPoints: points)

I tested on swift 3. Check the screenshot.