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