December 11, 2013

Create Rich Text Features in iOS with Text Kit

By

Built on top of the Core Text framework sits Text Kit, a high-level text layout and rendering API in iOS 7. Text Kit makes text much easier to work with than having to drop down to Core Text. It allows you to implement rich, text-based applications such as magazine readers or document editors that often require custom text styles and layouts. Features such as these were possible prior to iOS 7, but required complex implementations. However, with Text Kit, they are a breeze to create:

TKIntro

Text Kit’s architecture separates text storage from layout and display as illustrated below:

image1

  • NSTextContainer – Provides the coordinate system and geometry that is used to layout text.
  • NSLayoutManager – Lays out text by turning text into glyphs.
  • NSTextStorage – Holds the text data, as well as handles batch text property updates.

These three classes are applied to a view that renders text. The built-in text handling views, such as UITextView, UITextField, and UILabel already have them set, but you can create and apply them to any UIView instance as well.

The NSTextStorage instance communicates any changes to the text – such as changes to characters or their attributes – to the layout manager for display. NSTextStorage inherits from NSMutableAttributedString, allowing changes to text attributes to be specified in batches between BeginEditing and EndEditing calls.

For example, the following code snippet specifies a change to the foreground and background colors, respectively, and targets particular ranges:

textView.TextStorage.BeginEditing ();
textView.TextStorage.AddAttribute(UIStringAttributeKey.ForegroundColor, UIColor.Green, new NSRange(200, 400));
textView.TextStorage.AddAttribute(UIStringAttributeKey.BackgroundColor, UIColor.Black, new NSRange(210, 300));
textView.TextStorage.EndEditing ();

After EndEditing is called, the changes are sent to the layout manager, which in turn performs any necessary layout and rendering calculations for the text to be displayed in the view, as shown:

image2

In addition to manipulating text attributes, Text Kit also makes it easy to control layout. This simplifies the once difficult process of creating custom text layouts, making it easier to implement.

For example, we can create multiple text containers for the layout manager to use for a multi-column layout by following a few easy steps:

  1. Create a text storage instance
  2. var storage = new NSTextStorage ();
    NSDictionary options = null;
    NSError error = null;
    storage.ReadFromFile (NSUrl.FromFilename ("Text.txt"), new NSDictionary (), ref options, ref error);
    
  3. Create a layout manager
  4. var layoutManager = new NSLayoutManager ();
    
  5. Add the layout manager to the text storage
  6. storage.AddLayoutManager (layoutManager);
    
  7. Create a text container
  8. var leftContainer = new NSTextContainer (size);
    
  9. Add the text container to the layout manager
  10. layoutManager.AddTextContainer (leftContainer);
    
  11. Create a text view with the text container
  12. var leftColumn = new UITextView (
      new RectangleF (new PointF (padding, padding), size),
      leftContainer);
    leftColumn.AutoresizingMask = UIViewAutoresizing.All;
    leftColumn.ScrollEnabled = false;
    View.Add (leftColumn);
    
  13. Repeat steps 4 – 6 for an additional column
  14. // create another text container
    var rightContainer = new NSTextContainer (size);
    // add second text container to layout manager
    layoutManager.AddTextContainer (rightContainer);
    // init text view with second text container
    var rightColumn = new UITextView (
      new RectangleF (new PointF (padding * 2 + size.Width, padding), size),
      rightContainer);
    rightColumn.AutoresizingMask = UIViewAutoresizing.All;
    View.Add (rightColumn);
    

With the layout containers defining the area to draw the text for each text view, we get a nice 2 column text layout as shown below:

image3

As you can see, having Text Kit now makes creating text-based features much more approachable than in the past. You can download the code from this post here to give it a try and see what interesting text scenarios you can come up with.

Discuss this blog post in the Xamarin Forums

TwitterFacebookGoogle+LinkedInEmail