CODEWITHSUNDEEP
iosswiftiphoneios13
Hammer Class
Hammer Class

Reputation: 371

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

Upvotes: 0

Views: 1722

Answers (2)

Hammer Class
Hammer Class

Reputation: 371

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

Upvotes: 1

matt
matt

Reputation: 535138

You cannot stroke with a gradient. The closest you can come is to paint the gradient as the background and use the drawing of text to mask to it. So your problem comes down simply to drawing the text as the mask, including the font and the shadow.

enter image description here

Upvotes: 1

Related Questions