需求 ：列表显示，色块显示在前，文字显示在后，文字换行也要和色块的前面开始显示。
看了需求介绍，可能不明白是什么意思，那就直接上图介绍咯！😝
第一种实现的逻辑思路：(项目实现效果截图)
每一行的标题
每一行的标题
上面两张图的实现逻辑都是一样的，左边间距为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
网友评论