iOS | CoreText简单实现卷展Label视图

开发背景

• 公司最近项目中有一个如下图的需求，在Github找了好久没有发现类似的Demo，于是思考了几天，成功实现了这种效果。

需求效果：点击`更多`文本跳转到其他页面

• 然后我经过改造，实现了类似于可折叠的Label效果，并支持转屏自动绘制。如下图所示：

最终效果 - 竖屏

最终效果 - 横屏

实现过程

• 主要思路是利用CoreText系统库进行的富文本绘制；

• 在最后一行时，通过不断让index减1，然后获得subAttrText，再加上...更多文本进行计算文本所占的行数lines，直到行数为1行；

• 最后进行drawAttrText的绘制，并回调返回计算后的totalHeight，让控制器更新heightConstraint约束；

1.drawRect

-(void)drawRect:(CGRect)rect{
    [super drawRect:rect];
    
    if (!_attributedText) {
        return;
    }
    
    [self drawTextWithCompletion:^(CGFloat height, NSAttributedString *drawAttributedText) {
        [self addSubview:self.contentView];
        self.contentView.frame = CGRectMake(0, 0, self.bounds.size.width, height);
        self.contentView.attributedText = drawAttributedText;
        // 回调
        _action ? _action(HYExpandableLabelActionDidLoad, @(height)) : nil;
    }];
}

2.指定行数绘制

• CGPathRef 绘制区域

CGRect rect = CGRectMake(0, 0, self.bounds.size.width, .size.height);
CGPathRef path = CGPathCreateWithRect(rect, nil);

• CTFrameRef

CTFramesetterRef setter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)_attributedText);
CTFrameRef ctFrame = CTFramesetterCreateFrame(setter, CFRangeMake(0, _attributedText.length), path, NULL);

• CTLines

NSArray *lines = (NSArray*)CTFrameGetLines(ctFrame);

• CTLine Origins 每一行的绘制原点

CGPoint ctOriginPoints[lines.count];
CTFrameGetLineOrigins(ctFrame, CFRangeMake(0, 0), ctOriginPoints);

• 计算绘制文本drawAttrText和总高度

NSMutableAttributedString *drawAttributedText = [NSMutableAttributedString new];
    
    for (int i=0; i _maximumLines && i == _maximumLines) {
            break;
        }
        CTLineRef line = (__bridge CTLineRef)lines[i];
        
        CGPoint lineOrigin = ctOriginPoints[i];
        
        CFRange range = CTLineGetStringRange(line);
        NSAttributedString *subAttr = [_attributedText attributedSubstringFromRange:NSMakeRange(range.location, range.length)];

        if (lines.count > _maximumLines && i == _maximumLines - 1) {
            // 最后一行特殊处理
        }
        else{
            [drawAttributedText appendAttributedString:subAttr];
            
            totalHeight += [self heightForCTLine:line];
        }
    }

• 最后一行的处理

NSMutableAttributedString *drawAttr = [[NSMutableAttributedString alloc] initWithAttributedString:subAttr];

for (int j=0; j

• 回调

completion(totalHeight, drawAttributedText);

3.全部文本绘制

• 全部文本绘制（即展开文本）绘制相对来说较为简单，只需将clickAttrText追加到attrText后，然后绘制

• CTFrameRef、CTLines等的获取和上面一样，下面主要说下totalHeight计算及clickArea的计算

for (int i=0; i

用法

@property (weak, nonatomic) IBOutlet HYExpandableLabel *expandableLabel;
// 高度值约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *expandableLabelHeightCons;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _expandableLabel.attributedText = [[NSAttributedString alloc] initWithString:@"测试文本"  attributes: @{ NSFontAttributeName:[UIFont systemFontOfSize:14] }];
        
    __block typeof(self)weakSelf = self;
    _expandableLabel.action = ^(HYExpandableLabelActionType type, id info) {
        if (type == HYExpandableLabelActionDidLoad) {
            NSLog(@"_expandableLabel Did Calculated");
// 更新布局
            weakSelf.expandableLabelHeightCons.constant = [info floatValue];
            [weakSelf.view layoutIfNeeded];
        }
    };
}

Github

https://github.com/BackWorld/HYExpandableLabel

如果对你有帮助，别忘了加个关注 或 点个赞哦