NSAttributedString and TTTAttributedLabel tutorial in iPhone

In most of the iOS applications we will encounter the situation of having a single UILabel with different colors, different font style and sizes. Before iOS 6, there are no official properties or classes for achieving this feature. But in iOS 6, apple added the extra power to UILabel called attributedText. Means we can achieve this feature using NSAttributedString class in iOS. In this tutorial I will explain how to get the multiple color, font and sizes for the single UILabel in iOS 6 and its earlier versions.

Open Xcode and proceed with the single view application template. In AppDelegate.m file modify the code such that ViewController becomes the root view of the navigation controller by adding the following code.

UINavigationController *navController = [[UINavigationController alloc]initWithRootViewController:self.viewController];
self.window.rootViewController = navController;

Now Open ViewController.xib file, change its orientation property to landscape and add the UILabel, UIButton outlets. We make this app to work only for landscape mode by selecting the options shown in the following figure. You will get this in the summary tab of main project target.

Connect the outlets with the associated objects in ViewController class by adding the following code.

@interface ViewController : UIViewController
@property (nonatomic, strong) IBOutlet UILabel *attrLabel;
– (IBAction)next:(id)sender;
@end

In viewDidLoad method of ViewController.m file, add the following lines of code.

self.title = @"For iOS 6 & later";
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"Using NSAttributed String"];
[str addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0,5)];
[str addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(6,12)];
[str addAttribute:NSForegroundColorAttributeName value:[UIColor greenColor] range:NSMakeRange(19,6)];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"Arial-BoldItalicMT" size:30.0] range:NSMakeRange(0, 5)];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue-Bold" size:30.0] range:NSMakeRange(6, 12)];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"Courier-BoldOblique" size:30.0] range:NSMakeRange(19, 6)];
attrLabel.attributedText = str;

In this code we are performing actions such as giving different colors, fonts to different words using NSAttributedString method addAttrubute:value:range. Now compile and run the code, the following screen will appear.

The above code will be valid only for iOS 6 and later versions. If we want to implement the same feature in earlier versions, we need to use some third party classes like TTTAttributedLabel. We can find this class at https://github.com/mattt/TTTAttributedLabel

Download the content in the link and add it to your project. Also add CoreText.framework to the project. Now compile and run, make sure there are no errors. To implementing the UILabel with multi color and font feature using TTTAttributedLabel class, we need a new controller class. Add a new class and name it as NextViewController. Now add the following lines of code in next: action method of ViewController.m file.

NextViewController *nextController = [[NextViewController alloc]initWithNibName:@"NextViewController" bundle:nil];[self.navigationController pushViewController:nextController animated:YES];

Open NextViewController.xib file, add the UILabel outlet and change its class name as TTTAttributedLabel. Also link it with the associated object in NextViewController.h file.

In viewDidLoad method of NextViewController.m file, add the following lines of code.

self.title = @"For iOS 5.1 & earlier";
NSString *text = @"Using TTTAttributed Label";
[attrLabel setText:text afterInheritingLabelAttributesAndConfiguringWithBlock:^NSMutableAttributedString*(NSMutableAttributedString *mutableAttributedString)
{
NSRange redRange = [text rangeOfString:@"Using"];
NSRange blueRange = [text rangeOfString:@"TTTAttributed"];
NSRange greenRange = [text rangeOfString:@"Label"];

UIFont *courierFont = [UIFont fontWithName:@"Courier-BoldOblique" size:30];
CTFontRef font_1 = CTFontCreateWithName((__bridge CFStringRef)courierFont.fontName, courierFont.pointSize, NULL);
UIFont *arialFont = [UIFont fontWithName:@"Arial-BoldItalicMT" size:30];
CTFontRef font_2 = CTFontCreateWithName((__bridge CFStringRef)arialFont.fontName, arialFont.pointSize, NULL);
UIFont *helvFont = [UIFont fontWithName:@"HelveticaNeue-Bold" size:30];
CTFontRef font_3 = CTFontCreateWithName((__bridge CFStringRef)helvFont.fontName, helvFont.pointSize, NULL);

if (redRange.location != NSNotFound)
{
[mutableAttributedString addAttribute:(NSString *)kCTForegroundColorAttributeName value:(id)[UIColor redColor].CGColor range:redRange];
[mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName value:(__bridge id)font_1 range:redRange];
}
if (blueRange.location != NSNotFound)
{
[mutableAttributedString addAttribute:(NSString *)kCTForegroundColorAttributeName value:(id)[UIColor blueColor].CGColor range:blueRange];
[mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName value:(__bridge id)font_2 range:blueRange];
}
if (greenRange.location != NSNotFound)
{
[mutableAttributedString addAttribute:(NSString *)kCTForegroundColorAttributeName value:(id)[UIColor greenColor].CGColor range:greenRange];
[mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName value:(__bridge id)font_3 range:greenRange];
}
return mutableAttributedString;
}];
[attrLabel sizeToFit];

Now build and run the code, after tapping the next button in first screen, you will see the effect of the above code as follows.

Leave a Reply