iOS 6 NSAttributedString, Set Text Font, Foreground And Background Colors, StrikeThrough And Shadow – Part 1

Attributed strings make an association between characters and their attributes. Like NSString objects, there are two variations, NSAttributedString and NSMutableAttributedString.

Although previous versions of iOS supported attributed strings, it wasn’t until iOS 6 that controls such as buttons, labels, textfields and textviews defined a property to manage attributes.

Attributes are applied to a range of characters, so you can for example, set a strikethrough attribute for just a portion of a string. It’s also important to note that the default font for attributed string objects is Helvetica 12-point. Keep this in mind if you set the font attribute for a range other than the complete string.

The following attributes can be set with attributed strings:

NSString *const NSFontAttributeName;
NSString *const NSParagraphStyleAttributeName;
NSString *const NSForegroundColorAttributeName;
NSString *const NSBackgroundColorAttributeName;
NSString *const NSLigatureAttributeName;
NSString *const NSKernAttributeName;
NSString *const NSStrikethroughStyleAttributeName;
NSString *const NSUnderlineStyleAttributeName;
NSString *const NSStrokeColorAttributeName;
NSString *const NSStrokeWidthAttributeName;
NSString *const NSShadowAttributeName;
NSString *const NSVerticalGlyphFormAttributeName;

iOS 6 Attributed String Examples

In this post I will show examples of the following attributed types:

– NSForegroundColorAttributeName;
– NSBackgroundColorAttributeName;
– NSStrikethroughStyleAttributeName;
– NSShadowAttributeName;
– NSFontAttributeName

In Part 2 I will show examples with additional attributes.

Let’s start simple and create a string where we specify the font and background color, the output will as follows:

//-----------------------------
// Create attributed string
//-----------------------------
NSString *str = @"MobileDeveloperTips.com";
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:str];
 
// Set font, notice the range is for the whole string
UIFont *font = [UIFont fontWithName:@"Helvetica-Bold" size:18];
[attributedString addAttribute:NSFontAttributeName value:font range:NSMakeRange(0, [attributedString length])];
 
// Set background color, again for entire range
[attributedString addAttribute:NSBackgroundColorAttributeName
  value:[UIColor colorWithRed:0.103 green:0.305 blue:0.492 alpha:1.000]
  range:NSMakeRange(0, [attributedString length])];
 
//-----------------------------
// Define label
//-----------------------------
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 280, 80)];
[label setLineBreakMode:UILineBreakModeWordWrap];
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[label setTextAlignment:UITextAlignmentLeft];
 
// Set label text to attributed string
[label setAttributedText:attributedString];
 
[[self view] addSubview:label];

Let’s take it another step further, this time adding a strikethrough for a range of characters. Using the code above, add the following attribute:

// Set strikethrough for partial range
[attributedString addAttribute:NSStrikethroughStyleAttributeName
  value:[NSNumber numberWithInt:2]
  range:NSMakeRange(6, 9)];

Let’s create an example with a shadow. In order to do this, we need create a NSShadow object, which is new to iOS 6 and provides several properties to configure drop shadows for drawing operations. A shadow has three properties: color, blur radius and shadow offset. Change the values defined below to see how these properties change the look of the shadow:

NSString *str = @"MobileDeveloperTips.com";
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:str];
 
// Set font, notice the range is for the whole string
UIFont *font = [UIFont fontWithName:@"Helvetica-Bold" size:22];
[attributedString addAttribute:NSFontAttributeName value:font range:NSMakeRange(0, [attributedString length])];
 
// Set foreground color for entire range
[attributedString addAttribute:NSForegroundColorAttributeName
  value:[UIColor colorWithRed:0.989 green:0.822 blue:0.220 alpha:1.000]
  range:NSMakeRange(0, [attributedString length])];
 
// Define Shadow object
NSShadow *shadow = [[NSShadow alloc] init];
[shadow setShadowColor:[UIColor colorWithRed:0.053 green:0.088 blue:0.205 alpha:1.000]];
[shadow setShadowBlurRadius:4.0];
[shadow setShadowOffset:CGSizeMake(2, 2)];
 
[attributedString addAttribute:NSShadowAttributeName
  value:shadow
  range:NSMakeRange(0, [attributedString length])];
 
// Define label
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 280, 80)];
[label setLineBreakMode:UILineBreakModeWordWrap];
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[label setTextAlignment:UITextAlignmentLeft];
 
// Set label text to attributed string
[label setAttributedText:attributedString];
 
[[self view] addSubview:label];

In the next post on iOS 6 and attributed strings, I will show more examples of the various attributes and also show attributes settings on other controls.

  1. Best practical example I’ve seen yet after an hour of looking. Thanks

    • JB, glad it was helpful, you are welcome to share your experience on Twitter or your fav social network.

Comments are closed.