iOS富文本实现列表显示效果

Posted 2023-03-14

参考技术A 需求 ：列表显示，色块显示在前，文字显示在后，文字换行也要和色块的前面开始显示。

看了需求介绍，可能不明白是什么意思，那就直接上图介绍咯！😝

上面两张图的实现逻辑都是一样的，左边间距为10，右边间距为10，高度是自己计算的。

逻辑分析：

(1)标题这样显示肯定是一个label，label的显示要用富文本来实现；

（2)把类型的内容拼接起来，分别计算类型的宽度，高度，内容的宽度高度；

（3）创建一个富文本NSMutableAttributedString,根据类型的宽度设置颜色值和字体大小；

(4)根据拼接出来的新字符串，计算的高度为label要显示出来的高度；

(5)新创建一个UIView，宽度是计算类型的宽度，在把UIView添加到Label上面；

/*

    **  第一种逻辑

    **

    */

    CGSize textSize  = CGSizeMake(self.view.bounds.size.width-20, MAXFLOAT);

    NSString *titleStr = @"教案设计单就是你的静少时诵诗书少时诵诗书";

    NSString *BtnTitle = @" 客是是是 ";

    NSString *allStr = [NSString stringWithFormat:@"%@%@",BtnTitle,titleStr];

    //计算类型的宽度，高度

    CGSize BtnSize = [self autosizeWithString:BtnTitle fromSize:textSize andFont:[UIFont systemFontOfSize:15]];

    //计算拼接起来的宽度，高度

    CGSize AllSizes = [self autosizeWithString:allStr fromSize:textSize andFont:[UIFont systemFontOfSize:17]];

    NSMutableAttributedString *hintString = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@%@",BtnTitle,titleStr]];

    [hintString addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(0, BtnTitle.length)];

    [hintString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(0,  BtnTitle.length)];

    [hintString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:17] range:NSMakeRange(BtnTitle.length , allStr.length - BtnTitle.length)];

    _showTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 200, 375 - 20, AllSizes.height)];

    _showTitleLabel.numberOfLines = 0;

    _showTitleLabel.lineBreakMode = NSLineBreakByWordWrapping;

    _showTitleLabel.attributedText = hintString;

    [self.view addSubview:_showTitleLabel];

    UIView *colorView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, BtnSize.width, 20)];

    colorView.backgroundColor =[UIColor redColor];

    colorView.layer.cornerRadius = 5;

    [_showTitleLabel addSubview:colorView];

 实现逻辑：准备好所有的类型图片，用图片和文字来实现；

这种实现逻辑的局限性：类型是没有定性的，用户可以随意改动类型里的文字，造成不匹        配的之后就会出现问题；

先把项目里的实现截图贴上😄。

逻辑实现分析：

（1）也是用一个label来显示，富文本来显示；

（2）创建带图片的富文本，把类型的图片放置第一位，图片本身就有圆角了。

/*

    **  第二种逻辑

    **

    */

    NSTextAttachment *attch = [[NSTextAttachment alloc] init];

    attch.image = [UIImage imageNamed:@"jinsheng"];

    attch.bounds = CGRectMake(0, -4, 18*3, 18);

    NSMutableAttributedString *attriStr = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@" %@ %@",titleStr,BtnTitle]];

      [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(attriStr.length-BtnTitle.length, BtnTitle.length)];

    CGFloat height = [self getHeightByWidth:375-25*2 title:attriStr font:[UIFont systemFontOfSize:17.0]];

    //创建带有图片的富文本

    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];

        //将图片放在第一位

    [attriStr insertAttributedString:string atIndex:0];

    NSMutableParagraphStyle* paragraphStyle1 = [[NSMutableParagraphStyle alloc] init];

    [paragraphStyle1 setLineSpacing:8];

    [attriStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle1 range:NSMakeRange(0, attriStr.length)];

    _imgTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, CGRectGetMaxY(_showTitleLabel.frame) + 100, 375 - 20,height)];

    _imgTitleLabel.numberOfLines = 0;

    _imgTitleLabel.lineBreakMode = NSLineBreakByWordWrapping;

    _imgTitleLabel.attributedText = attriStr;

    [self.view addSubview:_imgTitleLabel];

两种逻辑介绍完毕！！！！！🙃

突发奇想的忘记贴效果图了，贴下效果图：

gitHub:https://github.com/FuWuChicken/showListDemoString.git