UILabel with text of different color in Storyboard

Question

I try to set UILabel with text of different colors programmatically using,

NSMutableAttributedString * string = [[NSMutableAttributedString alloc] initWithString:@"firstsecondthird"];
[string addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0,5)];
[string addAttribute:NSForegroundColorAttributeName value:[UIColor greenColor] range:NSMakeRange(5,6)];
[string addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(11,5)];
[self.resultLabel setAttributedText:string];

I get what I expected. But, I am interested in doing all these stuff in storyboard,in main.storyboard. Can anyone help me in doing this.

This is what I want,

Jessicajessie

CHECK THIS-:#24154457 – Vaca

Please find the image attached for more info. – Jessicajessie

Check out my answer it you want like this #40149622 – Collusive

Answer 1

To achieve that in storyboard, make the label's text attributed, then select the range and change colors accordingly.

See the image below:

Hope this helps.

Integral

Answer 2

Using storyboard interface:

with Swift 3 & 4:
Programatically you can set label colors very easily.

extension NSMutableAttributedString {
        func setColorForText(textToFind: String, withColor color: UIColor) {
         let range: NSRange = self.mutableString.range(of: textToFind, options: .caseInsensitive)
          if range != nil {
            self.addAttribute(NSAttributedStringKey.foregroundColor, value: color, range: range)
          }
        }

}


func setColoredLabel() {
        var string: NSMutableAttributedString = NSMutableAttributedString(string: "My label with red blue and green colored text")
        string.setColorForText(textToFind: "red", withColor: UIColor.red)
        string.setColorForText(textToFind: "blue", withColor: UIColor.blue)
        string.setColorForText(textToFind: "green", withColor: UIColor.green)
        yourLabel.attributedText = string
    }

Result:

Telescope

Answer 3

You need change text style to attributed then you can select some characters and change their color. Please look on image

Prithee

Answer 4

If I am understanding your question correctly, then in storyboard most of the options have little plus buttons beside them so that you can customize the labels and attributes. Make sure that you are not using plain text but rather attributed text it is the first dropdown choice in the column.

I hope this helps, let me know if I'm not understanding properly!

Phobe

Please find the attached image for more info. – Jessicajessie

Answer 5

Checkout @IBInspectable and @IBDesignable. Create a Subclass or Extension for UILabel.

import UIKit

@IBDesignable class AttributedStringLabel: UILabel {

    @IBInspectable open var firstText: String = ""

    @IBInspectable open var firstColor: UIColor?
    @IBInspectable open var secondColor: UIColor?
    @IBInspectable open var thirdColor: UIColor?


    override func awakeFromNib() {
        super.awakeFromNib()

        let attrString :NSMutableAttributedString  = NSAttributedString([![string][1]][1]: firstText) as! NSMutableAttributedString

        attrString.addAttribute(NSForegroundColorAttributeName, value: firstColor! as UIColor, range: NSMakeRange(0, 5))
        attrString.addAttribute(NSForegroundColorAttributeName, value: secondColor! as UIColor, range: NSMakeRange(5, 6))
        attrString.addAttribute(NSForegroundColorAttributeName, value: thirdColor! as UIColor, range: NSMakeRange(11, 15))
        self.attributedText = attrString

    }


}

Below is the screenshot, you can customize code as you required, you can add Range whatever you want as IBInspectable variable.

Handball