展开收起功能.gif

最近有个需求，类似微博内容的全文展开功能，当文本内容超过3行时，只展示两行，在第二行最后面加上...全文，然后点击全文，展开全部的文本内容。

接到这个需求，我们简单分析下，这个需求的难点在于在第二行文本的上加上...全文,这里我们就必须知道第二行展示的文本内容，然后判断文本内容长度加上...全文是否超过文本限制宽度，如果超过，就需要对第二行原来的文本进行截取，然后再拼接上...全文,正好满足一行的显示,然后让...全文字符串响应点击事件来更新字符串。

具体详见: DEMO

一. 如何知道第二行展示的文本内容

• 要知道第二行展示的文本内容，这个问题等同于我们需要知道字符串在每一行文本的展示内容，

• 要知道字符串在每一行文本的展示内容，我们可以利用CoreText。

• 首先创建携带字体信息的字符串富文本，然后依据富文本生成CTFramesetterRef frameSetter

• 接着创建CGMutablePathRef path，并限定绘制范围

• 利用frameSetter 和 path 通过CTFramesetterCreateFrame方法获取得到CTFrameRef frame

• 利用CTFrameRef frame通过CTFrameGetLines获取CTLineRef的数组lines

• 遍历lines,获取每一行lines的范围NSRange range,利用范围，从原始字符串中截取对应字符串，放到字符串数组里面linesArray,

• 之后释放对应的path 、 frame、frameSetter并返回linesArray。

• 最后我们可以从字符串数组linesArray里面获取第二行字符串的文本内容。

对应代码如下:

+ (NSArray *)fjf_lineStringArrayWithLimitWidth:(CGFloat)limitWidth
                                   contentFont:(UIFont *)contentFont
                                   contentText:(NSString *)contentText {
    if (contentText == nil) {
        return nil;
    }
    
    NSMutableAttributedString *attStr = [[NSMutableAttributedString alloc] initWithString:contentText];
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
    [attStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, attStr.length)];
   [attStr addAttribute:NSFontAttributeName value:contentFont range:NSMakeRange(0, attStr.length)];
    
    CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attStr);
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(0, 0, limitWidth, CGFLOAT_MAX));
    CTFrameRef frame = CTFramesetterCreateFrame(frameSetter, CFRangeMake(0, 0), path, NULL);
    NSArray *lines = (NSArray *)CTFrameGetLines(frame);
    NSMutableArray *linesArray = [[NSMutableArray alloc] init];
    for (id line in lines) {
        CTLineRef lineRef = (__bridge  CTLineRef)line;
        CFRange lineRange = CTLineGetStringRange(lineRef);
        NSRange range = NSMakeRange(lineRange.location, lineRange.length);
        NSString *lineString = [contentText substringWithRange:range];
        [linesArray addObject:lineString];
    }
    CGPathRelease(path);
    CFRelease(frame);
    CFRelease(frameSetter);
    return linesArray;
}

二. 对第二行字符串的截取并拼接...全文

当我们获取到第二行文本字符串之后，我们解决的就是将...全文拼接在合适的文本字符串的后面，这里包括几种情况。

• 当第二行文本字符串拼接上...全文不超过限制宽度，同时文本最后不是换行符\n，就直接拼接。

• 当第二行文本字符串拼接上...全文不超过限制宽度，同时文本最后是换行符\n，将换行符\n置位空，再拼接。

• 当第二行文本字符串拼接上...全文超过限制宽度，需要将原先的字符串截取，截取刚好的长度，然后再拼接上...全文，使得整个文本字符串不超过限制宽度。

• 截取的时候需要注意因为字符串可能包含有中文、字母、数字、表情等，所以截取的字符串长度需要适合的计算，比如说遇到表情就需要截取两个字符长度，同时截取的字符串长度再拼接上...全文，并不一定能刚好占据整个限制宽度，可能会有些偏差，因为汉字、表情占据的宽度比较宽。

对应代码如下:

+ (NSInteger)fjf_trailBlankStringWithString:(NSString *)string
                                 limitWidth:(CGFloat)limitWidth
                                contentFont:(UIFont *)contentFont
                         trailingBlankWidth:(CGFloat)trailingBlankWidth {
    
    NSInteger currentStringLength = 0;
    NSInteger subStrValueLength = 0;
    while (currentStringLength <= string.length) {
        NSString *tmpString = [string substringWithRange:NSMakeRange(0, currentStringLength)];
        CGFloat stringWidth = [FJFExpandLabelTool fjf_widthForFont:contentFont maxWidth:limitWidth contentText:tmpString];
        if (stringWidth > trailingBlankWidth) {
            break;
        }
        NSString *tmpBalanceString = [string substringWithRange:NSMakeRange(0, string.length - currentStringLength)];
        subStrValueLength = [self fjf_reduceStringLengthWithString:tmpBalanceString];
        currentStringLength = currentStringLength + subStrValueLength;
    }
    return currentStringLength;
}


// 减去 字符 长度
+ (NSInteger)fjf_reduceStringLengthWithString:(NSString *)string {
    NSInteger subStrValue = 0;
    if (string.length > 2) {
        NSString *subStr = [string substringWithRange:NSMakeRange(string.length - 2, 2)];
        if ([FJFExpandLabelTool fjf_isContainEmojiWithString:subStr]) {
            subStrValue = 2;
        } else {
            subStrValue = 1;
        }
    }
    return subStrValue;
}


+ (BOOL)fjf_isContainEmojiWithString:(NSString *)string {
    if ([self fjf_matchEmojiRegularWithWithString:string]) {
        return YES;
    }
    if ([self fjf_stringContainsEmoji:string]) {
        return YES;
    }
    return NO;
}

三. ...全文字符串响应点击事件

这里让要...全文字符串响应点击事件，一开始很容易想到像TTTAttributedLabel或者YYTLabel等控件一样，在-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event方法里面通过获取到点击位置，然后通过点击位置，去获取当前点击位置的字符串是否为...全文,如果是就进行事件的响应.
相关代码:

#pragma mark - Public Methods
- (void)updateLabelWithExpandLabelStyle:(FJFExpandLabelStyle *)expandLabelStyle {
    self.expandLabelStyle = expandLabelStyle;
    NSAttributedString *tmpAttributedText = [FJFExpandLabelTool generateShowContentWithExpandLabelStyle:expandLabelStyle];
    self.attributedText = tmpAttributedText;
    

    CGFloat expandButtonX = expandLabelStyle.assignLineWidth;
    if (expandLabelStyle.labelShowType == FJFExpandLabelShowTypeExpandAndPickup &&
        expandLabelStyle.expandStatus) {
        expandButtonX = expandLabelStyle.assignLineWidth - expandLabelStyle.expandLabelWidth;
        if (expandButtonX < 0) {
            expandButtonX = 0;
        }
    }
    CGFloat expandButtonY = (self.frame.size.height - expandLabelStyle.assignLineHeight) / 2.0f + (expandLabelStyle.assignLineHeight - expandLabelStyle.expandLabelHeight);
    CGFloat expandButtonWidth = expandLabelStyle.expandLabelWidth;
    CGFloat expandButtonHeight = expandLabelStyle.expandLabelHeight;
    self.expandFrame = CGRectMake(expandButtonX, expandButtonY, expandButtonWidth, expandButtonHeight);
}


#pragma mark - Override Method
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGPoint touchPoint = [[touches anyObject] locationInView:self];
    if (CGRectContainsPoint(self.expandFrame, touchPoint)) {
        [self.expandLabelStyle updateExpandStatus:!self.expandLabelStyle.expandStatus];
        [self updateLabelWithExpandLabelStyle:self.expandLabelStyle];
        if (self.expandLabelTapBlock) {
            self.expandLabelTapBlock(self.expandLabelStyle.expandStatus);
        }
    }
}

四. FJFExpandLabel

最后对刚才的内容进行了整理和封装，方便以后功能的复用和扩展，于是有了FJFExpandLabel，这里FJFExpandLabel继承自UILabel，方便替换，同时通过FJFExpandLabelStyle配置参数来进行参数的自我配置。

可配置参数如下:

// limitWidth 限制 宽度
@property (nonatomic, assign) CGFloat limitWidth;
// compareLineNum 比较行数
@property (nonatomic, assign) NSInteger compareLineNum;
// assignLineNum 指定截取行数
@property (nonatomic, assign) NSInteger assignLineNum;
// expandLabelWidth label 宽度
@property (nonatomic, assign) CGFloat expandLabelWidth;
// expandLabelHeight label 高度
@property (nonatomic, assign) CGFloat expandLabelHeight;
// labelShowType 显示 类型
@property (nonatomic, assign) FJFExpandLabelShowType labelShowType;
// contentLabelStyle 文本 内容 属性
@property (nonatomic, strong) FJFLabelAttributeStyle *contentLabelStyle;
// expandLabelStyle 展开 内容 属性
@property (nonatomic, strong) FJFLabelAttributeStyle *expandLabelStyle;
// pickupLabelStyle 收起 内容 属性
@property (nonatomic, strong) FJFLabelAttributeStyle *pickupLabelStyle;
// suffixLabelStyle 后缀(...) 内容 属性
@property (nonatomic, strong) FJFLabelAttributeStyle *suffixLabelStyle;

// assignLineWidth 指定行 字符串 宽度
@property (nonatomic, assign, readonly) CGFloat assignLineWidth;
// assignLineHeight 指定行 字符串 高度
@property (nonatomic, assign, readonly) CGFloat assignLineHeight;
// beyondLimit 是否 超过 限制
@property (nonatomic, assign, getter=isBeyondLimit, readonly) BOOL beyondLimit;
// expandStatus 展开状态 展开/收起 （默认收起状态）
@property (nonatomic, assign, getter=isExpandStatus, readonly) BOOL expandStatus;

这里有三种类型可以进行设置:

• 一种是具有展开和收起功能
• 一种是只有展开的功能
• 一种是什么都没有

具体配置代码举例如下:

@implementation FJFExpandLabelViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    FJFExpandLabelStyle *tmpLabelStyle = [[FJFExpandLabelStyle alloc] init];
    tmpLabelStyle.limitWidth = 280;
    tmpLabelStyle.contentLabelStyle.labelText = @"😖t😅😯😠x😗丿😮o wcqtx😛a😠xx😞😔😞e😭😣mc😂yt.m😞😔😞e😭😣bcg😞😔😞e😭😣j  6😞😔😞e😭😣me😂etm😢😎aup \n Nh😝n \n 😪😔😖😐😗 r \n a😯j m😃gle😦😢😄 \n，😅😨😭😆😠😊0bay,😋😆z😏😑[嗨],点击[ https://pinyin.cn/e288503 ]查看表情";
    tmpLabelStyle.compareLineNum = 3;
    tmpLabelStyle.assignLineNum = 2;
    tmpLabelStyle.labelShowType = FJFExpandLabelShowTypeExpandAndPickup;
    
    FJFExpandLabel *tmpLabel = [[FJFExpandLabel alloc] initWithFrame:CGRectMake(60, 180, 280, 150)];
    [tmpLabel updateLabelWithExpandLabelStyle:tmpLabelStyle];
    tmpLabel.numberOfLines = 0;
    [self.view addSubview:tmpLabel];
    self.view.backgroundColor = [UIColor whiteColor];
}
@end

五. 遇到的问题

这个功能的核心代码就是通过CoreText来获取展示的每一行文本，其他的都是相关的逻辑性问题，不过过程中遇到过一个坑，这里记录下.

当时通过CoreText来获取展示的每一行文本是直接从网上复制、黏贴过来的，那段代码里面设置富文本的字体是这样写的:

NSMutableAttributedString *attStr = [[NSMutableAttributedString alloc] initWithString:contentText];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
[attStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, attStr.length)];
    
CTFontRef myFont = CTFontCreateWithName((CFStringRef)([contentFont fontName]), [contentFont pointSize], NULL);
[attStr addAttribute:(NSString *)kCTFontAttributeName
                   value:(__bridge id)myFont
                   range:NSMakeRange(0, attStr.length)];
CFRelease(myFont);

通过函数CTFontCreateWithName来创建CTFontRef格式的字体，然后设置到富文本中，正常来说CTFontRef和UIFont是可以相互转换的，所以也没有特别在意。

但其实这个函数CTFontCreateWithName创建的字体和我们指定的字体是不一样的。

比如说:

UIFont *contentFont = [UIFont systemFontOfSize:12];
CTFontRef myFont = CTFontCreateWithName((CFStringRef)([contentFont fontName]), [contentFont pointSize], NULL);

打印出两个字体:
contentFont:

Printing description of contentFont:
<UICTFont: 0x7ff746003670> font-family: ".SFUI-Regular"; font-weight: normal; font-style: normal; font-size: 12.00pt

myFont:

Printing description of myFont:
<UICTFont: 0x7ff741404fa0> font-family: "Times New Roman"; font-weight: normal; font-style: normal; font-size: 12.00pt

而我其它地方富文本的字体属性是直接通过NSFontAttributeName来设置的,比如说:

[attributeString addAttribute:NSFontAttributeName value:contentLabelFont range:NSMakeRange(0, replyContent.length)];

因此就导致了，计算的差异，这个问题，害我当时找了挺久的，特意记录一下。

推荐:

关于CoreText的相关文章可以看下这位大神的几篇文章，写得特别清晰:

CoreText实现图文混排
CoreText实现图文混排之点击事件
CoreText实现图文混排之文字环绕及点击算法
CoreText实现图文混排之尺寸估算及文本选择