Question 68306 in IOS Swift Question posted in
The official documentation can be found here.

Create multicolor single letter (character) with Swift 5 – Ios swift

I have a requirement to create colourful string where each letter should have multicolors / rainbow colors. Refer the attached image for better understanding. This need to create using Swift 5+ (UIKit) coding for an iOS app’s dashboard.

In web, there are multiple solutions for multicolored string, but each letter of the string contain single color only, therefore they won’t served my purpose. Any suggestions must be appreciated.

multicolored letter/character prototype

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    With the help of Zeeshan Ahmed and Shadowrun, I able to solve my problem. My final solution is,

    override func viewDidLoad() {
        super.viewDidLoad()
            
        let gradient = CAGradientLayer()
        gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor, UIColor.blue.cgColor]
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 0, y: 1)
            
        // bgView is a custom view with 100X100 sized
        gradient.frame = bgView.bounds
        bgView.layer.addSublayer(gradient)
        
        let label = UILabel(frame: bgView.bounds)
        label.text = "8"
        label.font = UIFont.boldSystemFont(ofSize: 90)
        label.textAlignment = .center
            
        bgView.addSubview(label)
        bgView.mask = label
   }

    And the expected output should be, Gradient single letter

    Kudos to all.


  2. 0

    The steps are: make a CAGradientLayer, then:

    view.layer.addSublayer(gradient)
view.addSubview(label)
view.mask = label
    Login or Signup to reply.
  3. 0 
    class LoginViewController: UIViewController {
    
    lazy var gradientBG:GradientBg = {
        let bg = GradientBg()
        return bg
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        gradientBG.frame = view.frame
        view.addSubview(gradientBG)
        
        let label = UILabel(frame: view.bounds)
        label.text = "Hello World"
        label.font = UIFont.boldSystemFont(ofSize: 30)
        label.textAlignment = .center
        gradientBG.addSubview(label)
        gradientBG.mask = label
    }
}

class GradientBg:UIView {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // Create a gradient layer
        let gradient = CAGradientLayer()

        // gradient colors in order which they will visually appear
        gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]

        // Gradient from left to right
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)

        // set the gradient layer to the same size as the view
        gradient.frame = bounds
        // add the gradient layer to the views layer for rendering
        self.layer.addSublayer(gradient)
        
        // Create a label and add it as a subview
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search