学步园

This is a blog post by iOS Tutorial Team member Marin
Todorov, a software developer with 12+ years of experience, an independant iOS developer and the creator of Touch
Code Magazine.

Magazines, Core Text, and Brains!

Core Text is a text engine found in iOS 3.2+ and OSX 10.5+ that gives you fine-grained control over text layout and formatting.

It sits in the sweet spot between UIKit and Core Graphics/Quartz:

• In UIKit you
  have UILabel and you add a word or a text line on the screen by simple Drag-and-Drop in IB, but you cannot change the color of individual words.
• In Core
  Graphics/Quartz you can do pretty much everything the system is capable of, but you need to calculate the position of each glyph in your text and draw it on the screen.
• Core
  Text lies right between the two! You have complete control over position, layout, attributes like color and size, but Core Text takes care of everything else for you – from word wrap to font rendering and more.

Core Text is especially handy if you are creating a magazine or book app – which work great on the iPad!

This tutorial will get you started with Core Text by taking you through the process of creating a very simple Magazine application using Core Text – for Zombies!

You’ll learn how to:

• lay formatted text down on the screen;
• fine tune the text’s appearance;
• add images inside the text content;
• and finally create a magazine app, which loads text markup to easily control the formatting of the rendered text.
• eat brains! Ok just kidding, that’s only for the readers of this magazine.

To get the most out of this tutorial, you need to know the basics of iOS development first. If you are new to iOS development, you should check out some of the other
tutorials on this site first.

Without further ado, let’s make some happy zombies by making them their very own iPad magazine!

Setting up a Core Text project

Start up Xcode, go to File\New\New Project, choose the iOS\Application\View-based Application, and click Next. Name the project CoreTextMagazine, choose iPad as Device family, click Next, choose a folder to save your project in, and click Create.

Next thing you have to do is add the Core Text framework to the project:

1. Click on the project file in the Project navigator (the strip on the left hand side)
2. Next select your only target for this project “CoreTextMagazine” in the Targets list
3. Click on the “Build phases” tab
4. Expand the “Link Binary With Libraries” strip and click on the “+” button
5. Choose “CoreText.framework” from the list and click “Add”

That’s all the setup you need – now it’s time to start adding some code!

Adding a Core Text view

To get on track with Core Text as fast as possible you are going to create a custom UIView, which will use Core Text in its drawRect: method.

Go to File\New\New File, choose iOS\Cocoa Touch\Objective-C class, and click Next. Enter UIView for Subclass of, click Next, name the new class CTView, and click Save.

In CTView.h just above @interface add the following code to include the Core Text framework:

#import <CoreText/CoreText.h>

In the next step you’re going to set this new custom view as the main view in the application.

Select in the Project navigator the XIB file “CoreTextMagazineViewController.xib”, and bring up the Utilities strip in XCode (this appears whe you select the third tab in the View section of the top toolbar). From the Utilities strip, select the third icon
on the top toolbar to select the Identity tab.

Now just click in the white space in the Interface editor to select the window’s view – you should see in the Utilities strip in the field Class the text “UIView” appearing. Write in that field “CTView” and hit Enter.

Now your application will show your custom Core Text view when started, but we’ll do that in a moment – let’s first add the code to draw some text so we have what to test.

Open CTView.m and delete all the predefined methods. Enter the following code to draw a “Hello world” inside your view:

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
 
    CGMutablePathRef path = CGPathCreateMutable(); //1
    CGPathAddRect(path, NULL, self.bounds );
 
    NSAttributedString* attString = [[[NSAttributedString alloc]
        initWithString:@"Hello core text world!"] autorelease]; //2
 
    CTFramesetterRef framesetter =
        CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attString); //3
    CTFrameRef frame =
        CTFramesetterCreateFrame(framesetter,
            CFRangeMake(0, [attString length]), path, NULL);
 
    CTFrameDraw(frame, context); //4
 
    CFRelease(frame); //5
    CFRelease(path);
    CFRelease(framesetter);
}

Let’s discuss this bit by bit, using the comment markers above to designate each section: