UI提供一个图片转换Html,两种方法实现UILabel的图文并茂的显示html文本

概述

本文讲述用2中方法在UILabel中显示带图片和文字的HTML文本。

先预览下显示效果：

如果你的设备时iOS 9或以上，默认只允许HTTPS，请打开HTTP请求许可，参照:iOS 9打开HTTP请求许可

方案一：

//HTML文本 包含图片、文本

NSString *htmlString=@"< img src=http://upload-images.jianshu.io/upload_images/937405-50a8ad2d8866fc12.png>  花羊羊领取了你的红包"

UILabel *label=[UILabel alloc] initWithFrame:CGRectMake(50, 200, 220, 20)];

[self.view addSubview:label];

UIFont *font=[UIFont systemFontOfSize:14];

label.font=font;

NSDictionary *optoins=@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType,

NSFontAttributeName:font};

NSData *data=[htmlString dataUsingEncoding:NSUnicodeStringEncoding];

NSAttributedString *attributeString=[[NSAttributedString alloc] initWithData:data

options:optoins

documentAttributes:nil

error:nil];

label.attributedText=attributeString;

方案一点评：

这种方案只是实现了显示，显示效果好不好是另一回事。事实证明，这种方案的显示效果很不好：

我们现在要对方案一进行优化。

方案一优化思路：

1.缩小图片，让图片与字体显示差不多大；

2.让字体显示垂直方向居中。

优化后的方案一：

//HTML文本 包含图片、文本

NSString *htmlString=@"< img src=http://upload-images.jianshu.io/upload_images/937405-50a8ad2d8866fc12.png>  花羊羊领取了你的红包"

//我们可以先把src对应的图片解析出来，放到本地

NSRange httpRange=[htmlString rangeOfString:@"http://"];

NSRange endRange=[htmlString rangeOfString:@".png"];

NSString *picString=[htmlString substringWithRange:NSMakeRange(httpRange.location, endRange.location+endRange.length-httpRange.location)];

[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:picString] options:nil progress:nil completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {

//按照字体大小缩小图片，具体实现在下文

UIImage *scaledImage=[self scaleImage:image font:font];

NSData *imgData=UIImagePNGRepresentation(scaledImage);

NSString *libPath=[NSSearchPathForDirectoriesInDomains(NSLibraryDirectory,     NSUserDomainMask, YES) lastObject];

NSString *cachePath=[libPath stringByAppendingPathComponent:@"Caches"];

NSString *scaledImagesPath=[cachePath stringByAppendingPathComponent:@"scaledImages"];

if(![[NSFileManager defaultManager] fileExistsAtPath:scaledImagesPath]){

[[NSFileManager defaultManager] createDirectoryAtPath:scaledImagesPath withIntermediateDirectories:YES attributes:nil error:nil];

}

NSString *picName=[[picString componentsSeparatedByString:@"/"] lastObject];

NSString *filePath=[scaledImagesPath stringByAppendingPathComponent:picName];

[imgData writeToFile:filePath atomically:YES];

NSString *path=[NSURL fileURLWithPath:filePath].absoluteString;

//用本地的图片路径替换远程图片路径

htmlString=[htmlString stringByReplacingOccurrencesOfString:picString withString:path];

}];

UILabel *label=[UILabel alloc] initWithFrame:CGRectMake(50, 200, 220, 20)];

[self.view addSubview:label];

UIFont *font=[UIFont systemFontOfSize:14];

label.font=font;

NSDictionary *optoins=@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType,

NSFontAttributeName:font};

NSData *data=[htmlString dataUsingEncoding:NSUnicodeStringEncoding];

NSAttributedString *attributeString=[[NSAttributedString alloc] initWithData:data

options:optoins

documentAttributes:nil

error:nil];

label.attributedText=attributeString;

优化后的方案一点评

优化后的方案一显示效果差强人意。这种方法成功的解决了图片大小的问题，以及文本不居中的问题，但图片没有居中对齐，网上也找不到方法，只有继续探寻。

方案二：

//HTML文本 包含图片、文本

NSString *htmlString=@"< img src=http://upload-images.jianshu.io/upload_images/937405-50a8ad2d8866fc12.png>  花羊羊领取了你的红包"

//我们可以先把src对应的图片解析出来，放到本地

NSRange httpRange=[htmlString rangeOfString:@"http://"];

NSRange endRange=[htmlString rangeOfString:@".png"];

NSString *picString=[htmlString substringWithRange:NSMakeRange(httpRange.location, endRange.location+endRange.length-httpRange.location)];

UIImage *scaledImage;

[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:picString] options:nil progress:nil completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {

//按照字体大小缩小图片，具体实现在下文

scaledImage=[self scaleImage:image font:font];

NSData *imgData=UIImagePNGRepresentation(scaledImage);

NSString *libPath=[NSSearchPathForDirectoriesInDomains(NSLibraryDirectory,     NSUserDomainMask, YES) lastObject];

NSString *cachePath=[libPath stringByAppendingPathComponent:@"Caches"];

NSString *scaledImagesPath=[cachePath stringByAppendingPathComponent:@"scaledImages"];

if(![[NSFileManager defaultManager] fileExistsAtPath:scaledImagesPath]){

[[NSFileManager defaultManager] createDirectoryAtPath:scaledImagesPath withIntermediateDirectories:YES attributes:nil error:nil];

}

NSString *picName=[[picString componentsSeparatedByString:@"/"] lastObject];

NSString *filePath=[scaledImagesPath stringByAppendingPathComponent:picName];

[imgData writeToFile:filePath atomically:YES];

//用空字符串替换远程图片路径

htmlString=[htmlString stringByReplacingOccurrencesOfString:picString withString:@""];

}];

UILabel *label=[UILabel alloc] initWithFrame:CGRectMake(50, 200, 220, 20)];

[self.view addSubview:label];

UIFont *font=[UIFont systemFontOfSize:14];

label.font=font;

//利用NSTextAttachment文UILabel添加图片，并调整位置实现居中对齐

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

attach.bounds=CGRectMake(2, -(label.frame.size.height-font.pointSize)/2, 12, 14);

attach.image=scaledImage;

NSMutableAttributedString *componets=[[NSMutableAttributedString alloc] init];

NSAttributedString *imagePart=[NSAttributedString attributedStringWithAttachment:attach];

[componets appendAttributedString:imagePart];

NSDictionary *optoins=@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType,

NSFontAttributeName:font};

NSData *data=[htmlString dataUsingEncoding:NSUnicodeStringEncoding];

NSAttributedString *textPart=[[NSAttributedString alloc] initWithData:data

options:optoins

documentAttributes:nil

error:nil];

[componets appendAttributedString:textPart];

label.attributedText=componets;

方案二点评：

方案二显示效果略复杂，但是达到了我们需要的正常显示效果。

最后，附上根据字体大小缩小图片的方法：

-(UIImage *)scaleImage:(UIImage *)origin font:(UIFont *)font{

CGFloat imgH=origin.size.height;

CGFloat imgW=origin.size.width;

CGFloat width;

CGFloat height;

CGFloat fontHeight=font.pointSize;

if(imgW>imgH){

width=fontHeight;

height=fontHeight/imgW*imgH;

}

else{

height=fontHeight;

width=fontHeight/imgH*imgW;

}

UIGraphicsBeginImageContext(CGSizeMake(width, height));

[origin drawInRect:CGRectMake(0, 0, width, height)];

UIImage *scaledImage=UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return scaledImage;

}