CoreText进阶（五）- 文字排版样式和效果

本文的内容主要是文字的排版样式的文本的绘制效果，排版样式会涉及到内容的水平对其、行间距、段间距相关的讨论；绘制效果会涉及到文本内容的字体、颜色、阴影的相关讨论

其它文章：
CoreText入门（一）-文本绘制
CoreText入门（二）-绘制图片
CoreText进阶（三）-事件处理
CoreText进阶（四）-文字行数限制和显示更多
CoreText进阶（五）- 文字排版样式和效果
CoreText进阶（六）-内容大小计算和自动布局
CoreText进阶（七）-添加自定义View和对其

效果

Demo：CoreTextDemo

以下是四张设置了不同属性的效果图

第一个设置了文字颜色为红色，字体为16号
第二个设置了文字颜色为灰色，字体为16号，对其为居中
第三个设置了文字颜色为灰色，字体为14号，对其为居中，行间距为10
第四个设置了阴影效果

效果图

实现的代码如下：

    CGRect frame = CGRectMake(0, 20, self.view.bounds.size.width, 100);
    YTDrawView *textDrawView = [[YTDrawView alloc] initWithFrame:frame];
    textDrawView.backgroundColor = [UIColor whiteColor];
    textDrawView.text = @"color:red font:16\n这是一个最好的时代，也是一个最坏的时代；这是明智的时代，这是愚昧的时代；这是信任的纪元，这是怀疑的纪元；这是光明的季节，这是黑暗的季节；这是希望的春日，这是失望的冬日；我们面前应有尽有，我们面前一无所有；我们都将直上天堂，我们都将直下地狱。";
    textDrawView.textColor = [UIColor redColor];
    textDrawView.font = [UIFont systemFontOfSize:16];
    [self.view addSubview:textDrawView];
    
    frame = CGRectMake(0, 140, self.view.bounds.size.width, 100);
    textDrawView = [[YTDrawView alloc] initWithFrame:frame];
    textDrawView.backgroundColor = [UIColor whiteColor];
    textDrawView.text = @"color:gray font:16 align:center\n这是一个最好的时代，也是一个最坏的时代；这是明智的时代，这是愚昧的时代；这是信任的纪元，这是怀疑的纪元；这是光明的季节，这是黑暗的季节；这是希望的春日，这是失望的冬日；我们面前应有尽有，我们面前一无所有；我们都将直上天堂，我们都将直下地狱。";
    textDrawView.textColor = [UIColor darkGrayColor];
    textDrawView.font = [UIFont systemFontOfSize:16];
    textDrawView.textAlignment = kCTTextAlignmentCenter;
    [self.view addSubview:textDrawView];
    
    frame = CGRectMake(0, 260, self.view.bounds.size.width, 100);
    textDrawView = [[YTDrawView alloc] initWithFrame:frame];
    textDrawView.backgroundColor = [UIColor whiteColor];
    textDrawView.text = @"color:gray font:14 align:center lineSpacing:10\n这是一个最好的时代，也是一个最坏的时代；这是明智的时代，这是愚昧的时代；这是信任的纪元，这是怀疑的纪元；这是光明的季节，这是黑暗的季节；这是希望的春日，这是失望的冬日；我们面前应有尽有，我们面前一无所有；我们都将直上天堂，我们都将直下地狱。";
    textDrawView.textColor = [UIColor darkGrayColor];
    textDrawView.font = [UIFont systemFontOfSize:14];
    textDrawView.textAlignment = kCTTextAlignmentCenter;
    textDrawView.lineSpacing = 10;
    [self.view addSubview:textDrawView];
    
    frame = CGRectMake(0, 380, self.view.bounds.size.width, 100);
    textDrawView = [[YTDrawView alloc] initWithFrame:frame];
    textDrawView.backgroundColor = [UIColor whiteColor];
    textDrawView.text = @"color:gray font:14 align:center lineSpacing:10\n这是一个最好的时代，也是一个最坏的时代；这是明智的时代，这是愚昧的时代；这是信任的纪元，这是怀疑的纪元；这是光明的季节，这是黑暗的季节；这是希望的春日，这是失望的冬日；我们面前应有尽有，我们面前一无所有；我们都将直上天堂，我们都将直下地狱。";
    textDrawView.textColor = [UIColor cyanColor];
    textDrawView.font = [UIFont systemFontOfSize:20];
    textDrawView.textAlignment = kCTTextAlignmentCenter;
    textDrawView.lineSpacing = 10;
    textDrawView.shadowColor = [UIColor blackColor];
    textDrawView.shadowOffset = CGSizeMake(2, 2);
    textDrawView.shadowAlpha = 1.0;
    [self.view addSubview:textDrawView];

全局排版效果

全局排版效果有以下几种

字体
颜色
阴影
行间距
对其
段间距

全局的排版效果是针对全部内容的进行设置的，本质上都是设置NSMutableAttributedString的属性，特别地

行间距、对其、段间距、行高是段落属性，使用kCTParagraphStyleAttributeNamekey设置对应的属性
阴影使用需要使用CoreGraphics的API CGContextSetShadowWithColor 进行设置的
字体使用kCTFontAttributeName进行设置；颜色使用kCTForegroundColorAttributeName进行设置

行间距、对其、段间距、行高的设置

使用kCTParagraphStyleAttributeNamekey设置NSMutableAttributedString的属性，属性的值是一个CTParagraphStyleRef对象，使用CTParagraphStyleCreate方法创建CTParagraphStyleRef对象，第一个参数是CTParagraphStyleSetting的指针，第二个参数是设置CTParagraphStyleSetting的个数，可以设置一个或者多个的CTParagraphStyleSetting属性

/**
 设置排版样式
 */
- (void)setStyleToAttributeString:(NSMutableAttributedString *)attributeString {
    CTParagraphStyleSetting settings[] =
    {
        {kCTParagraphStyleSpecifierAlignment,sizeof(self.textAlignment),&_textAlignment},
        {kCTParagraphStyleSpecifierMaximumLineSpacing,sizeof(self.lineSpacing),&_lineSpacing},
        {kCTParagraphStyleSpecifierMinimumLineSpacing,sizeof(self.lineSpacing),&_lineSpacing},
        {kCTParagraphStyleSpecifierParagraphSpacing,sizeof(self.paragraphSpacing),&_paragraphSpacing},
    };
    CTParagraphStyleRef paragraphStyle = CTParagraphStyleCreate(settings, sizeof(settings) / sizeof(settings[0]));
    [attributeString addAttribute:(id)kCTParagraphStyleAttributeName
                       value:(__bridge id)paragraphStyle
                       range:NSMakeRange(0, [attributeString length])];
    CFRelease(paragraphStyle);
}

阴影的处理

使用CGContextSetShadowWithColor方法进行绘制阴影，参数需要传入阴影的颜色、阴影的偏移、阴影的透明度，这里有个注意点：绘制阴影的代码需要在绘制文字之前先调用，否则会没哟效果

/**
 绘制阴影
 */
- (void)drawShadowInContext:(CGContextRef)context {
    if (self.data.shadowColor == nil
        || CGSizeEqualToSize(self.data.shadowOffset, CGSizeZero)) {
        return;
    }
    CGContextSetShadowWithColor(context, self.data.shadowOffset, self.data.shadowAlpha, self.data.shadowColor.CGColor);
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    CGContextScaleCTM(context, 1, -1);
    
    // 处理数据
    [self.data composeDataToDrawWithBounds:self.bounds];
    
    // 绘制阴影
    [self drawShadowInContext:context];
    
    // 绘制文字
    [self drawTextInContext:context];
    
    // 绘制图片
    [self drawImagesInContext:context];
}

字体和颜色的处理

字体和颜色的处理其实就是设置NSAttributedString的属性，yt_setFont方法和yt_setTextColor方法是定义在分类中的两个方法，方便设置NSAttributedString的属性

- (void)setText:(NSString *)text {
    _text = text;
    [self.attributeString appendAttributedString:[[NSAttributedString alloc] initWithString:_text attributes:nil]];
    [self.attributeString yt_setFont:_font];
    [self.attributeString yt_setTextColor:_textColor];
}

- (void)setTextColor:(UIColor *)textColor {
    _textColor = textColor;
    [self.attributeString yt_setTextColor:_textColor];
}

- (void)setFont:(UIFont *)font {
    _font = font;
    [self.attributeString yt_setFont:_font];
}

CoreText进阶（五）- 文字排版样式和效果

效果

全局排版效果

行间距、对其、段间距、行高 的设置

阴影的处理

字体和颜色的处理

你可能感兴趣的:(CoreText进阶（五）- 文字排版样式和效果)

行间距、对其、段间距、行高的设置