iOS 结合YYLabel实现文本的展开和收起

这篇具有很好参考价值的文章主要介绍了iOS 结合YYLabel实现文本的展开和收起。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目需要实现文本过多的时候最多展示五行,其余的折叠。点击可展开,再次点击可收起。

效果如下:

ios 显示全文展开收起,OC小知识点的整理,ios,ui

ios 显示全文展开收起,OC小知识点的整理,ios,ui

这是在UITableView的Cell里实现的,需要自适应高度。

一开始自定义了一个UIView直接追加到需要添加展开的最后一行的最后位置,覆盖了展示的内容。实现的并不完美。效果如下:

ios 显示全文展开收起,OC小知识点的整理,ios,ui

UI提出了改进:展开和收起都需要更在文本末尾。

网上搜索了一下下,找到了适合自己的方法:链接     

下面记录一下,加强记忆。

我这里是借用的xib来实现的布局,所以这段文本的高度单独拿出来了

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *detailHeight;

获取五行文本的高度

self.attDic = [NSString attDicWithFont:[UIFont systemFontOfSize:[NSString iPhoneFont:T_2 iPadFont:T_2 + 4]]
                                 textColor: [UIColor useLight:HexColor(0x616A73) Dark:HexAColor(DarkTitle,.6)]
                               textSpacing:0
                               lineSpacing:5
                        lineHeightMultiple:0
                       firstLineHeadIndent:0
                                 alignment:(NSTextAlignmentJustified)
                                headIndent:0
                                tailIndent:0
                    paragraphSpacingBefore:0
                          paragraphSpacing:0];
    
self.heightOfFiveLines = [NSString getHeightOfAttributedString:@"五\n行\n文\n字\n字" width:200 attibuteDic:self.attDic];
//attDic是自己封装的包含文本属性的字典
//文本显示的处理
- (void)setTextForDetail:(NSString *)introInfos {
    if (![introInfos isEqualToString:@""]) {
        self.label_detail.hidden = NO;
        self.background_detail.hidden = NO;
        self.label_detail.attributedText = [[NSAttributedString alloc]initWithString:introInfos attributes:self.attDic];
        self.heightsOfTexts = [NSString getHeightOfAttributedString:introInfos width:SCREEN_WIDTH-30*2 attibuteDic:self.attDic];//文本高度
        
        if (self.heightsOfTexts <= self.heightOfFiveLines) {//不需要折叠,不需要添加展开
            self.label_detail.userInteractionEnabled = NO;
            self.label_detail.numberOfLines = 0;
            self.detailHeight.constant = self.heightsOfTexts + 12*2;
            self.topMargin.constant = 10;
        }else{
            self.label_detail.userInteractionEnabled = YES;
            self.view_fold.hidden = NO;
            if (self.foldStatus) {//折叠态
                self.label_detail.numberOfLines = 5;
                self.detailHeight.constant = self.heightOfFiveLines + 12*2;
                [self setAdjustableTextWithDesc:introInfos];
            }else{
                self.heightsOfTexts = [NSString getHeightOfAttributedString:[NSString stringWithFormat:@"%@...收起",introInfos] width:SCREEN_WIDTH-30*2 attibuteDic:self.attDic];
                self.label_detail.numberOfLines = 0;
                self.detailHeight.constant = self.heightsOfTexts + 12*2;
                [self setShowTextWithDesc:introInfos];
            }
            self.topMargin.constant = 10;
        }
    }else{
        self.label_detail.hidden = YES;
        self.label_detail.text = @"";
        self.background_detail.hidden = YES;
        self.detailHeight.constant = 0;
        self.topMargin.constant = -20;
    }
}
//追加“...收起”
- (void)setShowTextWithDesc:(NSString *)desc {
    NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@...收起",desc] attributes:self.attDic];
    
    @weakify(self)
    //设置高亮色和点击事件
    [text yy_setTextHighlightRange:[[text string] rangeOfString:@"收起"]
                             color:HexColor(0x29CCCC)
                   backgroundColor:[UIColor clearColor]
                         tapAction:^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
        @strongify(self)
        [self action_fold];
    }];
    self.label_detail.attributedText = text;
}
//追加“...展开”
- (void)setAdjustableTextWithDesc:(NSString *)desc {
    NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:desc attributes:self.attDic];
    self.label_detail.attributedText = text;
    
    NSMutableAttributedString *showAll = [[NSMutableAttributedString alloc] initWithString:@"...展开" attributes:self.attDic];
    @weakify(self)
    [showAll yy_setTextHighlightRange:[[showAll string] rangeOfString:@"展开"]
                             color:HexColor(0x29CCCC)
                   backgroundColor:[UIColor clearColor]
                         tapAction:^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
        @strongify(self)
        [self action_fold];
    }];

//注释掉的地方是一开始用的添加附件这样的方式写的,其实在这个场景中并不需要,直接追加富文本就可
    //YYLabel *seeMore = [YYLabel new];
    //seeMore.attributedText = showAll;
    //seeMore.backgroundColor = [UIColor useLight:HexColor(0xFAFBFC) Dark:HexColor(DarkBackground)];
    //[seeMore sizeToFit];
    //NSMutableAttributedString *truncationToken = [NSAttributedString yy_attachmentStringWithContent:seeMore contentMode:UIViewContentModeScaleToFill attachmentSize:seeMore.size alignToFont:[UIFont systemFontOfSize:[NSString iPhoneFont:T_2 iPadFont:T_2 + 4]] alignment:YYTextVerticalAlignmentTop];
    //self.label_detail.truncationToken = truncationToken;

    self.label_details.truncationToken = showAll;
}

点击事件是个block,回传给UITableView

- (void)action_fold{
    if (self.block_fold) {
        self.block_fold([NSNumber numberWithBool:self.foldStatus]);
    }
}

UITableView的代理方法:- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath的处理

BookSheetDetailListBCell *cell = [tableView dequeueReusableCellWithIdentifier:@"BookSheetDetailListBCell"];
cell.foldStatus = [self.foldStatusArray[indexPath.row] boolValue];
cell.infoDic = self.dataArray[indexPath.row];
cell.block_fold = ^(id  _Nonnull info) {
                    @strongify(self)
                    self.foldStatusArray[indexPath.row] = @(![info boolValue]);
                    [self.tableView reloadRowAtIndexPath:indexPath withRowAnimation:(UITableViewRowAnimationFade)];
                };
return cell;

默认是不展开的状态。文章来源地址https://www.toymoban.com/news/detail-594608.html

到了这里,关于iOS 结合YYLabel实现文本的展开和收起的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现一个文字展开收起功能

    需求很常见,就是当一行文字过多时,显示省略号,然后显示 展开 两个字,点击,文字完全展示开,点击 收起 ,回到省略形式,如下图 有了上图,应该能更好理解,让我们再来细致分析下思路: 一行省略号 ,这个没啥难度,css可以实现(至于多行,差别不大) 展开和收

    2024年02月09日
    浏览(41)
  • 记录--不定高度展开收起动画 css/js 实现

    最近在做需求的时候,遇见了元素高度展开收起的动画需求,一开始是想到了使用 transition: all .3s; 来做动画效果,在固定高度的情况下, transition 动画很好使,满足了需求,但是如果要考虑之后可能还会有更改的情况下,如果每次都是用固定高度来做动画,会显得很繁琐,也

    2024年02月11日
    浏览(47)
  • 微信小程序---缓慢展开和收起效果(不需要wx:if控制实现)

    效果一: 点击中间问题,在中间缓慢展开 ,将下面往下撑开,点击再次收起效果 效果二: 点击添加商品,缓慢向下展开,点击收起,缓慢将下面收起效果 1、实现的原理: 通过height高度来控制展开或收起,当不需要展示时,高度为0,超过的部分用overflow: hidden;来隐藏,可

    2024年02月17日
    浏览(47)
  • VUE+ElementUI Table表格实现“指定行“展开并且其他行收起,“指定行”数据重复实现“合并行”

    遇到甲方爸爸一个需求,在原本的table表格中需要每一行具有下拉列表的功能,实现“指定行”展开,下拉菜单中并且含有数据属性重复的,则还需合并行。 展开行有两种方式: 方法一是利用table组件中 default-expand-all 属性,将 “内容是否存在” 作为判断条件,实现默认展开

    2024年01月23日
    浏览(45)
  • element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解

    实现代码: 按钮: 组件:  在ref中绑定folderTreeRef  展开收起: 效果: 实现原理: 打印上面的   folderTreeRef ,可以从原型链的 store 中找到 _getAllNodes 属性 官方文档好像没有描述关于此属性的内容,查了好多资料,搜了多篇文章,可以发现 store 原型中有 _getAllNodes 这个属性

    2024年01月20日
    浏览(35)
  • [vue]v-for循环出的列表如何实现每一项单独展开收起

    展开收起最后一项的内容,展开收起的图标和信息改变 HTML代码 javasript data中声明要循环的数据、当前的下标(string类型) data中声明要循环的数据、当前的下标数组类型(array) 思路:判断当年下标是否在数组下标中来控制展开收起,不存在就将该下标加入数组,再点击一次

    2024年02月12日
    浏览(35)
  • iOS MT19937随机数生成,结合AES-CBC加密算法实现。

    按处理顺序说明: 1. 生成随机数序列字符串函数 生成方法MT19937,初始种子seed,利用C++库方法,生成: 2. 对第一部中的随机数序列字符串进行sha256加密,得到64字节的一个数据流函数。  3. AES-CBC加密解密方法 /*     CCCrypt方法提供了CBC 和 ECB 两种AES加密模式,     如果不传

    2024年04月09日
    浏览(44)
  • vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能

    一、TableTreeLevel组件 

    2024年02月15日
    浏览(50)
  • 在线图表编辑工具Draw.io本地部署并结合内网穿透实现远程协作办公

    提到流程图,大家第一时间可能会想到Visio,不可否认,VIsio确实是功能强大,但是软件为收费,并且因为其功能强大,导致安装需要很多的系统内存,并且是不可跨平台使用。所以,今天给大家推荐一款更实用的流程图软件—— Draw.io 在线绘图工具。 其实,除了写代码,画

    2024年01月24日
    浏览(44)
  • iOS开发-实现热门话题标签tag显示控件

    iOS开发-实现热门话题标签tag显示控件 话题标签tag显示非常常见,如选择你的兴趣,选择关注的群,超话,话题等等。 由于显示的是在列表中,这里整体控件是放在UITableViewCell中的。 2.1 标签tag按钮实现 自定义标签tag按钮INRmdTopicButton INRmdTopicButton.h INRmdTopicButton.m 2.2 显示排列

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包