Home > Enterprise >  How can i add Gradient colour for button tint in swift iOS
How can i add Gradient colour for button tint in swift iOS

Time:11-08

is there any solution to apply tint colour as a gradient in swift

my button has a simple white icon I want to change it to a gradient colour

CodePudding user response:

I have the same problem too but for now if you wanna change the text color it works. like you convert image into pattern color by this code

/*

class gradiunTitle : UIButton  {

   override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
      }
   required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
      }
   private func setup() {
       let gradient = getGradientLayer(bounds: self.bounds)
      self.setTitleColor(gradientColor(bounds: self.bounds, gradientLayer: gradient), for: .normal)
       self.tintColor = gradientColor(bounds: self.frame, gradientLayer: gradient)
      }
    func getGradientLayer(bounds : CGRect) -> CAGradientLayer{
    let gradient = CAGradientLayer()
    gradient.frame = bounds
    //order of gradient colors
    gradient.colors = [UIColor.red.cgColor,UIColor.blue.cgColor, UIColor.green.cgColor]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    return gradient
    }
    
    func gradientColor(bounds: CGRect, gradientLayer :CAGradientLayer) -> UIColor? {
    UIGraphicsBeginImageContext(gradientLayer.bounds.size)
    gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return UIColor(patternImage: image!)
    }
}

*/

CodePudding user response:

You can modify your image before setting it to button.

extension UIImage {
    
    func linearGradient(colors: [CGColor], startingPoint: CGPoint, endPoint: CGPoint) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        
        guard let context = UIGraphicsGetCurrentContext() else {
            print("Couldn't get current context.")
            return nil
        }
        
        context.translateBy(x: 0, y: self.size.height)
        context.scaleBy(x: 1.0, y: -1.0)

        context.setBlendMode(.normal)
        let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

        // Create gradient
        let colors = colors as CFArray
        let space = CGColorSpaceCreateDeviceRGB()
        
        guard let gradient = CGGradient(colorsSpace: space, colors: colors, locations: nil) else {
            
            return nil
        }

        // Apply gradient
        guard let cgImage = self.cgImage else {
            print("Couldn't get cgImage of UIImage.")
            return nil
        }
        
        context.clip(to: rect, mask: cgImage)
        context.drawLinearGradient(
            gradient,
            start: startingPoint,
            end: endPoint,
            options: .init(rawValue: 0)
        )
        
        let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return gradientImage
    }
    
}

You can use it like that:

guard let image = UIImage(named: "<your_image_name>") else { return }
let gradientImage = image.linearGradient(
    colors: [UIColor.blue.cgColor, UIColor.yellow.cgColor],
    startingPoint: .zero,
    endPoint: CGPoint(x: image.size.width, y: image.size.height)
)
button.setImage(gradientImage, for: .normal)
  • Related