How to set gradient on UIButton in iOS swift? - ios

Question

I have a UIButton. I want to set the gradient of button as below.
I have tried below code but it does not set the color as per screenshot.
func applyGradient(colours: [UIColor]) -> Void {
self.applyGradient(colours: colours, locations: nil)
}
func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> Void {
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = colours.map { $0.cgColor }
gradient.locations = locations
self.layer.insertSublayer(gradient, at: 0)
}

Answer 1

You can simply do it like:
extension UIButton
{
func applyGradient(colors: [CGColor])
{
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colors
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
gradientLayer.frame = self.bounds
self.layer.insertSublayer(gradientLayer, at: 0)
}
}
Setting the gradient on UIButton:
self.button.applyGradient(colors: [UIColor.green.cgColor, UIColor.black.cgColor])

Answer 2

You can use this complete extension for all view:
// MARK: - Gradient
extension UIView {
enum axis {
case vertical, horizontal, custom(angle: CGFloat)
}
func setGradientBackgroundColor(colors: [UIColor], axis: axis, cornerRadius: CGFloat? = nil, apply: ((UIView) -> ())? = nil) {
layer.sublayers?.filter { $0.name == "gradientLayer" }.forEach { $0.removeFromSuperlayer() }
self.layoutIfNeeded()
let cgColors = colors.map { $0.cgColor }
let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = cgColors
gradient.name = "gradientLayer"
gradient.locations = [0.0, 1.0]
switch axis {
case .horizontal:
gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
case .custom(let angle):
calculatePoints(for: angle, gradient: gradient)
default:
break
}
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
guard let cornerRadius = cornerRadius else { return }
let circularPath = CGMutablePath()
circularPath.move(to: CGPoint.init(x: cornerRadius, y: 0))
circularPath.addLine(to: CGPoint.init(x: self.bounds.width - cornerRadius, y: 0))
circularPath.addQuadCurve(to: CGPoint.init(x: self.bounds.width, y: cornerRadius), control: CGPoint.init(x: self.bounds.width, y: 0))
circularPath.addLine(to: CGPoint.init(x: self.bounds.width, y: self.bounds.height - cornerRadius))
circularPath.addQuadCurve(to: CGPoint.init(x: self.bounds.width - cornerRadius, y: self.bounds.height), control: CGPoint.init(x: self.bounds.width, y: self.bounds.height))
circularPath.addLine(to: CGPoint.init(x: cornerRadius, y: self.bounds.height))
circularPath.addQuadCurve(to: CGPoint.init(x: 0, y: self.bounds.height - cornerRadius), control: CGPoint.init(x: 0, y: self.bounds.height))
circularPath.addLine(to: CGPoint.init(x: 0, y: cornerRadius))
circularPath.addQuadCurve(to: CGPoint.init(x: cornerRadius, y: 0), control: CGPoint.init(x: 0, y: 0))
let maskLayer = CAShapeLayer()
maskLayer.path = circularPath
maskLayer.fillRule = CAShapeLayerFillRule.evenOdd
maskLayer.fillColor = UIColor.red.cgColor
self.layer.mask = maskLayer
apply?(self)
}
func calculatePoints(for angle: CGFloat, gradient: CAGradientLayer) {
var ang = (-angle).truncatingRemainder(dividingBy: 360)
if ang < 0 { ang = 360 + ang }
let n: CGFloat = 0.5
switch ang {
case 0...45, 315...360:
let a = CGPoint(x: 0, y: n * tanx(ang) + n)
let b = CGPoint(x: 1, y: n * tanx(-ang) + n)
gradient.startPoint = a
gradient.endPoint = b
case 45...135:
let a = CGPoint(x: n * tanx(ang - 90) + n, y: 1)
let b = CGPoint(x: n * tanx(-ang - 90) + n, y: 0)
gradient.startPoint = a
gradient.endPoint = b
case 135...225:
let a = CGPoint(x: 1, y: n * tanx(-ang) + n)
let b = CGPoint(x: 0, y: n * tanx(ang) + n)
gradient.startPoint = a
gradient.endPoint = b
case 225...315:
let a = CGPoint(x: n * tanx(-ang - 90) + n, y: 0)
let b = CGPoint(x: n * tanx(ang - 90) + n, y: 1)
gradient.startPoint = a
gradient.endPoint = b
default:
let a = CGPoint(x: 0, y: n)
let b = CGPoint(x: 1, y: n)
gradient.startPoint = a
gradient.endPoint = b
}
}
private func tanx(_ 𝜽: CGFloat) -> CGFloat {
return tan(𝜽 * CGFloat.pi / 180)
}
}
Using:
btn.setGradientBackgroundColor(colors: [.softBlue, .seaBlue], axis: .horizontal, cornerRadius: 5) { view in
guard let btn = view as? UIButton, let imageView = btn.imageView else { return }
btn.bringSubviewToFront(imageView) // To display imageview of button
}

Answer 3

Above code works for me, creating extension is good as gradient can be applied for multiple buttons
If one needs to add corner radius for gradient you need to add just one line code in the above code
extension UIButton
{
func applyGradient(colors: [CGColor])
{
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colors
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
gradientLayer.frame = self.bounds
gradientLayer.cornerRadius = self.frame.size.height / 2
self.layer.insertSublayer(gradientLayer, at: 0)
}
}