文档章节

CoreText进阶(五)- 文字排版样式和效果

aron1992
 aron1992
发布于 07/17 21:29
字数 1422
阅读 330
收藏 2

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

其它文章:
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];
}

© 著作权归作者所有

共有 人打赏支持
aron1992

aron1992

粉丝 47
博文 79
码字总数 131987
作品 0
厦门
程序员
CoreText 入门(一)-文本绘制

本文主要的内容是讨论如何使用CoreText进行最简单的文本内容的绘制,同时也谈到的CoreText绘图的一个最基本但是也是最重要的CoreText坐标系的概念,CoreText坐标系的概念是贯穿所有的CoreTex...

aron1992
07/13
0
0
CoreText进阶(四)-文字行数限制和显示更多

本文的主要内容是使用CoreText如何进行行数的限制,以及设置了行数限制末尾的内容被截断了怎么设置截断的标识。此外,还有如何设置自定义的截断标识字符串(比如“显示更多”)、设置自定义截...

aron1992
07/16
0
0
使用CoreText实现图文混排

OS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情。对此的解决方案有使用CoreText进行绘制,或者使用TextKit。本文主要讲解对于CoreT...

北方人在上海
2015/11/06
0
0
CoreText进阶(六)-内容大小计算和自动布局

本文讲的是如何计算CoreText绘制的内容在指定宽度的场景下内容的大小,客户端可以通过公有的接口在图层渲染之前或得到内容的尺寸进行预先的布局。此外,现在自动布局的应用场景越来越多了,使...

aron1992
07/18
0
0
CoreText进阶(三)-内容高亮和事件处理

本文的内容主要见到的是如何使用CoreText设置高亮的内容的特殊效果,比如带有特殊颜色和下划线的链接。以及这些高亮内容的点击效果和点击事件处理 其它文章: CoreText入门(一)-文本绘制 ...

aron1992
07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iOS开发用到的图片尺寸汇总

启动图 型号 竖屏 横屏 iPhone SE 640px × 1136px 1136px × 640px iPhone 6s 750px × 1334px 1334px × 750px iPhone 6s Plus 1242px × 2208px 2208px × 1242px iPhone 7 750px × 1334......

业界小白
33分钟前
0
0
浅谈redis

redis是一个开源,内存式的健值存储数据库,也被称为健值存储的字典服务器。健值类型有字符串,hash(哈希类型),set(集合),list(列表) 和有序集合 特征细节: 内存式:redis将健值存储在主...

拐美人
40分钟前
0
0
无限扩容,按需使用!ZStack推出基于阿里云NAS的文件存储服务

日前,ZStack发布2.6.0版本,正式宣布推出基于阿里云NAS的文件存储服务。得益于业界领先的阿里云分布式存储架构,融合NAS后的ZStack 2.6.0拥有高性能、高可靠、容量无限扩展、一键操作、按需...

ZStack社区版
42分钟前
1
0
崛起于Springboot2.X之Mongodb多数据源处理(35)

多数据源:4个mongodb库! 目录结构图: 1、添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId>......

木九天
48分钟前
0
0
如何获取显示器的EDID信息

Q1: 为什么要写这篇文章? A1:在最近的工作中遇到了不少问题,其中很多都是和EDID相关的。可以说,作为一家以“显示”为生的企业,我们时时刻刻在与EDID打交道。EDID这东西很简单,但是如果...

DB_Terrill
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部