2021.04.25更新：创建了文章。
媒体/列表类的多行文本展示问题
在iOS的开发过程中，我们在进行文本展示的功能实现时，经常会遇到文本过长的情况，如果我们使用的是UITableView，那么文本在Cell中展示时如果全部展示完全的话，那么可能出现整屏只能展示一个Cell的情况。此时我们需要对多行文本进行分割，在前部分的末尾加上“展开/全文”的按钮，用户在点击此按钮后，Cell再展开进行全部文本的展示，展开后在全部文本的末尾处，还需要一个“收起”的按钮，用户点击后Cell再次回到收起的状态。
soul APP动画演示.gif
如何实现
1.模型准备
对于展示数据的模型，我们需要添加除了content（内容）外至少3个额外属性
//文字内容的实际高度
@property (nonatomic, assign) CGFloat titleActualH;
//文字内容的最大高度，具体的数值是 一行文本的高度*期望的最大显示行数
@property (nonatomic, assign) CGFloat titleMaxH;
//内容是否展开（默认不设置，都是NO，收起状态）
@property (nonatomic, assign) BOOL isOpen;
模型初始化时，在content属性的set方法中，对添加的属性进行赋值
- (void)setContent:(NSString *)content {
_content = content;
if ([NSString isEmptyString:content]) {
self.titleActualH = 0;
self.titleMaxH = 0;
} else {
NSUInteger numCount = 5; //这是cell收起状态下期望展示的最大行数
NSString *str = @"这是一行用来计算高度的文本"; //这行文本也可以为一个字，但不能太长
CGFloat W = kScreenWidth-30; //这里是文本展示的宽度
self.titleActualH = [content boundingRectWithSize:CGSizeMake(W, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:kRegularFont(14)} context:nil].size.height;
self.titleMaxH = [str boundingRectWithSize:CGSizeMake(W, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:kRegularFont(14)} context:nil].size.height*numCount;
}
}
2.Cell赋值
cell中用来展示文本的控件选用UITextView，再用富文本的方式进行内容的填充以及点击的响应。PS：此处也可以用UILabel+UIButton的方式，但是实现起来太麻烦，是一种很低效的解决方案。
在cell的赋值方法中，根据文本实际高度和最大高度的比较，动态的现实“收起”按钮（文本使用富文本的方式实现）。
- (void)setupCellData:(LWYMyFavouriteModel *)model {
NSString *suffixStr = @""; //添加的后缀按钮文本（收起或展开）
NSString *contentStr = model.content;
CGFloat H = model.titleActualH; //文本的高度，默认为实际高度
if (model.titleActualH > model.titleMaxH) {
//文本实际高度>最大高度，需要添加后缀
if (model.isOpen) {
//文本已经展开，此时后缀为“收起”按钮
suffixStr = @"收起";
contentStr = [NSString stringWithFormat:@"%@ %@", contentStr, suffixStr];
H = model.titleActualH;
} else {
//文本已经收起，此时后缀为“展开/全文”按钮
//需要对文本进行截取，将“...展开”添加到我们限制的展示文字的末尾
NSUInteger numCount = 5; //这是cell收起状态下期望展示的最大行数
CGFloat W = kScreenWidth-30; //这里是文本展示的宽度
NSString *tempStr = [self stringByTruncatingString:contentStr suffixStr:@"...展开" font:kRegularFont(14) forLength:W*numCount];
contentStr = tempStr;
suffixStr = @"展开";
H = model.titleMaxH;
}
}
NSMutableAttributedString *attStr = [[NSMutableAttributedString alloc] initWithString:contentStr attributes:@{NSFontAttributeName:kRegularFont(14)}];
self.contentTextView.linkTextAttributes = @{};
//给富文本的后缀添加点击事件
if(![NSString isEmptyString:suffixStr]){
NSRange range3 = [contentStr rangeOfString:suffixStr];
[attStr addAttribute:NSForegroundColorAttributeName value:[UIColor systemBlueColor] range:range3];//[UIColor colorWithHexString:@"#000000"]
NSString *valueString3 = [[NSString stringWithFormat:@"didOpenClose://%@", suffixStr] stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLFragmentAllowedCharacterSet]];
[attStr addAttribute:NSLinkAttributeName value:valueString3 range:range3];
}
self.contentTextView.attributedText = attStr;
}
/// 将文本按长度度截取并加上指定后缀
/// @param str 文本
/// @param suffixStr 指定后缀
/// @param font 文本字体
/// @param length 文本长度
- (NSString*)stringByTruncatingString:(NSString *)str suffixStr:(NSString *)suffixStr font:(UIFont *)font forLength:(CGFloat)length {
if (!str) return nil;
if (str && [str isKindOfClass:[NSString class]]) {
for (int i=(int)[str length] - (int)[suffixStr length]; i< [str length];i = i - (int)[suffixStr length]){
NSString *subStr = [str substringToIndex:i];
CGSize size = [subStr sizeWithAttributes:@{NSFontAttributeName:font}];
if(size.width < length){
NSString *tempStr = [NSString stringWithFormat:suffixStr, subStr];
CGSize size1 = [tempStr sizeWithAttributes:@{NSFontAttributeName:font}];
if(size1.width < length){
str = tempStr;
break;
}
}
}
}
return str;
}
3.在UITextView的代理方法中响应点击事件
Cell中的代码
- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange {
if ([[URL scheme] isEqualToString:@"didOpenClose"]) {
//点击了“展开”或”收起“，通过代理或者block回调，让持有tableView的控制器去刷新单行Cell
if (self.openCloseBlock) {
self.openCloseBlock();
}
return NO;
}
return YES;
}
控制器中的代码（此处是用block实现）
//返回Cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
LWYMyFavouriteModel *model = self.dataArray[indexPath.section];
CGFloat otherH = 100; //除了文本内容外其余的高度（根据项目需求而定）
if (model.titleActualH > model.titleMaxH) {
if (model.isOpen) {
return model.titleActualH+otherH;
} else {
return model.titleMaxH+otherH;
}
} else {
return model.titleActualH+otherH;
}
}
//返回Cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
LWYMyCollectionCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellID" forIndexPath:indexPath];
LWYMyFavouriteModel *model = self.dataArray[indexPath.section];
[cell setupCellData:model];
kWeakSelf(self);
[cell setOpenCloseBlock:^{ //Cell点击了“展开”或“收起”
NSMutableArray *tempArr = weakself.dataArray;
for (int i = 0; i < weakself.dataArray.count; i++) {
LWYMyFavouriteModel *subModel = weakself.dataArray[i];
if (subModel.favouriteId == model.favouriteId) {
//刷新数据源中对应的数据
model.isOpen = !model.isOpen;
[tempArr replaceObjectAtIndex:i withObject:model];
weakself.dataArray = [NSMutableArray arrayWithArray:tempArr];
//刷新指定的行
NSIndexSet * indexSet = [[NSIndexSet alloc] initWithIndex:i];
[weakself.tableView reloadSections:indexSet withRowAnimation:UITableViewRowAnimationAutomatic];
break;
}
}
}];
return cell;
}
网友评论