Format text in iOS6 : Attributed Strings

In the past it's been relatively complicated to do simple text formatting in a string. Until iOS 6, this was only possible using Core Text. However, with the release of iOS 6 text formatting is now easy with the addition of attributed strings.

Update: Dec 8, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new Single View Application. For product name, use AttributedStringsDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards is deselected and Use Automatic Reference Counting checkboxes is selected (Unit Tests will not be necessary for this project).

First, create The User Interface. Select the ViewController.xib and drag a Label to the View. Resize the Label so you can enter multiple lines. Select the Label and go to the Attributes Inspector. Change the Text Style from Plain to Attributed. The View should look like this.

Go to ViewController.m. Add the following property

@property (nonatomic, weak) IBOutlet UILabel *label;

Go to ViewController.m. Add the following lines to ViewDidLoad

self.view.backgroundColor = [UIColor whiteColor];
NSDictionary *attributes = @{NSForegroundColorAttributeName: [UIColor purpleColor], NSBackgroundColorAttributeName: [UIColor yellowColor], NSUnderlineStyleAttributeName: @1 };

NSAttributedString *myString = [[NSAttributedString alloc] initWithString:@"Testing Attributed Strings" attributes:attributes];
self.label.attributedText = myString;

You define a number of attributes in a dictionary. Here you set a foreground color of purple, a background color of yellow , and make the text underlined with a width of 1. Then you make a attributed string, where the attributes will be loaded. Finally, you point the attributedText property of the label to the attributed string. Build and Run.

Next, add some shadow to the text. Add the following lines to ViewdidLoad before the NSDictionary line.

NSShadow *textShadow = [[NSShadow alloc] init];
textShadow.shadowColor = [UIColor darkGrayColor];
textShadow.shadowBlurRadius = 3.0;
textShadow.shadowOffset = CGSizeMake(5,5);

We create a shadow object with a darkGray color, some blurring and a offset of 5 points off the original text. Add the shadow attribute to the dictionary


NSDictionary *attributes = @{NSForegroundColorAttributeName: [UIColor purpleColor], NSBackgroundColorAttributeName: [UIColor yellowColor], NSUnderlineStyleAttributeName: @1, NSShadowAttributeName: textShadow };

Build and Run,

Next, we create a NSMutableAttributedString so we can apply different attributes to parts of our string. remove all previously created code and change ViewDidLoad in

self.view.backgroundColor = [UIColor whiteColor];

NSDictionary *firstAttributes = @{NSForegroundColorAttributeName: [UIColor blueColor], NSBackgroundColorAttributeName: [UIColor yellowColor], NSUnderlineStyleAttributeName: @1 };
NSDictionary *secondAttributes = @{ NSForegroundColorAttributeName: [UIColor grayColor], NSBackgroundColorAttributeName: [UIColor blueColor], NSStrikethroughStyleAttributeName: @1 };
NSDictionary *thirdAttributes = @{ NSForegroundColorAttributeName: [UIColor greenColor], NSBackgroundColorAttributeName: [UIColor blackColor] };

NSMutableAttributedString *myString = [[NSMutableAttributedString alloc] initWithString:@"Testing Attributed Strings"];
[myString setAttributes:firstAttributes range:NSMakeRange(0, 7)]; [myString setAttributes:secondAttributes range:NSMakeRange(8,10)]; [myString setAttributes:thirdAttributes range:NSMakeRange(19, 7)];

self.label.attributedText = myString;

Here we apply three different dictionaries, each containing different attributes. Next, we create a mutable string where we can apply the different attributes.Build and Run.

You can download the source code of the AttributedStringsDemo at the ioscreator repository on github.