类似微博内容展开收起功能

展开收起功能.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实现图文混排之尺寸估算及文本选择

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,636评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,890评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,680评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,766评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,665评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,045评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,515评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,182评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,334评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,002评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,599评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2赞 341

推荐阅读更多精彩内容

  • iOS-文本内容展开/收起实现方案
    方案1：YYLabel 问题：YYLabel继承于UIView不支持项目本身的自定义表情，UILabel能正常显示...
    笑破天阅读 3,119评论 2赞 7
  • 送你一个晚安故事
    我是黑夜里大雨纷飞的人啊 1 “又到一年六月，有人笑有人哭，有人欢乐有人忧愁，有人惊喜有人失落，有的觉得收获满满有...
    陌忘宇阅读 8,518评论 28赞 53
  • 信任重要性
    信任包括信任自己和信任他人 很多时候，很多事情，失败、遗憾、错过，源于不自信，不信任他人 觉得自己做不成，别人做不...
    吴氵晃阅读 6,173评论 4赞 8
  • 学习HM微博项目第8天
    步骤：发微博01-导航栏内容 -> 发微博02-自定义TextView -> 发微博03-完善TextView和...
    dibadalu阅读 3,122评论 1赞 3
  • 老公，我生病了
    杂志上说生理期的时候免疫力会下降，我觉得挺玄乎，但每次都应验在我身上，那几天总是会感冒，所以生理期同时会伴随着...
    宿原小姐阅读 1,067评论 1赞 3