开发者社区> 珲少> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计

简介:
+关注继续查看

扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计

        在iOS开发中,图文混排一直都是UI编程的一个核心点,也有许多优秀的第三方引擎,其中很有名的一套图文混排的框架叫做DTCoreText。但是在前些日的做的一个项目中,我并没有采用这套框架,原因有二,一是这套框架体积非常大,而项目的需求其实并不太高;二是要在这套框架中修改一些东西,难度也非常大,我最终采用的是一个叫做RCLabel的第三方控件,经过一些简单的优化和完善,达到了项目的要求。

        先来介绍一下我项目中的图文混排的需求:首先我从服务器中取到的数据是字符串,但是其中穿插图片的位置是一个HTML的图片标签,标签里的资源路径就是图片的请求地址。需要达到的要求是这些数据显示出来后,图片的位置要空出来,然后通过异步的网络请求获取图片的数据,再将图片插入文字中。

        要自己实现一套这样的引擎确实会比较麻烦,幸运的是RCLabel可以完美的帮我们解析带有HTML标签的数据,进行图文混排,我们先来看一下这个东西怎么用,下面是我封装的一个展示html数据的view:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
@interface YHBaseHtmlView()<YHRTLabelImageDelegate>
{
    //RCLabel对象
    RCLabel * _rcLabel;
    //保存属性 用于异步加载完成后刷新
    RTLabelComponentsStructure * _origenComponent;
    //含html标签的数据字符串
    NSString * _srt;
}
 
@end
 
@implementation YHBaseHtmlView
 
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/
- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
    //将rclabel初始化
        _rcLabel = [[RCLabel alloc]init];
        [self addSubview:_rcLabel];
 
    }
    return self;
}
 
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _rcLabel = [[RCLabel alloc]initWithFrame:frame];
        [self addSubview:_rcLabel];
    }
    return self;
}
-(void)reSetHtmlStr:(NSString *)htmlStr{
    _srt = htmlStr;
    //这个代理是我额外添加的 后面解释
    _rcLabel.imageDelegate=self;
    //设置frame
    _rcLabel.frame=CGRectMake(0, 0, self.frame.size.width, 0);
    //设置属性
    _origenComponent = [RCLabel extractTextStyle:htmlStr IsLocation:NO withRCLabel:_rcLabel];
    _rcLabel.componentsAndPlainText = _origenComponent;
   //获取排版后的size
    CGSize size = [_rcLabel optimumSize];
    //重新设置frame
    _rcLabel.frame=CGRectMake(0, 0, _rcLabel.frame.size.width, size.height);
    self.frame=CGRectMake(self.frame.origin.x, self.frame.origin.y, _rcLabel.frame.size.width, size.height);
}
//这是我额外添加的代理方法的实现
-(void)YHRTLabelImageSuccess:(RCLabel *)label{
    _origenComponent = [RCLabel extractTextStyle:_srt IsLocation:NO withRCLabel:_rcLabel];
    _rcLabel.componentsAndPlainText = _origenComponent;
     
    CGSize size = [_rcLabel optimumSize];
    _rcLabel.frame=CGRectMake(0, 0, _rcLabel.frame.size.width, size.height);
    self.frame=_rcLabel.frame;
    if ([self.delegate respondsToSelector:@selector(YHBaseHtmlView:SizeChanged:)]) {
        [self.delegate YHBaseHtmlView:self SizeChanged:self.frame.size];
    }
}

RCLabel的用法很简单,总结来说只有三步:

1.初始化并设置frame

2.通过带html标签的数据进行属性的初始化

3.将属性进行set设置并重设视图frame

RCLabel是很强大,并且代码很简练,但是其中处理图片的部分必须是本地的图片,即图片html标签中的路径必须是本地图片的名字,其内部是通过[UIImage ImageNamed:]这个方法进行图片的渲染的,所以要达到我们的需要,我们需要对其进行一些简单的扩展:

1、在属性设置方法中添加一个参数,来区分本地图片与网络图片:

1
2
//我在这个方法中添加了location这个bool值,实际上rclabel这个参数也是我添加的,是为了后面代理使用的
+ (RTLabelComponentsStructure*)extractTextStyle:(NSString*)dataimage IsLocation:(BOOL)location withRCLabel:(RCLabel *)rcLabel;

2、在实现方法中添加如下代码,因为原文件有1900多行,在其中弄清楚逻辑关系也确实费了我不小的力气,我这里只将我添加的代码贴过来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#warning 这里进行了兼容性处理
                if (location) {
                //本地图片的渲染
                    if (tempURL) {
                        UIImage  *tempImg = [UIImage imageNamed:tempURL];
                        component.img = tempImg;
                         
                    }
                }else{//这里做远程图片数据的处理
                //这里我进行了缓存的操作,这个缓存中心是我封装的框架中的另一套东西,这里可以不用在意
                    //先读缓存
                    NSData * ceche = [[YHBaseCecheCenter sharedTheSingletion] readCecheFile:tempURL fromPath:YHBaseCecheImage];
                    if (ceche) {
                        UIImage * tempImg = [UIImage imageWithData:ceche];
                        component.img=tempImg;
                    }else{
                    //在分线程中进行图片数据的获取
                        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
                            if (tempURL) {
                                NSData * data = [YHBaseData getDataWithUrl:tempURL];
                                if (data) {
                                //获取完成后村缓存
                                    //做缓存
                                    [[YHBaseCecheCenter sharedTheSingletion]writeCecheFile:data withFileID:tempURL toPath:YHBaseCecheImage];
                                    //赋值 回调代理
                                    UIImage * tempImg = [UIImage imageWithData:data];
                                    component.img=tempImg;
                                    //这里代理是我添加的,当图片下载完成后 通知视图重新排版
                                    if ([[rcLabel imageDelegate]respondsToSelector:@selector(YHRTLabelImageSuccess:)]) {
                                        //在主线程中执行回调
                                        //这个地方要在主线程中执行,否则刷新会有延时
                                        dispatch_async(dispatch_get_main_queue(), ^{
                                             [[rcLabel imageDelegate] YHRTLabelImageSuccess:rcLabel];
                                        });
                             
                                    }
                                    
                                }
                                 
                            };
                             
                        });
                    }
                    
                     
                }

通过如上简单的扩展,基本达到了项目中的需求,这里把我的一些想法和思路分享给大家,有更好的解决方案,或者同是开发爱好者,欢迎指点与交流,我的QQ是316045346。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
动态滑动图片验证码组件(支持多语言,移动端)
动态滑动图片验证码组件(支持多语言,移动端)
0 0
Flutter如何将文本与图片混合编辑?(功能扩展篇)
一个优秀的富文本,应该包含优秀的排版算法、丰富的功能和渲染的高性能。在上一篇中,我们实现了可扩展的、基础的富文本编辑器。那么在本文中,让我们对富文本进行更多功能的扩展。
0 0
扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计
扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计
0 0
UWP应用载入SVG图片的兼容性方案
原文 UWP应用载入SVG图片的兼容性方案 新版本《纸书科学计算器》的更新点之一,就是优化了表达式的显示方式。在旧版本中,表达式里的符号是用png图片显示的,当用户放大看的时候会发现一些锯齿,非常影响使用体验。
930 0
补充上一篇 实现基于最新chrome的动态按需加载组件
先看 这里 有一个提案,建议引入import()函数,完成动态加载。 import(specifier) 上面代码中,import函数的参数specifier,指定所要加载的模块的位置。
569 0
扩展ExtJs 4.2.1 htmleditor 添加图片功能
  做项目的时候遇到这样一个问题,因为我是用ExtJs做的后台管理框架,所以当我使用ExtJs htmleditor 控件 的时候,发现没有图片上传的功能,于是我打算在网上找找有关的文章,居然真有人写过,不过可惜的是,不支持 ExtJs 4.
574 0
FusionCharts参数的详细说明和功能特性(转)
功能特性animation                    是否动画显示数据,默认为1(True)showNames                    是否显示横向坐标轴(x轴)标签名称rotateNames                是否旋转显示标签,默认为0(False):横向显示...
912 0
FusionCharts参数的详细说明和功能特性
功能特性animation                    是否动画显示数据,默认为1(True) showNames                    是否显示横向坐标轴(x轴)标签名称 rotateNames                是否旋转显示标签,默认为0(False)...
787 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务
立即下载
荷鲁斯移动端第三方库安全检测引擎介绍
立即下载
荷鲁斯 移动端第三方库安全检查引擎介绍
立即下载