iOS Label的图文混排
2015-12-26 17:09
441 查看
最近做项目,要达到一个效果,图片加文字,文字是从后台获取的数据,长度不确定,但是要求图片文字挨着(imageView.right 和 label.leading相等),本人技术欠缺,所以刚开始实现的效果是这样的。如图
为了达到效果,所以想了 几个方法‘
1:请求完数据,然后计算数据的长度,然后把 这行UI 重新写一下
网上找的别人的,还没试验过
2:今天的重点:
NSAttributedString and NSTextAttachment
大家都知道label 有一个 text属性 却不知道 还有一个 NSAttributedString 属性
本来我前段时间 用了 这个属性,但是 只知道 切换 文字的颜色 之类的,今天才知道 原来还可以 添加图片
代码如下
因为是可变的String,所以可以自由操作添加的位置;
效果图如下
搞定收工~
为了达到效果,所以想了 几个方法‘
1:请求完数据,然后计算数据的长度,然后把 这行UI 重新写一下
网上找的别人的,还没试验过
下面分两种情况考虑: 1、UILabel宽度不变,根据字体多少,自动调整UILabel的高度,并折行显示。 代码如下: [cpp] view plaincopy 1 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 200, 20)]; 2 label.font = [UIFont boldSystemFontOfSize:20.0f]; //UILabel的字体大小 3 label.numberOfLines = 0; //必须定义这个属性,否则UILabel不会换行 4 label.textColor = [UIColor whiteColor]; 5 label.textAlignment = NSTextAlignmentLeft; //文本对齐方式 6 [label setBackgroundColor:[UIColor redColor]]; 7 8 //宽度不变,根据字的多少计算label的高度 9 NSString *str = @"可以更改此内容进行测试,宽度不变,高度根据内容自动调节"; 10 CGSize size = [str sizeWithFont:label.font constrainedToSize:CGSizeMake(label.frame.size.width, MAXFLOAT) lineBreakMode:NSLineBreakByWordWrapping]; 11 //根据计算结果重新设置UILabel的尺寸 12 [label setFrame:CGRectMake(0, 10, 200, size.height)]; 13 label.text = str; 14 15 [self.view addSubview:label]; 16 [label release]; 2、UILabel高度不变,根据字体多少,自动调整UILabel的宽度,并折行显示 代码如下: [cpp] view plaincopy 1 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 20, 20)]; 2 label.font = [UIFont boldSystemFontOfSize:20.0f]; //UILabel的字体大小 3 label.numberOfLines = 0; //必须定义这个属性,否则UILabel不会换行 4 label.textColor = [UIColor whiteColor]; 5 label.textAlignment = NSTextAlignmentLeft; //文本对齐方式 6 [label setBackgroundColor:[UIColor redColor]]; 7 8 //高度固定不折行,根据字的多少计算label的宽度 9 NSString *str = @"高度不变获取宽度,获取字符串不折行单行显示时所需要的长度"; 10 CGSize size = [str sizeWithFont:label.font constrainedToSize:CGSizeMake(MAXFLOAT, label.frame.size.height)]; 11 NSLog(@"size.width=%f, size.height=%f", size.width, size.height); 12 //根据计算结果重新设置UILabel的尺寸 13 [label setFrame:CGRectMake(0, 10, size.width, 20)]; 14 label.text = str; 15 16 [self.view addSubview:label]; 17 [label relea
2:今天的重点:
NSAttributedString and NSTextAttachment
大家都知道label 有一个 text属性 却不知道 还有一个 NSAttributedString 属性
本来我前段时间 用了 这个属性,但是 只知道 切换 文字的颜色 之类的,今天才知道 原来还可以 添加图片
代码如下
UILabel *tequanbenjin = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.benxibaozhang.frame.size.width, self.benxibaozhang.frame.size.height)]; NSString *str = [NSString stringWithFormat:@"正在使用%@元特权本金",self.rewardStr]; NSMutableAttributedString *contentStr = [[NSMutableAttributedString alloc]initWithString:str]; NSTextAttachment *attach = [[NSTextAttachment alloc]init]; //设置 图片的image,和bounds attach.image = [UIImage imageNamed:@"sydunpai"]; attach.bounds = CGRectMake(0, -2, 14, 16); // 为什么0显示图片比文字高一点, 有大神能告诉我一下么。。 //attributedStringWithAttachment是一个NSMutableAttributedString的category方法 //NSAttributedString (NSAttributedStringAttachmentConveniences) NSAttributedString *contentString = [NSMutableAttributedString attributedStringWithAttachment:attach]; [contentStr insertAttributedString:contentString atIndex:0]; //把图片 插入 到 文字前边 tequanbenjin.textAlignment = NSTextAlignmentCenter; tequanbenjin.textColor = [UIColor lightGrayColor]; tequanbenjin.font = [UIFont systemFontOfSize:15]; tequanbenjin.attributedText = contentStr; [self.benxibaozhang addSubview:tequanbenjin]; [self.view addSubview:_benxibaozhang];
因为是可变的String,所以可以自由操作添加的位置;
效果图如下
搞定收工~
相关文章推荐
- GUI - Web前端开发框架
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 为Yahoo! UI Extensions Grid增加内置的可编辑器
- Cocos2d-x UI开发之文本类使用实例
- 谈谈对jquery ui tabs 的理解
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
- UI Events 用户界面事件
- jquery UI Datepicker时间控件的使用方法(基础版)
- 基于jQuery UI CSS Framework开发Widget的经验
- jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
- jQuery UI设置固定日期选择特效代码分享
- Jquery ajax 同步阻塞引起的UI线程阻塞问题
- jQuery UI的Dialog无法提交问题的解决方法