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