Search code examples
iosswiftiphoneios13

Gradient Stroke On UILabel Text


PS: I have solved it by adding mask on layer of targetView

I have a scenario in which I have to Stroke UIlabel text with Gradient color I have find every link related to stroke color but they are only applying simple colors which is not that complicated but What I wan to achieve is gradient color stroke on UIlabel Text. I have tried this so far.

 func createGradientLabel(_ targetView : UIView, letter : String,fontsize : Int ,position : Int,_ startColor: UIColor = UIColor.init(named: "startColor")!, _ endColor: UIColor = UIColor.init(named: "endColor")!) {
    gradientLayer = CAGradientLayer()
    gradientLayer.frame = targetView.bounds
    gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
    targetView.layer.addSublayer(gradientLayer)
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    
    // Create a label and add it as a subview
    let label = UILabel(frame: targetView.bounds)
    let strokeTextAttributes = [
        NSAttributedString.Key.strokeColor : UIColor.red,
      NSAttributedString.Key.foregroundColor : UIColor.clear,
      NSAttributedString.Key.strokeWidth : -4.0,
      NSAttributedString.Key.font : UIFont.setCustomFont(type: .Poppin_Reg, size: 30)]
      as [NSAttributedString.Key : Any]

    label.attributedText = NSMutableAttributedString(string: letter, attributes: strokeTextAttributes)
    //label.text = letter
    //label.font = UIFont.boldSystemFont(ofSize: CGFloat(fontsize))
    
    targetView.addSubview(label)
    label.layer.shadowColor = #colorLiteral(red: 1, green: 0.3294117647, blue: 0.2862745098, alpha: 1)
    label.layer.shadowOffset = .init(width: 0, height: 7)
    label.layer.shadowOpacity = 0.6

    // doing this will stroke label with gradient
    targetView.layer.mask = label.layer
}

I am attaching screenshot which I have achieved and what I want to achieve.

I have achieved this so far.

I have achieved this so far.

This I want to achieve.

enter image description here


Solution

  • Here is my solution to solve this problem.

      func createGradientLabel(_ targetView : UIView, letter : String,fontsize : Int ,position : Int,_ startColor: UIColor = UIColor.init(named: "startColor")!, _ endColor: UIColor = UIColor.init(named: "endColor")!) {
        gradientLayer = CAGradientLayer()
        gradientLayer.frame = targetView.bounds
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        targetView.layer.addSublayer(gradientLayer)
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        
        // Create a label and add it as a subview
        let label = UILabel(frame: targetView.bounds)
        let strokeTextAttributes = [
            NSAttributedString.Key.strokeColor : UIColor.red,
          NSAttributedString.Key.foregroundColor : UIColor.clear,
          NSAttributedString.Key.strokeWidth : 8.0,
          NSAttributedString.Key.font : UIFont.setCustomFont(type: .Poppin_Bold, size: 30)]
          as [NSAttributedString.Key : Any]
    
        label.attributedText = NSMutableAttributedString(string: letter, attributes: strokeTextAttributes)
    
        targetView.addSubview(label)
        label.layer.shadowColor = #colorLiteral(red: 1, green: 0.3294117647, blue: 0.2862745098, alpha: 1)
        label.layer.shadowOffset = .init(width: 0, height: 7)
        label.layer.shadowOpacity = 0.8
    
        //This Line is the key
        targetView.layer.mask = label.layer
    }
    

    Result:

    enter image description here