你好,游客 登录 注册 搜索
背景:
阅读新闻

用Core Text创建简单杂志应用(1) - kmyhy的专栏

[日期:2013-04-07] 来源:  作者: [字体: ]

原文:http://www.raywenderlich.com/4147/how-to-create-a-simple-magazine-app-with-core-text

本文作者Marin Todorov,拥有12年以上的软件开发经历,是一位独立的iOS开发者,同时是TouchCode 杂志的创建者。


Core Text是iOS 3.2和OSX10.5之后的文本引擎,能够精确控制文本的布局及样式。

它位于UIKit和CoreGraphics/Quartz之间:

  •  使用UIKit,你可以通过简单拖拽将文本显示在UILabel上,但你无法单独控制文本中每个字的颜色。
  • 使用Core Graphics/Quartz,你可以做到系统能够做到的一切,但你需要计算文本每个字符绘制在屏幕上的坐标。
  • Core Text 恰巧位于二者之间。你能完全控制文字的位置、布局以及颜色大小等属性,但Core Text也为你省去了一些工作——例如从文本换行到字体的渲染。

在创建一个杂志或书刊类的应用时,Core Text尤其便利——而且在iPad上也工作得很好。

本文通过创建一本非常简单的杂志应用教你如何使用CoreText。你将学到:

  • 在屏幕上显示格式文本
  • 精确控制文本的外观
  • 在文本内容中插入图片
  • 最终创建一个杂志应用,并通过标记来控制文本的格式

在阅读本文之前,你需要有一点iOS开发基础。否则,你可以先阅读这个站点的其他教程

让我们立即开始iPad杂志之旅。

创建 Core Text 项目

打开Xcode,点击 File\New\New Project, 选择 iOS\Application\View-basedApplication, 点击 Next。项目名称命名为 CoreTextMagazine, Device family选择iPad, 点击 Next, 选择项目存放路径,然后点击 Create。

接下来将Core Text框架加到项目中。

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

  1. 在 Project  导航面板中选择项目文件 (屏幕左边的导航窗口)
  2. 在Targets列表中选择 “CoreTextMagazine”
  3. 点击“Build phases” 栏
  4. 展开 “Link Binary With Libraries” 并点击 “+” 号按钮
  5. 在列表中选择 “CoreText.framework” 然后点击 “Add”按钮

接下来编写一些代码。

添加一个 Core Text 视图

为了便于使用Core Text,我们应当创建一个定制的UIView,然后在它的drawRect:方法中使用Core Text。

打开File\New\New File菜单,选择 iOS\Cocoa Touch\Objective-C class, 点击 Next。选择UIView的子类, 点击 Next, 类名命名为 CTView, 然后点击 Save。

 

在CTView.h 的 @interface 加入一下代码已包含 Core Text 框架:

#import <CoreText/CoreText.h>

接下来,设置新的定制的UIView作为应用程序的主视图。

在项目导航窗口中选择 “CoreTextMagazineViewController.xib”文件,转到Xcode的 Utilities 工具条,选择第3个按钮即 Identity 栏.

现在界面编辑器中选择view对象,在Utilities窗口的Class栏,可以看到UIView字样,将它改为 “CTView” 然后回车。

现在,应用程序启动时将显示定制的Core Text视图了。接下来,我们编写一点代码作为测试。

打开CTView.m 删除所有方法。输入以下代码,以便在视图中绘制一个内容为 “Hello world” 的文本:

- (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); 
}

让我们逐句讨论以上代码(序号和代码后面注释的行号对应):

  1. 此句创建了一个路径,用于表示文本将绘制在此区域内。Mac下Core Text支持在各种形状中绘制文本,比如矩形和椭圆。但iOS下仅支持矩形。在本例中,使用整个视图作为文本绘制的路径,直接将self.bounds转变为一个CGPath。
  2. 在Coret Text中无法直接使用NSString,而是使用NSAttributedString。NSAttributedString是一个强大的NSString子类,允许你在文本上应用各种格式化属性。待会我们会演示如何使用它,在此我们仅仅是创建一个简单的文本。
  3. CTFramesetter是绘制Core Text文本的最重要的一个类。用它来管理所有的字体引用和文本绘制块。现在你需要知道的仅仅是使用 CTFramesetterCreateWithAttributedString函数创建一个 CTFramesetter。在创建出CTFramesetter之后,我们可以用 CTFramesetterCreateFrame 给它指定一个渲染范围(这里我们决定渲染范围为整个字符串),以及绘制文本时文本显示范围,方法最终返回一个文本绘制块。
  4. CTFrameDraw在指定上下文中绘制指定的文本绘制块。
  5. 最后,释放所用到的对象。

注意,在使用Core text时,请使用一系列函数如 CTFramesetterCreateWithAttributedString 和CTFramesetterCreateFrame 而尽量避免直接使用 Objective-C 对象。

你可能会奇怪“为什么又要用C,为什么不用Objective-C?”

这是因为在iOS中的许多低级类库,为了高效和简洁起见,都是用C写的。不必担心,你会发现CoreText函数其实蛮简单的。

此外,还有一件值得注意的事情:在用“Create”函数创建对象之后,不要忘记同时要用CFRelease函数释放它们。

无论如何,用Core Text绘制一段简单文本就是这么多了。点击Run,查看运行结果。


出现了什么问题?就好比许多低级APIs,CoreText使用的是反Y轴坐标系。因此文本内容被渲染成倒立的。我们需要记住一点,如果我们把UIKit和Core Text的绘制方向搞混了,你会得到奇怪的结果。让我们来解决这个问题。在

 “CGContextRef context =UIGraphicsGetCurrentContext();”一行后加入一下代码:

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

代码很简单,仅仅是在当前视图的上下文中应用了一个转换(上下颠倒坐标系)。在每次绘制Core Text的时候复制粘贴这段代码。

点击Run——庆祝你的第一个CoreText程序吧!


Core Text 的对象模型

如果你搞不清什么是 CTFramesetter 和 CTFrame – 那么,我会在这里简单地解释一下Core Text是如何渲染文本内容的。

Core Text的对象模型如下图所示:

首先用一个NSAttributedString做为参数创建一个CTFramesetter引用。这将自动创建一个CTTypesetter实例,它管理着你的字体。接下来使用这个CTFramesetter创建一个(或多个)文本块(CTFrame)。CTFrame用于渲染文本。

在创建文本块时,需要告诉它一个范围(NSRange),指定文本将在某个矩形内进行渲染。Core Text为每行文字自动创建一个CTLine,同时(注意这里)为每个CTLine中的每一段格式相同的文字创建一个CTRun。

例如,如果在一行中,有几个字是红色,另外几个字是黑色,剩余的字则为粗体,则Core Text将总共为它们创建3个CTRun。特别注意:不需要你来创建CTRun属性,Core Text会基于你提供的NSAttributedString来创建它们。

每个CTRun对象都采用各自的属性,因此你可以精确地控制诸如字距、连体、字宽、字重等属性。

创建杂志应用程序

创建杂志应用程序,我们需要标记出每段文字的属性。我们可以用NSAttributedString的setAttributes:range方法,但未免不够灵活(除非你愿意老老实实地写上成打的代码)。

更简单地方法,是创建一种简单标记语法的解析器,通过它对杂志内容进行格式化。

点击File\New\New File, 选择 iOS\Cocoa Touch\Objective-C class, 然后点击Next。选择 NSObject for Subclass of, 点击 Next,为类命名为MarkupParser.m, 然后点击 Save。

在MarkupParser.h 中删除所有代码,编辑代码,声明属性和方法如下:

#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

打开MarkupParser.m 将其中内容替换为以下代码:

#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

如你所见,这个解析器的代码很简单——它包含的属性只有字体、字体颜色、删除线粗细、删除线颜色。后面我们将在文本中使用图片,因此用一个数组来存储这些图片。

通常写一个解析器不是件轻松的活儿,我将演示的是教你编写一个非常非常简单的解析器(使用正则式)。本教程的解析器非常简单,仅支持开放标签——例如,从一个标签后开始设置文本的样式,一直应用这个样式直到遇到新的标签。就像这段标记语言:

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

将产生如下输出:

These are red and blue words. 

对于本文而言,这就足够了。在你自己的项目中,你可以扩展它。

让我们开始吧!

在attrStringFromMarkup: 方法中,加入:

NSMutableAttributedString* aString =
     [[NSMutableAttributedString alloc] initWithString:@""]; //1   
NSRegularExpression* regex = [[NSRegularExpression alloc]
   initWithPattern:@"(.*?)(<[^>]+>|\\Z)"
           options:NSRegularExpressionCaseInsensitive|
                   NSRegularExpressionDotMatchesLineSeparators
             error:nil]; //2 
NSArray* chunks = [regex matchesInString:markup
       options:0
         range:NSMakeRange(0, [markup length])];
[regex release];

以上代码分为两步:

  1. 首先,声明一个空字符串的NSMutableAttributeString用于结果的返回,后面我们会加入搜索到的匹配的字符串。
  2. 接下来,创建一个正则表达式,用于匹配文本和标记。该正则表达式用于匹配一段文字以及其后的标记。该正则表达式的意思是“查找一系列字符,一直到遇到一个以左尖括号开始、右尖括号结束的任意个字符。如果遇到字符串结束则停止处理”。.

为什么要创建这个正则表达式?我们用它来搜索字符串中每个匹配的位置,然后:

1)渲染所找到的文本部分;

2)根据所找到标签改变当前样式。

整个过程重复进行,直至文本结束。

确实很简单,不是吗?







收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻