iPhone用coreText(核心文本)给文字进行排版

hello!大家都知道UILabel,UITextView这些个控件,只能显示简单的文本格式,如果想要图文混排等复杂的效果,就要用到CoreText框架来实现,不过有些个复杂。

首先是要了解一下coretext的概念:

The Core Text framework is an advanced, low-level technology for laying out text and handling fonts. Designed for high performance and ease of use, the Core Text layout engine is up to twice as fast as ATSUI (Apple Type Services for Unicode Imaging). The Core Text layout API is simple, consistent, and tightly integrated with Core Foundation, Core Graphics, and Cocoa.

核心文本框架是一种先进的,低层次的技术奠定了文本和字体处理。专为高性能和易用性,的核心文本布局引擎快两倍,为ATSUI (苹果类型服务为Unicode的影像) 。核心文本布局API很简单,一致和紧密集成的Core Foundation, Core Graphics和Cocoa。

Core Text is not meant to replace the Cocoa text system, although it provides the underlying implementation for many Cocoa text technologies. If you can deal with high-level constructs, such as text views, you can probably use Cocoa. For this reason, Cocoa developers typically have no need to use Core Text directly. Carbon developers, on the other hand, will find Core Text faster and easier to use, in many cases, than preexisting OS X text layout and font APIs.

核心文本并不是要取代Cocoa文本系统,虽然它提供了许多Cocoa文本技术的底层实现。如果你能处理高层次的结构,如viewtext,你也许可以使用cocoa。出于这个原因, Cocoa开发通常没有必要直接使用核心文本。 Carbon开发,另一方面,在许多情况下,比预先存在的OS X的文本布局和字体的API ,会发现核心内容更快,更容易使用。


找了一遍讲的比较详细的文章来讲cocotext核心文本,这个已经是比较详细的了:

来自:http://www.raywenderlich.com/4147/core-text-tutorial-for-ios-making-a-magazine-app


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 Core Text tutorial for iOS will get you started 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 Core Text tutorial, you need to know the basics of iOS development first. If you are new to iOS development, you should check out some of theother 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”

Adding the Core Text Framework to your Xcode 4 project

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.

Setting class type in Xcode 4 Identity Inspector

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:

  1. Here you need to create a path which bounds the area where you will be drawing text. Core Text on the Mac supports different shapes like rectangles and circles, but for the moment iOS supports only rectangular shape for drawing with Core Text. In this simple example, you’ll use the entire view bounds as the rectangle where you will be drawing by creating a CGPath reference from self.bounds.
  2. In Core Text you won’t be using NSString, but rather NSAttributedString, as shown here. NSAttributedString is a very powerful NSString derivate class, which allows you apply formatting attributes to text. For the moment we won’t be using formatting – this just creates a string holding plain text.
  3. CTFramesetter is the most important class to use when drawing with Core Text. It manages your font references and your text drawing frames. For the moment what you need to know is that CTFramesetterCreateWithAttributedString creates a CTFramesetter for you, retains it and initializes it with the supplied attributed string. In this section, after you have the framesetter you create a frame, you give the CTFramesetterCreateFrame a range of the string to render (we choose the entire string here) and the rectangle where the text will appear when drawn.
  4. Here CTFrameDraw draws the supplied frame in the given context.
  5. Finally, all the used objects are released.

Note that when working with Core Text classes you use a set of functions like CTFramesetterCreateWithAttributedString and CTFramesetterCreateFrame instead of directly using Objective-C objects.

You might think to yourself “Why would I ever want to use C again, I thought I was done with that since we have Objective-C?!”

Well, many of the low level libraries on iOS are written in plain C for speed and simplicity. Don’t worry though, you’ll find the Core Text functions pretty easy to work with.

Just one important thing to remember though: don’t forget to always use CFRelease on the references you get from functions which have “Create” in their name.

Believe it or not, that’s all you need to draw some simple text using Core Text! Hit Run and see the result.

Core Text flipping text upside down

Well that does not seem right, does it? Like many of the low level APIs, Core Text uses a Y-flipped coordinate system. To make it even worse, the content is also rendered flipped downwards! Because of this, keep in mind that if you mix UIKit drawing and Core Text drawing, you might get weird results.

Let’s fix the content orientation! Add the following code just after this line “CGContextRef context = UIGraphicsGetCurrentContext();”:

// Flip the coordinate system
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

This is very simple code, which just flips the content by applying a transformation to the view’s context. Just copy/paste it each time you do drawing with CT.

Now hit Run again – congrats on your first Core Text app!

Simple example of using Core Text

The Core Text Object Model

If you are a bit confused about the CTFramesetter and the CTFrame – that’s OK. Here I’ll make a short detour to explain how Core Text renders text content.

Here’s what the Core Text object model looks like:

Core Text Class Hierarchy

You create a CTFramesetter reference and you provide it with NSAttributedString. At this point, an instance of CTTypesetter is automatically created for you, a class that manages your fonts. Next you use the CTFramesetter to create one or more frames in which you will be rendering text.

When you create a frame you tell it the subrange of text that will be rendered inside its rectangle. Core Text then automatically creates a CTLine for each line of text and (pay attention here) a CTRun for each piece of text with the same formatting.

As an example, Core Text would create a CTRun if you had several words in a row colored red, then another CTRun for the following plain text, then another CTRun for a bold sentence, etc. Again: very important – you don’t create CTRun instances, Core Text creates them for you based on the attributes of the supplied NSAttributedString.

Each of these CTRun objects can adopt different attributes, so you have fine control over kerning, ligatures, width, height and more.

Onto the Magazine App!

To create this magazine app, we need the capability to mark some of the text as having different attributes. We could do this by directly using methods on NSAttributedString such as setAttributes:range, but this is unwieldy to deal with in practice (unless you like to painstakingly write a ton of code!)

So to make thing simpler to work with, we’ll create a simple text markup parser which will allow us to use simple tags to set formatting in the magazine content.

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

Inside MarkupParser.h delete all the text and paste this code – it defines few properties and the method to do the parsing:

#import <Foundation/Foundation.h>
#import <CoreText/CoreText.h>
 
@interface MarkupParser : NSObject {
        
 
    NSString* font;
    UIColor* color;
    UIColor* strokeColor;
    float strokeWidth;
 
    NSMutableArray* images;
}
 
@property (retain, nonatomic) NSString* font;
@property (retain, nonatomic) UIColor* color;
@property (retain, nonatomic) UIColor* strokeColor;
@property (assign, readwrite) float strokeWidth;
 
@property (retain, nonatomic) NSMutableArray* images;
 
-(NSAttributedString*)attrStringFromMarkup:(NSString*)html;
 
@end

Next open MarkupParser.m and replace the contents with the following:

#import "MarkupParser.h"
 
@implementation MarkupParser
 
@synthesize font, color, strokeColor, strokeWidth;
@synthesize images;
 
-(id)init
{
        
    self = [super init];
    if (self) {
        
        self.font = @"Arial";
        self.color = [UIColor blackColor];
        self.strokeColor = [UIColor whiteColor];
        self.strokeWidth = 0.0;
        self.images = [NSMutableArray array];
    }
    return self;
}
 
-(NSAttributedString*)attrStringFromMarkup:(NSString*)markup
{
        
 
}
 
-(void)dealloc
{
        
    self.font = nil;
    self.color = nil;
    self.strokeColor = nil;
    self.images = nil;
 
    [super dealloc];
}
 
@end

As you see you start pretty easy with the parser code – it just contains properties to hold the font, text color, stroke width and stroke color. Later on we’ll be adding images inside the text, so you need an array where you’re going to keep the list of images in the text.

Writing a parser is usually pretty hard work, so I’m going to show you how to build a very very simple one using regular expressions. This tutorial’s parser will be very simple and will support only opening tags – i.e. a tag will set the style of the text after the tag, the style will be applied until a new tag is found. The text markup will look like this:

These are <font color="red">red<font color="black"> and
<font color="blue">blue <font color="black">words.

and will produce output like this:

These are red and blue words.

For the purpose of this Core Text tutorial such markup will be quite sufficient. For your projects you can develop it further if you'd like to.

Let's get parsin'!

Inside the attrStringFromMarkup: method add the following:

NSMutableAttributedString* aString =
    [[NSMutableAttributedString alloc] initWithString:@""
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值