TTTAttributedLabel高级话题：自定义截断符与多行布局-优快云博客

TTTAttributedLabel高级话题：自定义截断符与多行布局

【免费下载链接】TTTAttributedLabel 项目地址: https://gitcode.com/gh_mirrors/ttt/TTTAttributedLabel

在iOS开发中，UILabel的文本截断和多行布局能力有限，尤其无法满足富文本场景下的复杂需求。TTTAttributedLabel作为UILabel的增强替代品，提供了自定义截断符和精细化多行布局控制，解决了动态文本展示的核心痛点。本文将从实际应用场景出发，详解这两项功能的实现原理与最佳实践。

自定义截断符：不止于"..."

痛点解析

系统UILabel的lineBreakMode仅支持固定样式的省略号，无法修改颜色、字体或添加交互。当需要实现"查看更多"等带链接的截断效果时，原生控件完全无能为力。TTTAttributedLabel通过attributedTruncationToken属性解决了这一问题，允许开发者使用富文本定义截断符号。

实现原理

TTTAttributedLabel的attributedTruncationToken属性接受NSAttributedString类型值，在文本溢出时自动替换尾部内容。该机制通过CoreText框架实现文本测量与截断逻辑，核心代码定义在TTTAttributedLabel.h中：

@property (nonatomic, strong) IBInspectable NSAttributedString *attributedTruncationToken;

实战代码

基础彩色截断符

// 创建带颜色属性的截断符
NSAttributedString *truncationToken = [[NSAttributedString alloc] initWithString:@"[更多]"
                                                                      attributes:@{
                                                                          NSFontAttributeName: [UIFont boldSystemFontOfSize:12],
                                                                          NSForegroundColorAttributeName: [UIColor blueColor]
                                                                      }];

// 应用到标签
TTTAttributedLabel *label = [[TTTAttributedLabel alloc] initWithFrame:CGRectMake(20, 100, 300, 0)];
label.attributedTruncationToken = truncationToken;
label.numberOfLines = 2; // 限制2行后显示截断符
label.text = @"Pallando, Merlyn, and Melisandre were walking one day when they encountered a strange portal...";

可点击的截断符

// 创建带链接的截断符
NSMutableAttributedString *linkToken = [[NSMutableAttributedString alloc] initWithString:@"[查看全文]"];
[linkToken addAttribute:NSLinkAttributeName 
                  value:[NSURL URLWithString:@"action://expand"] 
                  range:NSMakeRange(0, linkToken.length)];
[linkToken addAttribute:NSForegroundColorAttributeName 
                  value:[UIColor systemBlueColor] 
                  range:NSMakeRange(0, linkToken.length)];

label.attributedTruncationToken = linkToken;
label.delegate = self; // 实现点击回调

点击事件通过TTTAttributedLabelDelegate处理：

- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithURL:(NSURL *)url {
    if ([url.scheme isEqualToString:@"action"]) {
        label.numberOfLines = 0; // 展开全部文本
        label.attributedTruncationToken = nil; // 移除截断符
    }
}

测试验证

Example项目中的TTTAttributedLabelTests.m提供了完整测试用例，通过截图对比验证不同截断场景：

testAttributedTruncationToken：验证基础富文本截断效果
testAttributedTruncationTokenLinks：测试带链接的截断符交互
testSizeToFitWithTruncationToken：验证截断状态下的尺寸计算

多行布局引擎：精确控制文本显示

核心能力

TTTAttributedLabel通过扩展的布局属性，实现了超越系统控件的文本排版控制，主要包括：

属性	功能	定义位置
verticalAlignment	文本垂直对齐（上/中/下）	TTTAttributedLabel.h#L239
textInsets	文本内边距	TTTAttributedLabel.h#L234
lineSpacing	行间距	TTTAttributedLabel.h#L212
minimumLineHeight	最小行高	TTTAttributedLabel.h#L217

垂直对齐实现

系统UILabel仅支持垂直居中对齐，而TTTAttributedLabel通过TTTAttributedLabelVerticalAlignment枚举提供三种对齐方式：

typedef NS_ENUM(NSInteger, TTTAttributedLabelVerticalAlignment) {
    TTTAttributedLabelVerticalAlignmentCenter   = 0,
    TTTAttributedLabelVerticalAlignmentTop      = 1,
    TTTAttributedLabelVerticalAlignmentBottom   = 2,
};

复杂布局示例

实现带内边距的上下对齐文本：

TTTAttributedLabel *label = [[TTTAttributedLabel alloc] initWithFrame:CGRectMake(20, 200, 300, 150)];
label.verticalAlignment = TTTAttributedLabelVerticalAlignmentTop;
label.textInsets = UIEdgeInsetsMake(10, 15, 10, 15); // 上左下右内边距
label.lineSpacing = 5; // 行间距5pt
label.numberOfLines = 0; // 自动换行
label.text = @"这是一段需要精确控制布局的多行文本，通过TTTAttributedLabel的textInsets属性可以实现类似UIButton的内边距效果，同时保持富文本样式。";

性能优化与最佳实践

文本测量优化

当处理动态文本时，推荐使用类方法sizeThatFitsAttributedString:withConstraints:limitedToNumberOfLines:进行预计算，避免多次布局传递：

CGSize labelSize = [TTTAttributedLabel sizeThatFitsAttributedString:attributedText
                                                     withConstraints:CGSizeMake(maxWidth, CGFLOAT_MAX)
                                              limitedToNumberOfLines:3];

内存管理

TTTAttributedLabel在iOS 12+环境下表现稳定，但在低版本系统中需注意：

避免频繁创建大量实例
长文本场景下使用numberOfLines限制最大行数
图片测试资源显示，复杂富文本会增加内存占用Example/TTTAttributedLabelTests/ReferenceImages_64/

常见问题解决方案

问题	解决方案	相关代码
截断符不显示	确保设置`numberOfLines`且文本长度超过显示区域	TTTAttributedLabelTests.m#L398
垂直对齐失效	需设置固定高度或调用`sizeToFit`	TTTAttributedLabelTests.m#L34
链接点击无响应	检查`delegate`是否设置及`userInteractionEnabled=YES`	TTTAttributedLabel.h#L124

总结与扩展

TTTAttributedLabel通过自定义截断符和精细化布局控制，极大提升了iOS文本展示能力。结合其内置的链接检测、背景高亮等特性，可广泛应用于聊天界面、内容展示、新闻客户端等场景。完整API文档参见TTTAttributedLabel.h，更多示例可参考Example项目中的测试用例。

掌握这些高级特性后，开发者可以告别复杂的CoreText手动绘制，以声明式API构建专业级富文本界面。建议结合AutoLayout使用，实现真正自适应的文本布局系统。

【免费下载链接】TTTAttributedLabel 项目地址: https://gitcode.com/gh_mirrors/ttt/TTTAttributedLabel

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考