How to create gradient colour look like following image programatically.
I just wrote an UIImage extension for Swift 2.0. Maybe it's of some use. You call it with an array of UIColor (any number) and a frame where the gradient should be drawn.
extension UIImage {
class func convertGradientToImage(colors: [UIColor], frame: CGRect) -> UIImage {
// start with a CAGradientLayer
let gradientLayer = CAGradientLayer()
gradientLayer.frame = frame
// add colors as CGCologRef to a new array and calculate the distances
var colorsRef = [CGColor]()
var locations = [NSNumber]()
for i in 0 ... colors.count-1 {
colorsRef.append(colors[i].CGColor as CGColorRef)
locations.append(Float(i)/Float(colors.count-1))
}
gradientLayer.colors = colorsRef
gradientLayer.locations = locations
// now build a UIImage from the gradient
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.renderInContext(UIGraphicsGetCurrentContext()!)
let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
// return the gradient image
return gradientImage
}
}
Call it like this:
let colors = [
UIColor.blueColor(),
UIColor.greenColor()
// and many more if you wish
]
let gradientImage = UIImage.convertGradientToImage(colors, frame: navigationBar.bounds)
and apply with:
.backgroundColor = UIColor(patternImage: gradientImage)
or
.setBackgroundImage(gradientImage, forBarMetrics: .Default)
When you say "apply it over the image as a gradient", do you mean as a mask (revealing the image at the top, having it fade the image to transparent at the bottom)? If that's the case, you can apply that gradient as a mask, using CAGradientLayer
:
CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
(id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask;
The above does a simple vertical gradient (because the default is vertical, linear gradient). But you asked about startPoint
, endPoint
, and locations
. If for example, you wanted your mask applied horizontally, you would do:
gradientMask.startPoint = CGPointMake(0.0, 0.5); // start at left middle
gradientMask.endPoint = CGPointMake(1.0, 0.5); // end at right middle
If you wanted to have two gradients, one at the first 10% and another at the last 10%, you'd do:
gradientMask.colors = @[(id)[UIColor clearColor].CGColor,
(id)[UIColor whiteColor].CGColor,
(id)[UIColor whiteColor].CGColor,
(id)[UIColor clearColor].CGColor];
gradientMask.locations = @[@0.0, @0.10, @0.90, @1.0];
If you want a simple gradient by itself (not as a mask), you'd create a view
and then add the gradient layer to it:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor,
(id)[UIColor blackColor].CGColor];
[view.layer addSublayer:gradient];
See the CAGradientLayer
class reference.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With