iOS实现简单图文混排效果

2012-09-27 16:55:03

    

在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等，乍一看去相似一个网页，其实这样效果并非由UIWebView 加载网页实现。现在分享一种比较简单的实现方式

 

iOS sdk中为我们提供了一套完善的文字排版开发组件：CoreText。CoreText库中提供了很多的工具来对文本进行操作，例如CTFont、CTLine、CTFrame等。利用这些工具可以对文字字体每一行每一段落进行操作。

此例中默认图片都在右上方，且为了美观和开发简便设定所占宽度都相同。

 

1.         首先，需要引入CoreText库

 

在需要使用的类文件中添加#import <CoreText/CoreText.h>头文件。

2.         设置文本的参数

创建一个NSMutableAttributedString对象，包含所需展示的文本字符串。这样就可以对其进行设置了。通过CTFontCreateWithName函数创建一个CTFont对象，利用NSMutableAttributedString对象的addAttribute方法进行设置。类似的方法可以设置字间距。

对其方式与行间距的设置方式：

[cpp] 
// 文本对齐方式 
    CTTextAlignment alignment = kCTLeftTextAlignment; 
    CTParagraphStyleSetting alignmentStyle; 
    alignmentStyle.spec = kCTParagraphStyleSpecifierAlignment; 
    alignmentStyle.valueSize = sizeof(alignment); 
    alignmentStyle.value = &alignment; 
 // 创建设置数组 
            CTParagraphStyleSetting settings[] ={alignmentStyle}; 
CTParagraphStyleRef style = CTParagraphStyleCreate(settings, 1); 

同样使用addAttribute设置字符串对象。这样的方法还可以设置行间距，段间距等参数。

3.         计算图片所占高度。图片可以使用UIImageView 来进行显示。很容易便可获取每张图片所占总高度。

4.         由于图片宽度是固定的这样就可以计算每行文字缩短的字数。只要文本的总体高度低于图像总高度则文字长度都是缩短的。用CTTypesetterSuggestLineBreak函数动态的计算每一行里的字数，因为每一行里面的中文字、标点符号、数字、字母都不一样所以可以显示的字数肯定也是不同的，所以需要作这样的计算。这样循环直至文本结束，就可以知道有多少行字了。再根据字体高度和行间距得出总的文本高度，如果文本高度大于图片总高度那么显示区域的Frame高度就是文本的高度，反之亦然。

5.         绘制文本：

设置每一行绘制文本的区间：

[cpp]
CFRange lineRange = CFRangeMake(currentIndex, lineLength); 
建立文本行对象 
CTLineRef line = CTTypesetterCreateLine(typeSetter, lineRange); 
CGFloat x = [self textOffsetForLine:line inRect:self.bounds]; 
// 设置一行的位置 
CGContextSetTextPosition(context, x, y); 
// 绘制一行文字 
    CTLineDraw(line, context); 

6.         其他功能：

在完成文本绘制功能后可以加入调整文字大小的功能，和图片的放大的功能。

文字大小可以通过直接设置字体大小后重新绘制文本来实现。

图片放大可以在视图上添加一个新的UIImageView 来展示放大后的图片，并且加入动画效