本文的内容主要是文字的排版样式的文本的绘制效果,排版样式会涉及到内容的水平对其、行间距、段间距相关的讨论;绘制效果会涉及到文本内容的字体、颜色、阴影的相关讨论
其它文章:
效果
Demo:
以下是四张设置了不同属性的效果图
- 第一个设置了文字颜色为红色,字体为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
的属性,特别地
行间距
、对其
、段间距
、行高
是段落属性,使用kCTParagraphStyleAttributeName
key设置对应的属性阴影
使用需要使用CoreGraphics的APICGContextSetShadowWithColor
进行设置的字体
使用kCTFontAttributeName
进行设置;颜色
使用kCTForegroundColorAttributeName
进行设置
行间距、对其、段间距、行高 的设置
使用kCTParagraphStyleAttributeName
key设置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];}