UILabel with text of two different colors

Question

I want to display a string like this in a UILabel:

There are 5 results.

Where the number 5 is red in color and the rest of the string is black.

How can I do this in code?

@EmptyStack This is certainly **not** the case since iOS 4 supports NSAttributedString. See my answer below. — , Jun 28 '11 at 09:51

score 224 · Answer 1 · edited Apr 30 '14 at 17:34

224

The way to do it is to use NSAttributedString like this:

NSMutableAttributedString *text = 
 [[NSMutableAttributedString alloc] 
   initWithAttributedString: label.attributedText];

[text addAttribute:NSForegroundColorAttributeName 
             value:[UIColor redColor] 
             range:NSMakeRange(10, 1)];
[label setAttributedText: text];

I created a UILabel extension to do it.

edited Apr 30 '14 at 17:34

Alex Cio

6,014
5
44
74

answered Mar 01 '13 at 20:32

João Costa

2,355
1
14
7

Can I add targets on it. Thnaks – Jagdev Sendhav May 08 '15 at 10:58
I just added your extension to my project! Thx! – Zeb Jun 04 '15 at 08:00
Nice Category for UILabel. Thanks a lot. This should be the accepted answer. – Pradeep Reddy Kypa Sep 09 '15 at 09:53

anoop4real · Answer 2 · 2018-05-30T06:58:42.653

I have done this by creating a category for NSMutableAttributedString

-(void)setColorForText:(NSString*) textToFind withColor:(UIColor*) color
{
    NSRange range = [self.mutableString rangeOfString:textToFind options:NSCaseInsensitiveSearch];

    if (range.location != NSNotFound) {
        [self addAttribute:NSForegroundColorAttributeName value:color range:range];
    }
}

Use it like

- (void) setColoredLabel
{
    NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"Here is a red blue and green text"];
    [string setColorForText:@"red" withColor:[UIColor redColor]];
    [string setColorForText:@"blue" withColor:[UIColor blueColor]];
    [string setColorForText:@"green" withColor:[UIColor greenColor]];
    mylabel.attributedText = string;
}

SWIFT 3

extension NSMutableAttributedString{
    func setColorForText(_ textToFind: String, with color: UIColor) {
        let range = self.mutableString.range(of: textToFind, options: .caseInsensitive)
        if range.location != NSNotFound {
            addAttribute(NSForegroundColorAttributeName, value: color, range: range)
        }
    }
}

USAGE

func setColoredLabel() {
    let string = NSMutableAttributedString(string: "Here is a red blue and green text")
    string.setColorForText("red", with: #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
    string.setColorForText("blue", with: #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1))
    string.setColorForText("green", with: #colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1))
    mylabel.attributedText = string
}

SWIFT 4 @kj13 Thanks for notifying

// If no text is send, then the style will be applied to full text
func setColorForText(_ textToFind: String?, with color: UIColor) {

    let range:NSRange?
    if let text = textToFind{
        range = self.mutableString.range(of: text, options: .caseInsensitive)
    }else{
        range = NSMakeRange(0, self.length)
    }
    if range!.location != NSNotFound {
        addAttribute(NSAttributedStringKey.foregroundColor, value: color, range: range!)
    }
}

I have did more experiments with attributes and below are the results, here is the SOURCECODE

Here is the result

You need to create a new Category for NSMutableAttributedString with the method...anyways I added this sample to github, you can grab and check it https://github.com/anoop4real/NSMutableAttributedString-Color — anoop4real, Dec 22 '15 at 16:46
But i need to set the color of all alphabet with incasesensitive in a string ....like all "e" in red color of the whole string — Ravi Ojha, Dec 23 '15 at 03:29
No visible @interface for 'NSMutableAttributedString' declares the selector 'setColorForText:withColor:' — ekashking, Apr 01 '18 at 17:59
I got error 'Use of unresolved identifier 'NSForegroundColorAttributeName' with Swift4.1, but I replace 'NSForegroundColorAttributeName' to 'NSAttributedStringKey.foregroundColor' and building correctly. — kj13, May 29 '18 at 04:02
@kj13 Thanks for notifying, I updated the answer and added a few more styles — anoop4real, May 30 '18 at 07:00
Swift 4.2: `addAttribute(NSAttributedString.Key.underlineStyle, value:NSUnderlineStyle.thick.rawValue, range: range!)` BTW, this control is brilliant! — ICL1901, Feb 14 '19 at 20:08

Hardik Mamtora · Answer 3 · 2015-12-18T06:41:27.000

Here you go

NSMutableAttributedString * string = [[NSMutableAttributedString alloc] initWithString:lblTemp.text];
[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)];
lblTemp.attributedText = string;

Krunal · Answer 4 · 2017-10-25T15:18:01.240

Swift 4

// An attributed string extension to achieve colors on text.
extension NSMutableAttributedString {

    func setColor(color: UIColor, forText stringValue: String) {
       let range: NSRange = self.mutableString.range(of: stringValue, options: .caseInsensitive)
       self.addAttribute(NSAttributedStringKey.foregroundColor, value: color, range: range)
    }

}

// Try it with label
let label = UILabel()
label.frame = CGRect(x: 70, y: 100, width: 260, height: 30)
let stringValue = "There are 5 results."
let attributedString: NSMutableAttributedString = NSMutableAttributedString(string: stringValue)
attributedString.setColor(color: UIColor.red, forText: "5")
label.font = UIFont.systemFont(ofSize: 26)
label.attributedText = attributedString
self.view.addSubview(label)

Result

enter image description here

Swift 3

func setColoredLabel() {
        var string: NSMutableAttributedString = NSMutableAttributedString(string: "redgreenblue")
        string.setColor(color: UIColor.redColor(), forText: "red")
        string.setColor(color: UIColor.greenColor(), forText: "green")
        string.setColor(color: UIColor.blueColor(, forText: "blue")
        mylabel.attributedText = string
    }


func setColor(color: UIColor, forText stringValue: String) {
        var range: NSRange = self.mutableString.rangeOfString(stringValue, options: NSCaseInsensitiveSearch)
        if range != nil {
            self.addAttribute(NSForegroundColorAttributeName, value: color, range: range)
        }
    }

Result:

enter image description here

score 13 · Answer 5 · edited Mar 16 '16 at 11:24

//NSString *myString = @"I have to replace text 'Dr Andrew Murphy, John Smith' ";
NSString *myString = @"Not a member?signin";

//Create mutable string from original one
NSMutableAttributedString *attString = [[NSMutableAttributedString alloc] initWithString:myString];

//Fing range of the string you want to change colour
//If you need to change colour in more that one place just repeat it
NSRange range = [myString rangeOfString:@"signin"];
[attString addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithRed:(63/255.0) green:(163/255.0) blue:(158/255.0) alpha:1.0] range:range];

//Add it to the label - notice its not text property but it's attributeText
_label.attributedText = attString;

Good solution especially for localized strings. Many thanks! — Raman Shyniauski, Oct 21 '20 at 13:21

score 7 · Answer 6 · answered Mar 01 '13 at 20:38

Since iOS 6, UIKit supports drawing attributed strings, so no extension or replacement is needed.

From UILabel:

@property(nonatomic, copy) NSAttributedString *attributedText;

You just need to build up your NSAttributedString. There are basically two ways:

Append chunks of text with the same attributes - for each part create one NSAttributedString instance and append them to one NSMutableAttributedString
Create attributed text from plain string and then add attributed for given ranges – find the range of your number (or whatever) and apply different color attribute on that.

score 7 · Answer 7 · answered Feb 25 '16 at 09:16

Anups answer in swift. Can be reused from any class.

In swift file

extension NSMutableAttributedString {

    func setColorForStr(textToFind: String, color: UIColor) {

        let range = self.mutableString.rangeOfString(textToFind, options:NSStringCompareOptions.CaseInsensitiveSearch);
        if range.location != NSNotFound {
            self.addAttribute(NSForegroundColorAttributeName, value: color, range: range);
        }

    }
}

In Some view controller

let attributedString: NSMutableAttributedString = NSMutableAttributedString(string: self.labelShopInYourNetwork.text!);
attributedString.setColorForStr("YOUR NETWORK", color: UIColor(red: 0.039, green: 0.020, blue: 0.490, alpha: 1.0));
self.labelShopInYourNetwork.attributedText = attributedString;

Mostafa Sultan · Answer 8 · 2019-01-14T10:37:18.513

My answer has also the option to color all the occurrence of a text not only one occurrence of it : "wa ba wa ba dubdub" , you can color all the occurrence of wa not only the first occurrence like the accepted answer.

extension NSMutableAttributedString{
    func setColorForText(_ textToFind: String, with color: UIColor) {
        let range = self.mutableString.range(of: textToFind, options: .caseInsensitive)
        if range.location != NSNotFound {
            addAttribute(NSForegroundColorAttributeName, value: color, range: range)
        }
    }

    func setColorForAllOccuranceOfText(_ textToFind: String, with color: UIColor) {
        let inputLength = self.string.count
        let searchLength = textToFind.count
        var range = NSRange(location: 0, length: self.length)

        while (range.location != NSNotFound) {
            range = (self.string as NSString).range(of: textToFind, options: [], range: range)
            if (range.location != NSNotFound) {
                self.addAttribute(NSForegroundColorAttributeName, value: color, range: NSRange(location: range.location, length: searchLength))
                range = NSRange(location: range.location + range.length, length: inputLength - (range.location + range.length))
            }
        }
    }
}

Now you can do this :

let message = NSMutableAttributedString(string: "wa ba wa ba dubdub")
message.setColorForText(subtitle, with: UIColor.red) 
// or the below one if you want all the occurrence to be colored 
message.setColorForAllOccuranceOfText("wa", with: UIColor.red) 
// then you set this attributed string to your label :
lblMessage.attributedText = message

Updated my answer, have a nice day :) – Mostafa Sultan Jan 14 '19 at 10:37 — Mostafa Sultan, Jan 14 '19 at 10:37
Great! This should be higher up! – MJQZ1347 Sep 03 '20 at 21:16 — MJQZ1347, Sep 03 '20 at 21:16

score 4 · Answer 9 · answered Jun 28 '11 at 09:50

Having a UIWebView or more than one UILabel could be considered overkill for this situation.

My suggestion would be to use TTTAttributedLabel which is a drop-in replacement for UILabel that supports NSAttributedString. This means you can very easily apply differents styles to different ranges in a string.

score 4 · Answer 10 · answered Jun 28 '11 at 10:01

For displaying short, formatted text that doesn't need to be editable, Core Text is the way to go. There are several open-source projects for labels that use NSAttributedString and Core Text for rendering. See CoreTextAttributedLabel or OHAttributedLabel for example.

score 3 · Answer 11 · answered Mar 28 '13 at 05:59

3

JTAttributedLabel (by mystcolor) lets you use the attributed string support in UILabel under iOS 6 and at the same time its JTAttributedLabel class under iOS 5 through its JTAutoLabel.

answered Mar 28 '13 at 05:59

Johan Kool

15,637
8
64
81

score 3 · Answer 12 · answered Dec 10 '17 at 18:10

Swift 4 and above: Inspired by anoop4real's solution, here's a String extension that can be used to generate text with 2 different colors.

extension String {

    func attributedStringForPartiallyColoredText(_ textToFind: String, with color: UIColor) -> NSMutableAttributedString {
        let mutableAttributedstring = NSMutableAttributedString(string: self)
        let range = mutableAttributedstring.mutableString.range(of: textToFind, options: .caseInsensitive)
        if range.location != NSNotFound {
            mutableAttributedstring.addAttribute(NSAttributedStringKey.foregroundColor, value: color, range: range)
        }
        return mutableAttributedstring
    }
}

Following example changes color of asterisk to red while retaining original label color for remaining text.

label.attributedText = "Enter username *".attributedStringForPartiallyColoredText("*", with: #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1))

score 3 · Answer 13 · edited May 23 '17 at 12:26

3

NSAttributedString is the way to go. The following question has a great answer that shows you how to do it How do you use NSAttributedString

edited May 23 '17 at 12:26

Community

1
1

answered Jun 28 '11 at 06:12

werner

859
4
8

score 2 · Answer 14 · answered Oct 03 '16 at 19:13

2

There is a Swift 3.0 solution

extension UILabel{


    func setSubTextColor(pSubString : String, pColor : UIColor){
        let attributedString: NSMutableAttributedString = NSMutableAttributedString(string: self.text!);
        let range = attributedString.mutableString.range(of: pSubString, options:NSString.CompareOptions.caseInsensitive)
        if range.location != NSNotFound {
            attributedString.addAttribute(NSForegroundColorAttributeName, value: pColor, range: range);
        }
        self.attributedText = attributedString

    }
}

And there is an example of call :

let colorString = " (string in red)"
self.mLabel.text = "classic color" + colorString
self.mLabel.setSubTextColor(pSubString: colorString, pColor: UIColor.red)

answered Oct 03 '16 at 19:13

Kevin ABRIOUX

16,507
12
93
99

Hi, how do I do this if I want to add two different colorStrings? I tried using your example and just add another one, but it still only colors one of them.. – Erik Auranaune Jan 21 '17 at 18:27
Try this : let colorString = " (string in red)" let colorStringGreen = " (string in green)" self.mLabel.text = "classic color" + colorString + colorStringGreen self.mLabel.setSubTextColor(pSubString: colorString, pColor: UIColor.red) self.mLabel.setSubTextColor(pSubString: colorStringGreen, pColor: UIColor.green) – Kevin ABRIOUX Jan 21 '17 at 18:30
This is strange, it still doesn't change both: https://s24.postimg.org/ds0rpyyut/Screen_Shot_2017_01_21_at_19_52_51.png. – Erik Auranaune Jan 21 '17 at 18:54
A problem is that if the two strings are the same, it only colors one of them, look here: http://pastebin.com/FJZJTpp3. You have a fix for this aswell? – Erik Auranaune Jan 21 '17 at 19:23

score 2 · Answer 15 · edited Feb 11 '21 at 10:49

For Xamarin users I have a static C# method where I pass in an array of strings, an array of UIColours and array of UIFonts (they will need to match in length). The attributed string is then passed back.

see:

public static NSMutableAttributedString GetFormattedText(string[] texts, UIColor[] colors, UIFont[] fonts) {

  NSMutableAttributedString attrString = new NSMutableAttributedString(string.Join("", texts));
  int position = 0;

  for (int i = 0; i < texts.Length; i++) {
    attrString.AddAttribute(new NSString("NSForegroundColorAttributeName"), colors[i], new NSRange(position, texts[i].Length));

    var fontAttribute = new UIStringAttributes {
      Font = fonts[I]
    };

    attrString.AddAttributes(fontAttribute, new NSRange(position, texts[i].Length));

    position += texts[i].Length;
  }

  return attrString;

}

score 2 · Answer 16 · answered Aug 05 '19 at 11:11

2

In my case I'm using Xcode 10.1. There is a option of switching between plain text and Attributed text in Label text in Interface Builder

Hope this may help someone else..!

answered Aug 05 '19 at 11:11

BharathRao

1,846
1
18
28

2

It looks like XCode 11.0 broke the Attributed Text editor. So, I tried using TextEdit to create the text then pasted it into Xcode and it worked surprisingly well. – Brainware Nov 27 '19 at 08:16

score 0 · Answer 17 · answered Oct 04 '16 at 12:57

extension UILabel{

    func setSubTextColor(pSubString : String, pColor : UIColor){


        let attributedString: NSMutableAttributedString = self.attributedText != nil ? NSMutableAttributedString(attributedString: self.attributedText!) : NSMutableAttributedString(string: self.text!);


        let range = attributedString.mutableString.range(of: pSubString, options:NSString.CompareOptions.caseInsensitive)
        if range.location != NSNotFound {
            attributedString.addAttribute(NSForegroundColorAttributeName, value: pColor, range: range);
        }
        self.attributedText = attributedString

    }
}

score 0 · Answer 18 · answered Nov 05 '16 at 16:58

My own solution was created a method like the next one:

-(void)setColorForText:(NSString*) textToFind originalText:(NSString *)originalString withColor:(UIColor*)color andLabel:(UILabel *)label{

NSMutableAttributedString *attString = [[NSMutableAttributedString alloc] initWithString:originalString];
NSRange range = [originalString rangeOfString:textToFind];

[attString addAttribute:NSForegroundColorAttributeName value:color range:range];

label.attributedText = attString;

if (range.location != NSNotFound) {
    [attString addAttribute:NSForegroundColorAttributeName value:color range:range];
}
label.attributedText = attString; }

It worked with just one different color in the same text but you can adapt it easily to more colores in the same sentence.

score 0 · Answer 19 · answered Jun 06 '17 at 10:48

By using below code you can set multiple colors based on word.

NSMutableArray * array = [[NSMutableArray alloc] initWithObjects:@"1 ball",@"2 ball",@"3 ball",@"4 ball", nil];    
NSMutableAttributedString *attStr = [[NSMutableAttributedString alloc] init];
for (NSString * str in array)
 {
    NSMutableAttributedString * textstr = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@ ,",str] attributes:@{NSForegroundColorAttributeName :[self getRandomColor]}];
     [attStr appendAttributedString:textstr];
  }
UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(10, 300, 300, 30)];
lab.attributedText = attStr;
[self.view addSubview:lab];

-(UIColor *) getRandomColor
{
   CGFloat redcolor = arc4random() % 255 / 255.0;
   CGFloat greencolor = arc4random() % 255 / 255.0;
   CGFloat bluencolor = arc4random() % 255 / 255.0;
   return  [UIColor colorWithRed:redcolor green:greencolor blue:bluencolor alpha:1.0];
}

score 0 · Answer 20 · answered Jul 22 '19 at 07:20

0

SwiftRichString works perfect! You can use + to concatenate two attributed string

answered Jul 22 '19 at 07:20

fujianjin6471

5,168
1
36
32

UILabel with text of two different colors

20 Answers20

Linked

Related