iOS阅读器实践系列（一）coretext纯文本排版基础

手机开发

2016-11-04

关注关注

前言：之前做了公司阅读类的App，最近有时间来写一下阅读部分的实现过程，供梳理逻辑，计划会写一个系列希望能涉及到尽量多的方面与细节，欢迎大家交流、吐槽、拍砖，共同进步。

阅读的排版用的是coretext，这篇介绍用coretext实现基本的排版功能。

关于coretext的实现原理，可以查看文档或其他资料，这里就不介绍了，只介绍如何应用coretext来实现一个简单的文本排版功能。

因为coretext是离屏排版的，即在将内容渲染到屏幕之前，内容的排版工作的已经完成了。

排版过程大致过程分为步：

一、由原始文本数据和需要的相关配置来得到属性字符串。

二、由属性字符串得到CTFramesetter

三、由CTFramesetter和绘制区域得到CTFrame

四、最后将CTFrame渲染到视图的上下文中

1、由原始文本数据和需要的相关配置来得到属性字符串

这一部最关键的是得到相关配置，这些配置可能包括文本对齐方式、段收尾缩进、行高等，下面是一些相关配置属性:

@interface CTFrameParserConfigure : NSObject

@property (nonatomic, assign) CGFloat frameWidth;
@property (nonatomic, assign) CGFloat frameHeight;

//字体属性
@property (nonatomic, assign) CGFloat wordSpace;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) NSString *fontName;
@property (nonatomic, assign) CGFloat fontSize;


//段落属性
@property (nonatomic, assign) CGFloat lineSpace;
@property (nonatomic, assign) CTTextAlignment textAlignment; //文本对齐模式
@property (nonatomic, assign) CGFloat firstlineHeadIndent; //段首行缩进
@property (nonatomic, assign) CGFloat headIndent;  //段左侧整体缩进
@property (nonatomic, assign) CGFloat tailIndent;  //段尾缩进
@property (nonatomic, assign) CTLineBreakMode lineBreakMode;  //换行模式
@property (nonatomic, assign) CGFloat lineHeightMutiple; //行高倍数器(它的值表示原行高的倍数)
@property (nonatomic, assign) CGFloat maxLineHeight; //最大行高限制（0表示无限制，是非负的，行高不能超过此值）
@property (nonatomic, assign) CGFloat minLineHeight;  //最小行高限制
@property (nonatomic,assign) CGFloat paragraphBeforeSpace;  //段前间距（相对上一段加上的间距）
@property (nonatomic, assign) CGFloat paragraphAfterSpace; //段尾间距（相对下一段加上的间距）

@property (nonatomic, assign) CTWritingDirection writeDirection;  //书写方向

@property (nonatomic, assign) CGFloat lineSpacingAdjustment;  //The space in points added between lines within the paragraph (commonly known as leading).

@end

接下来我们要利用这些属性，生成我们需要的配置，在我们根据我们的需要给这些属性赋值以后，利用下面的方法来得到我们需要的配置：

//返回文本所有属性的集合（以字典形式），包括字体、段落等
- (NSDictionary *)attributesWithConfig:(CTFrameParserConfigure *)config
{
    //段落属性
    CGFloat lineSpacing = config.lineSpace;
    CGFloat firstLineIndent = config.firstlineHeadIndent;
    CGFloat lineIndent = config.headIndent;
    CGFloat tailIndent = config.tailIndent;
    CTLineBreakMode lineBreakMode = config.lineBreakMode;
    CGFloat lineHeightMutiple = config.lineHeightMutiple;
    CGFloat paragraphBeforeSpace = config.paragraphBeforeSpace;
    CGFloat paragraphAfterSpace = config.paragraphAfterSpace;
    CTWritingDirection writeDirect = config.writeDirection;
    CTTextAlignment textAlignment = config.textAlignment;
    const CFIndex kNumberOfSettings = 13;
    CTParagraphStyleSetting paragraphSettings[kNumberOfSettings] = {
        { kCTParagraphStyleSpecifierLineSpacingAdjustment, sizeof(CGFloat), &lineSpacing },
        { kCTParagraphStyleSpecifierMaximumLineSpacing, sizeof(CGFloat), &lineSpacing },
        { kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(CGFloat), &lineSpacing },
        { kCTParagraphStyleSpecifierAlignment, sizeof(textAlignment), &textAlignment },
        { kCTParagraphStyleSpecifierFirstLineHeadIndent, sizeof(firstLineIndent), &firstLineIndent },
        { kCTParagraphStyleSpecifierHeadIndent, sizeof(lineIndent), &lineIndent },
        { kCTParagraphStyleSpecifierTailIndent, sizeof(tailIndent), &tailIndent },
        { kCTParagraphStyleSpecifierLineBreakMode, sizeof(lineBreakMode), &lineBreakMode },
        { kCTParagraphStyleSpecifierLineHeightMultiple, sizeof(lineHeightMutiple), &lineHeightMutiple },
        { kCTParagraphStyleSpecifierLineSpacing, sizeof(lineHeightMutiple), &lineHeightMutiple },
        { kCTParagraphStyleSpecifierParagraphSpacingBefore, sizeof(paragraphBeforeSpace), &paragraphBeforeSpace },
        { kCTParagraphStyleSpecifierParagraphSpacing, sizeof(paragraphAfterSpace), &paragraphAfterSpace },
        { kCTParagraphStyleSpecifierBaseWritingDirection, sizeof(writeDirect), &writeDirect },
    };
    
    CTParagraphStyleRef theParagraphRef = CTParagraphStyleCreate(paragraphSettings, kNumberOfSettings);
    
    /**
     *   字体属性
     */
    CGFloat fontSize = config.fontSize;
    //use the postName after iOS10
//    CTFontRef fontRef = CTFontCreateWithName((CFStringRef)config.fontName, fontSize, NULL);
    CTFontRef fontRef = CTFontCreateWithName(NULL, fontSize, NULL);
//    CTFontRef fontRef = CTFontCreateWithName((CFStringRef)@"TimesNewRomanPSMT", fontSize, NULL);
   
    UIColor * textColor = config.textColor;
    
    //设置字体间距
    long number = config.wordSpace;
    CFNumberRef num = CFNumberCreate(kCFAllocatorDefault, kCFNumberSInt8Type, &number);
    
    
    NSMutableDictionary * dict = [NSMutableDictionary dictionary];
    dict[(id)kCTForegroundColorAttributeName] = (id)textColor.CGColor;
    dict[(id)kCTFontAttributeName] = (__bridge id)fontRef;
    dict[(id)kCTKernAttributeName] = (__bridge id)num;
    dict[(id)kCTParagraphStyleAttributeName] = (__bridge id)theParagraphRef;
    
    CFRelease(num);
    CFRelease(theParagraphRef);
    CFRelease(fontRef);
    return dict;
}

上述过程为先根据上面提供的段落属性值生成段落属性，然后生成字体、字体间距及字体颜色等属性，然后依次将他们存入字典中。

需要注意的地方是 CTParagraphStyleSetting 为C语言的数组，需在创建时指定数组元素个数。

创建的CoreFoundation库中的对象需要手动释放（大部分到create方法生成的对象）

另外在系统升级到iOS10以后，在调节字体大小重新排版时，变得很慢，用Instrument查了一下，发现

CTFontRef fontRef = CTFontCreateWithName((CFStringRef)config.fontName, fontSize, NULL);

这句代码执行时间很长，查找资料发现是字体造成的，iOS10需要用相应的POST NAME。

2、由属性字符串得到CTFramesetter

// 创建 CTFramesetterRef 实例
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)mabStr);

3、由CTFramesetter和绘制区域得到CTFrame

这一步的关键是要得到绘制的区域：

// 获得要绘制的区域的高度
    CGSize restrictSize = CGSizeMake(viewWidth, CGFLOAT_MAX);
    CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(0,0), nil, restrictSize, nil);
    CGFloat textHeight = coreTextSize.height;

然后生成CTFrame：

//生成绘制的区域
+ (CTFrameRef)createFrameWithFramesetter:(CTFramesetterRef)framesetter frameWidth:(CGFloat)frameWidth stringRange:(CFRange)stringRange orginY:(CGFloat)originY height:(CGFloat)frameHeight
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(0, originY, frameWidth, frameHeight)); //此时path的位置值都是coretext坐标系下的值
    
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, stringRange, path, NULL);
    
    CFRelease(frame);
    CFRelease(path);
    
    return frame;
}

这里需要注意的地方就是代码中注释的地方，在排版过程中使用的坐标都是在coretext坐标系下的，即原点在屏幕左下角。

4、将CTFrame渲染到视图的上下文中

这一步是要在视图类的drawRect方法中将上步得到的CTFrame绘制出来：

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    
    //将坐标系转换为coretext下的坐标系
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    
    if (ctFrame != nil) 
    {
        CTFrameDraw(ctFrame, context);  
    }
}

这一步的关键是坐标系的转换，因为ctFrame中包含的绘制区域是在coretext坐标系下，所以在绘制时应先将坐标系转换为coretext坐标系再绘制，才能保证绘制位置正确。

如果渲染时需要精确到行或字体可用CTLine与CTRun，这会在后面介绍。

coretext