I am trying to add a CAGradientLayer to a CAShapeLayer, but the gradient is not conforming to the shape of the layer. Instead, the gradient is taking the shape of the UIView itself. I originally attempted this with a UIBezierPath but it did not work either. I am trying to put a gradient into my shape.
override func drawRect(rect: CGRect) {
let bounds = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
let center = self.center
let path = CAShapeLayer()
path.bounds = bounds
path.position = CGPoint(x: center.x, y: center.y)
//path.backgroundColor = UIColor.redColor().CGColor
path.cornerRadius = 20
//self.layer.addSublayer(path)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = path.bounds
gradientLayer.colors = [cgColorForRed(209.0, green: 0.0, blue: 0.0),
cgColorForRed(255.0, green: 102.0, blue: 34.0),
cgColorForRed(255.0, green: 218.0, blue: 33.0),
cgColorForRed(51.0, green: 221.0, blue: 0.0),
cgColorForRed(17.0, green: 51.0, blue: 204.0),
cgColorForRed(34.0, green: 0.0, blue: 102.0),
cgColorForRed(51.0, green: 0.0, blue: 68.0)]
gradientLayer.startPoint = CGPoint(x:0,y:0)
gradientLayer.endPoint = CGPoint(x:0, y:1)
path.insertSublayer(gradientLayer, atIndex: 1)
self.layer.addSublayer(path)
}
func cgColorForRed(red: CGFloat, green: CGFloat, blue: CGFloat ) -> AnyObject {
return UIColor(red: red/255.0, green: green/255.0, blue: blue/255.5, alpha: 1.0).CGColor as AnyObject
}
Originally I had path defined to be a UIBezierPath of a rectangle with rounded corners which I am looking to fill with the gradient:
let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
fillColor.setFill()
path.fill()
path.lineWidth = self.lineWidth
UIColor.blackColor().setStroke()
path.stroke()
Edit from Larcerax's response:
class Thermometer: UIView {
//#IBInspectable var fillColor: UIColor = UIColor.greenColor()
let lineWidth: CGFloat = 2
override func drawRect(rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
let svgid = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [cgColorForRed(209.0, green: 0.0, blue: 0.0),
cgColorForRed(255.0, green: 102.0, blue: 34.0),
cgColorForRed(255.0, green: 218.0, blue: 33.0),
cgColorForRed(51.0, green: 221.0, blue: 0.0),
cgColorForRed(17.0, green: 51.0, blue: 204.0),
cgColorForRed(34.0, green: 0.0, blue: 102.0),
cgColorForRed(51.0, green: 0.0, blue: 68.0)], [0,1])
CGContextSaveGState(context)
let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
path.addClip()
CGContextDrawLinearGradient(context, svgid, CGPoint(x: 0, y: path.bounds.height),
CGPoint(x: path.bounds.width, y: path.bounds.height),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
}
You can try something like the following set up in order to produce the following shape, this is just an example to show you the setup, but this should do it:
let context = UIGraphicsGetCurrentContext()
let gradientColor3 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor4 = UIColor(red: 0.000, green: 1.000, blue: 0.000, alpha: 1.000)
let sVGID_1_2 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor3.CGColor, gradientColor4.CGColor], [0, 1])
CGContextSaveGState(context)
CGContextTranslateCTM(context, 198.95, 199.4)
CGContextRotateCTM(context, -30 * CGFloat(M_PI) / 180)
var polygonPath = UIBezierPath()
polygonPath.moveToPoint(CGPointMake(0, -145.95))
polygonPath.addLineToPoint(CGPointMake(126.4, -72.98))
polygonPath.addLineToPoint(CGPointMake(126.4, 72.97))
polygonPath.addLineToPoint(CGPointMake(0, 145.95))
polygonPath.addLineToPoint(CGPointMake(-126.4, 72.98))
polygonPath.addLineToPoint(CGPointMake(-126.4, -72.97))
polygonPath.closePath()
CGContextSaveGState(context)
polygonPath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_2,
CGPointMake(-126.4, -72.97),
CGPointMake(126.41, 72.99),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
to produce this:
If this doesn't work, then tell me, I will try to fix it up to make it work.
Also, here's just a simple rectangle:
let context = UIGraphicsGetCurrentContext()
let gradientColor = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor2 = UIColor(red: 0.988, green: 0.933, blue: 0.129, alpha: 1.000)
let gradientColor3 = UIColor(red: 1.000, green: 0.000, blue: 1.000, alpha: 1.000)
let sVGID_1_3 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor.CGColor, gradientColor2.CGColor, gradientColor3.CGColor], [0, 0.43, 1])
let rectanglePath = UIBezierPath(rect: CGRectMake(68, 28, 78.4, 78.4))
CGContextSaveGState(context)
rectanglePath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_3,
CGPointMake(68, 67.19),
CGPointMake(146.38, 67.19),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
here's a function to try out, you'll have to mess around with the colors, but you can input a frame:
class func drawStuff(#frame: CGRect) {
let context = UIGraphicsGetCurrentContext()
let gradientColor = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor2 = UIColor(red: 0.988, green: 0.933, blue: 0.129, alpha: 1.000)
let gradientColor3 = UIColor(red: 1.000, green: 0.000, blue: 1.000, alpha: 1.000)
let sVGID_1_4 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor.CGColor, gradientColor2.CGColor, gradientColor3.CGColor], [0, 0.43, 1])
let rectangleRect = CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, frame.size.height)
let rectanglePath = UIBezierPath(rect: rectangleRect)
CGContextSaveGState(context)
rectanglePath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_4, CGPointMake(rectangleRect.minX, rectangleRect.midY),CGPointMake(rectangleRect.maxX, rectangleRect.midY), 0)
CGContextRestoreGState(context)
}
Or you can just use this written by myself :) https://github.com/BilalReffas/SwiftyGradient
Swift 4 version of the first shape from #Loxx answer above which produces this output:
.
private func drawShape() {
guard let context = UIGraphicsGetCurrentContext() else {
print("No context, handle me")
return
}
let gradientColor3 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor4 = UIColor(red: 0.000, green: 1.000, blue: 0.000, alpha: 1.000)
guard let sVGID_1_2 = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: [gradientColor3.cgColor, gradientColor4.cgColor] as CFArray, locations: [0, 1]) else {
print("No gradient, handle me")
context.restoreGState()
return
}
context.saveGState()
context.translateBy(x: 198.95, y: 199.4)
context.rotate(by: -30 * CGFloat(Double.pi) / 180)
let polygonPath = UIBezierPath()
polygonPath.move(to: CGPoint(x: 0, y: -145.95))
polygonPath.addLine(to: CGPoint(x: 126.4, y: -72.98))
polygonPath.addLine(to: CGPoint(x: 126.4, y: 72.97))
polygonPath.addLine(to: CGPoint(x: 0, y: 145.95))
polygonPath.addLine(to: CGPoint(x: -126.4, y: 72.98))
polygonPath.addLine(to: CGPoint(x: -126.4, y: -72.97))
polygonPath.close()
context.saveGState()
polygonPath.addClip()
context.drawLinearGradient(sVGID_1_2,
start: CGPoint(x: -126.4, y: -72.97),
end: CGPoint(x: 126.41, y: 72.99),
options: [.drawsBeforeStartLocation, .drawsAfterEndLocation])
context.restoreGState()
}
I'm posting it because basically every line has changed in conversion to Swift 4 and it took a while to convert it just to check if it works.
Related
How we can set gradient colour in UIButton using swift?
I have tried this:
func addGradient(btn : UIButton){
let color1 = UIColor(red: 221.0/255, green: 96.0/255, blue: 129.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 171.0/255, green: 74.0/255, blue: 141.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [color2,color1 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
btn.layer.insertSublayer(gradientLayer, at: 0)
}
it's not working properly.
Try below code hope it will fix your issue:
Uses:
override func viewDidAppear(_ animated: Bool) {
yesBtn.clipsToBounds = true
yesBtn.addGradient(btn: yesBtn)
}
Extension:
func addGradient(btn : UIButton){
let color1 = UIColor(red: 221.0/255, green: 96.0/255, blue: 129.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 171.0/255, green: 74.0/255, blue: 141.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = btn.bounds
gradientLayer.colors = [color2,color1 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
btn.layer.insertSublayer(gradientLayer, at: 0)
}
I would like to add gradient layer to my navbar, but after I add it, layer hides my title, like its behind that new sublayer.
override func viewDidLoad() {
super.viewDidLoad()
self.title = "My Trips"
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]
//self.navigationController?.navigationBar.layer.addSublayer(gradientLayer)
self.navigationController?.navigationBar.layer.insertSublayer(gradientLayer, at: 1)
setupGradient()
}
let gradientLayer = CAGradientLayer()
func setupGradient() {
gradientLayer.colors = [
UIColor(red: 0.259, green: 0.188, blue: 0.475, alpha: 1).cgColor,
UIColor(red: 0.11, green: 0.024, blue: 0.369, alpha: 1).cgColor
]
gradientLayer.locations = [0, 1]
gradientLayer.startPoint = CGPoint(x: 0.25, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: 0, b: 0.58, c: -0.58, d: 0, tx: 0.5, ty: 0))
gradientLayer.bounds = (self.navigationController?.navigationBar.bounds.insetBy(dx: -0.01*view.bounds.size.width, dy: -1*view.bounds.size.height))!
}
Use this line for inserting layer.
self.navigationController?.navigationBar.subviews.first?.layer.insertSublayer(gradientLayer, at: 0)
When I run the app the gradient layer frame doesn't match with UIView frame. I tried with below code:
let color1 = UIColor(red: 20.0/255, green: 43.0/255, blue: 81.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 149.0/255, green: 45.0/255, blue: 122.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.backBarcodeSrch.bounds
gradientLayer.colors = [color1,color2 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
self.backBarcodeSrch.layer.addSublayer(gradientLayer)
Update the frame of gradientLayer in viewDidLayoutSubviews() in your ViewController.
class VC: UIViewController {
var gradientLayer = CAGradientLayer()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
gradientLayer.frame = self.backBarcodeSrch.bounds
}
override func viewDidLoad() {
super.viewDidLoad()
self.addGradient()
}
func addGradient() {
let color1 = UIColor(red: 20.0/255, green: 43.0/255, blue: 81.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 149.0/255, green: 45.0/255, blue: 122.0/255, alpha: 1.0).cgColor
gradientLayer.frame = self.backBarcodeSrch.bounds
gradientLayer.colors = [color1,color2 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
self.backBarcodeSrch.layer.addSublayer(gradientLayer)
}
}
try this :
func addGradientLayer() {
let color1 = UIColor(red: 20.0/255, green: 43.0/255, blue: 81.0/255, alpha:1.0).cgColor
let color2 = UIColor(red: 149.0/255, green: 45.0/255, blue: 122.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.backBarcodeSrch.bounds
gradientLayer.colors = [color1,color2 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
self.backBarcodeSrch.layer.addSublayer(gradientLayer)
}
override func viewDidLayoutSubviews() {
addGradientLayer()
}
I have a project in Swift 3 that I am using a gradient on the view. I placed a image on the view, but it is under the gradient layer so I was going to draw the image programmatically instead of with the storyboard. I can't seem to figure out how to get the image to be centered and to aspect fit inside the bounds of the view.
What I have...
//Gradient Background
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.frame
gradientLayer.colors = [UIColor(red: 0/255, green: 147/255, blue: 255/255, alpha: 1.0).cgColor, UIColor(red: 162/255, green: 134/255, blue: 255/255, alpha: 1.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
self.view.layer.addSublayer(gradientLayer)
//Image
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
self.view.addSubview(mainImageView)
You can try it
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.contentMode = .ScaleAspectFit
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.frame
gradientLayer.colors = [UIColor(red: 0/255, green: 147/255, blue: 255/255, alpha: 1.0).cgColor, UIColor(red: 162/255, green: 134/255, blue: 255/255, alpha: 1.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
self.view.layer.addSublayer(gradientLayer)
//Image
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.center = self.view.cente
mainImageView.contentMode = .ScaleAspectFit
self.view.addSubview(mainImageView)
Try this one
I want to color from touchpoint of gradient layer.
I tried this :
func viewtap(sender: UITapGestureRecognizer) {
let touchPoint = sender.locationInView(self.gradientview) // Change to whatever view you want the point for
print("\(touchPoint))")
colorOfPoint(touchPoint)
}
This method I used but it gives original color only.
func colorOfPoint(point:CGPoint) -> UIColor
{
let colorSpace:CGColorSpace = CGColorSpaceCreateDeviceRGB()!
let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.PremultipliedLast.rawValue)
var pixelData:[UInt8] = [0, 0, 0, 0]
let context = CGBitmapContextCreate(&pixelData, 1, 1, 8, 4, colorSpace, bitmapInfo.rawValue)
CGContextTranslateCTM(context, -point.x, -point.y);
self.view.layer.renderInContext(context!)
let red:CGFloat = CGFloat(pixelData[0])/CGFloat(255.0)
let green:CGFloat = CGFloat(pixelData[1])/CGFloat(255.0)
let blue:CGFloat = CGFloat(pixelData[2])/CGFloat(255.0)
let alpha:CGFloat = CGFloat(pixelData[3])/CGFloat(255.0)
let color:UIColor = UIColor(red: red, green: green, blue: blue, alpha: alpha)
colorChange.tintColor = UIColor(red: red, green: green, blue: blue, alpha: alpha)
return color
}
Gradient Layer:
Always give .CGColor after uicolor. now i will pick color from any in UIView
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.shadowview.bounds
let colorTop = UIColor(red:CGFloat(RedColor)/255.0 , green: CGFloat (GreenColor)/255.0 , blue: CGFloat(BlueColor)/255.0,alpha: CGFloat(alphalab)/255.0)**.CGColor**
let colorBottom = UIColor(red: 35.0/255.0, green: 2.0/255.0, blue: 2.0/255.0, alpha: 1.0)**.CGColor**
colorChange.tintColor = UIColor(red:CGFloat(RedColor)/255.0 , green: CGFloat (GreenColor)/255.0 , blue: CGFloat(BlueColor)/255.0,alpha: CGFloat(alphalab)/255.0)
gradientLayer.colors = [colorTop, colorBottom]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.locations = [ 0.0, 1.0]
self.shadowview.layer.addSublayer(gradientLayer)