文本绘制和排版

[ShannonChenCHN]

• 应用
  • UILabel 与富文本
  • 文字排版、电子书
  • 图文混排
  • 字体
• 框架
  • UIKit
  • TextKit
  • CoreText

[ShannonChenCHN]

延伸阅读：

• ibireme/YYText
• UILabel 相关
• iOS 文本对齐，如何像素般精确还原设计稿
• 字符串渲染 - objc.io
• 使用 WebView + HTML + JavaScript + JSExport 实现图文混排

[ShannonChenCHN]

字体

• Using A Custom Font With Dynamic Type

[ShannonChenCHN]

NSAttributedString

• 富文本AttributedString的总结（一）
• iOS富文本(NSAttributedString)---尽力弄全了
• iOS 富文本常用封装(NSAttributedString浅析)
• Strings and Text - Apple Documentation
• How do you use NSAttributedString?
• How do I make an attributed string using Swift?

[ShannonChenCHN]

常见问题 1: 如何实现两个字体大小不同的 UILabel 的文字 baseline 对齐？（如图所示）

方式一：通过 Auto Layout 实现

NSLayoutConstraint *layoutConstraint = [NSLayoutConstraint 
    constraintWithItem:_textLabel_1 
             attribute: NSLayoutAttributeBaseline
             relatedBy:NSLayoutRelationEqual 
                toItem:_textLabel_2 
             attribute:NSLayoutAttributeBaseline 
            multiplier:1.0f
              constant:0];
[self.view addConstraint:layoutConstraint];

使用 Masonry 实现：

[_priceLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.mas_right).offset(-kLeftRightPadding);
            make.baseline.equalTo(_priceTitleLabel.mas_baseline);
        }];

方式二：通过获取字体的 descent 值，来计算 label 中文字的 baseline 的位置

参考：

• How to align UILabel's baseline to the bottom of a UIImageView?
• How to align baselines of text in UILabels with different font sizes on iOS?

[ShannonChenCHN]

常见问题 2：给 UILabel 中的文字添加删除线

方法一：通过 NSStrikethroughStyleAttributeName 设置富文本属性

NSAttributedString *attrStr = 
[[NSAttributedString alloc] initWithString:priceText               
                              attributes:
@{NSFontAttributeName: [UIFont systemFontOfSize:20.f],       
  NSForegroundColorAttributeName: [UIColor colorWithHexString:@"#5bcec0"],     
  NSStrikethroughStyleAttributeName: @(NSUnderlineStyleSingle), 
  NSStrikethroughColorAttributeName:[UIColor colorWithHexString:@"#5bcec0"]}];
self.priceLabel.attributedText = attrStr;

方法二：自定义 UILabel，重写 drawRect: 方法

@interface YHLineThroughLabel : UILabel


@property (nonatomic, assign) BOOL offsetForTextStrikeThrough;    ///< 删除线效果的偏移量
@property (nonatomic, assign) CGFloat lineWidthForStrikeThrough;  ///< 删除线的线宽

@end

@implementation YHLineThroughLabel

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _lineWidthForStrikeThrough = 0.5;
        _offsetForTextStrikeThrough = 0;
    }
    return self;
}


- (void)drawRect:(CGRect)rect {
    
    [super drawRect:rect];
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, self.textColor.CGColor);
    CGRect strikeLineFrame = CGRectMake(0,
                                        (self.font.lineHeight - self.lineWidthForStrikeThrough) * 0.5 + self.offsetForTextStrikeThrough,
                                        rect.size.width,
                                        self.lineWidthForStrikeThrough);
    CGContextFillRect(context, strikeLineFrame);
}


@end

参考

• UILabel文字添加删除线
• UILabel添加删除线（全部方法详解，看这个就够了）

[ShannonChenCHN]

常见问题3：如何给 UILabel 的文字添加阴影效果？

方法1：直接设置 UILabel 的 shadowColor，shadowOffset。

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(30, 30, 300, 50)];
label.text = @"UILabel文字阴影效果";
//阴影颜色
label.shadowColor = [UIColor redColor];
//阴影偏移  x，y为正表示向右下偏移
label.shadowOffset = CGSizeMake(1, 1);
[self.view addSubview:label];

方法二：设置 layer 的阴影。UILabel 提供的设置阴影的属性比较少，如果要进行更多的设置，就要在layer层进行设置，但要把背景色设置为透明。

        self.nameLabel = [[UILabel alloc] init];
        _nameLabel.numberOfLines = 1;
        _nameLabel.font = [UIFont systemFontOfSize:AUTO_SIZE_320(14)];
        _nameLabel.textAlignment = NSTextAlignmentLeft;
        _nameLabel.textColor = HEXCOLOR(0xFFFFFF);
        _nameLabel.layer.shadowColor = [UIColor blackColor].CGColor;
        _nameLabel.layer.shadowOffset = CGSizeZero;
        _nameLabel.layer.shadowOpacity = 0.4;
        _nameLabel.layer.shadowRadius = 4;
        [self.contentView addSubview:_nameLabel];

方法3：通过设置 NSAttributedString 富文本字符串的 shadow 属性来设置阴影。

    NSShadow *shadow = [[NSShadow alloc]init];
    shadow.shadowBlurRadius = 1.0;
    shadow.shadowOffset = CGSizeMake(1, 1);
    shadow.shadowColor = [UIColor redColor];
    [_attributedString addAttribute:NSShadowAttributeName
                              value:shadow
                              range:NSMakeRange(1, _attributedString.length-1)];

参考：

• Objective-C文字加阴影方法总结

[ShannonChenCHN]

Icon Font

1. 什么是 Icon Font？

Icon Font 是一种矢量图标，可以以字体的形式展示 icon。

2. 为什么要使用 Icon Font？

• 一般图片的内存占用量大，而 icon font 只需要一套图标，就可以调整图标大小、颜色得到想要的效果。
• 主要适用于比较简单、颜色单一的 icon。

3. 如何使用？

• 下载/创建 icon font 文件
• 添加 ttf 字体库到 Xcode 中
• 修改info.plist
• 代码调用时设置 text 和 font

推荐阅读

• Adding a Custom Font to Your App
• iOS开发中使用文字图标iconfont
• iOS开发使用iconfont图片字体
• Iconfont-阿里巴巴矢量图标库

[ShannonChenCHN]

如何展示带有超链接的文字

NSMutableAttributedString 中有一个 NSLinkAttributeName 属性。

参考

• Create Embedded Links with NSAttributedString

[ShannonChenCHN]

如何展示首行“缩进”的文字

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
    style.headIndent = 15;
    style.firstLineHeadIndent = 0;