iOS Label的图文混排

来源：互联网发布：造价师做题软件编辑：程序博客网时间：2024/06/06 13:00

最近做项目，要达到一个效果，图片加文字，文字是从后台获取的数据，长度不确定，但是要求图片文字挨着（imageView.right 和 label.leading相等）,本人技术欠缺，所以刚开始实现的效果是这样的。如图

为了达到效果，所以想了几个方法‘

1：请求完数据，然后计算数据的长度，然后把这行UI 重新写一下

网上找的别人的，还没试验过

下面分两种情况考虑：1、UILabel宽度不变，根据字体多少，自动调整UILabel的高度，并折行显示。代码如下：[cpp] view plaincopy1 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]];78 //宽度不变，根据字的多少计算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;1415 [self.view addSubview:label];16 [label release];2、UILabel高度不变，根据字体多少，自动调整UILabel的宽度，并折行显示代码如下：[cpp] view plaincopy1 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]];78 //高度固定不折行，根据字的多少计算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;1516 [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，所以可以自由操作添加的位置；

效果图如下

搞定收工~

2 0