About Gallop
Gallop是一个功能强大、性能优秀的图文混排框架。

Features
主要用于解决以下需求:

  • 滚动列表的性能优化。Gallop使用异步绘制、视图层级合并、观察mainRunloop、对布局模型预先缓存等方法,能在实现复杂的图文混排界面时,仍然保持一个相当优秀的滚动性能(FPS基本保持在60)。

  • 项目内有使用Gallop构建的微信朋友圈Demo

  • 实现图文混排界面,比如在文本中添加表情,对文字添加点击链接。Gallop还提供了方便的方法可以直接完成表情、URL链接、@用户、#话题#等的解析。

  • 简便地实现对网络图片和本地图片的圆角和模糊处理,并能提供缓存,无需重复处理,优化性能。

  • 方便的解析HTML渲染生成原生iOS页面。项目内有使用Gallop构建的知乎日报Demo

滚动性能请使用真机调试查看效果

Demo Snapshot


Modifications
v0.3.5
LWImageStorage 新增一个属性isBlur。本地图片时,将在子线程进行模糊处理;当网络图片时,将在子线程进行模糊处理并直接缓存模糊的版本。详见Demo。
v0.3.4

  • 支持CoreData来缓存布局模型

v0.3.3

  • 更改了集成方式,解决了与SDWebImage部分文件冲突的问题。

v0.3.2

  • 现在,设置了圆角半径的网络图片将额外缓存一份,解决了内存消耗过大的问题。

v0.3.1

  • 解析HTML渲染生成原生iOS页面时,图片可以按照原图比例自适应高度了。

v0.3.0

  • 增加了解析HTML渲染生成原生iOS页面的功能。

v0.2.5

  • 对图片加载进行了优化。

v0.2.4

  • 增加了TransactionGroup,LWTransaction,CALayer+LWTransaction。

v0.2.3

  • 文字添加了描边绘制模式。

v0.2.2
增加了一个方法

- (void)lw_addLinkForWholeTextStorageWithData:(id)data linkColor:(UIColor *)linkColor highLightColor:(UIColor *)highLightColor;

废弃了方法

- (id)initWithFrame:(CGRect)frame maxImageStorageCount:(NSInteger)maxCount;
 

现在,LWAsyncDisplayView内部将自动维护一个复用池,可以为LWStorage设置一个NSString*类型的Identifier,来复用内部的相关UIView,简化API。

  • 修复了对文字添加链接重叠而发生冲突的bug.


TODO

  • 对视频、音频的支持。


Requirements

  • 使用Gallop实现网络图片加载部分依赖于SDWebImage 'SDWebImage', '~>3.7'

  • HTML解析依赖libxml2库

Installation

  • 在XCode的Build Phases-> Link Binary With Libraries中添加libxml2.tbd库

  • 在XCode的Build Setting->Header Search Paths中添加‘/usr/include/libxml2’

  • 安装SDWebImage

  • 将Gallop文件夹下的.h及.m文件添加到你的工程当中

  • #import "Gallop.h"

Usage
API
Quickstart
#import "Gallop.h"

1.生成一个文本模型

LWTextStorage* textStorage = [[LWTextStorage alloc] init];
textStorage.text = @"waynezxcv";
textStorage.font = [UIFont systemFontOfSize:15.0f];
textStorage.textColor = RGB(113, 129, 161, 1); /***  为文本添加点击链接事件  ***/
[textStorage addLinkWithData:data
inRange:NSMakeRange(0,statusModel.name.length)
linkColor:RGB(113, 129, 161, 1)
highLightColor:RGB(0, 0, 0, 0.15)]; /***  点击链接回调  ***/
- (void)lwAsyncDisplayView:(LWAsyncDisplayView *)asyncDisplayView didCilickedLinkWithfData:(id)data; /***  用本地图片替换掉指定位置的文字  ***/
[textStorage lw_replaceTextWithImage:[UIImage imageNamed:@"img"]
contentMode:UIViewContentModeScaleAspectFill
imageSize:CGSizeMake(60, 60)
alignment:LWTextAttachAlignmentTop
range:NSMakeRange(webImageTextStorage.text.length - 7, 0)]; /***  用网络图片替换掉指定位置的文字  ***/
[textStorage lw_replaceTextWithImageURL:[NSURL URLWithString:@"https://avatars0.githubusercontent.com/u/8408918?v=3&s=460"]
contentMode:UIViewContentModeScaleAspectFill
imageSize:CGSizeMake(60, 60)
alignment:LWTextAttachAlignmentTop
range:NSMakeRange(webImageTextStorage.text.length - 7, 0)]; /***  用UIView替换掉指定位置的文字  ***/
[textStorage lw_replaceTextWithView:[[UISwitch alloc] initWithFrame:CGRectMake(0, 0, 60.0f, 30.0f)]
contentMode:UIViewContentModeScaleAspectFill
size:CGSizeMake(60.0f, 30.0f)
alignment:LWTextAttachAlignmentTop
range:NSMakeRange(1,0)];

2.生成一个图片模型

/***  本地图片  ***/
LWImageStorage* imamgeStorage = [[LWImageStorage alloc] init];
imamgeStorage.contents = [UIImage imageNamed:@"pic.jpeg"];
imamgeStorage.frame = CGRectMake(textStorage.left, textStorage.bottom + 20.0f, 80, 80);
imamgeStorage.cornerRadius = 40.0f;//设置圆角半径 /***  网络图片  ***/
LWImageStorage* imamgeStorage = [[LWImageStorage alloc] init];
imamgeStorage.contents = [NSURL URLWithString:@"https://avatars0.githubusercontent.com/u/8408918?v=3&s=460"];
imamgeStorage.frame = CGRectMake(textStorage.left, textStorage.bottom + 20.0f, 80, 80);
imamgeStorage.cornerRadius = 40.0f; /***  点击图片回调  ***/
- (void)lwAsyncDisplayView:(LWAsyncDisplayView *)asyncDisplayView didCilickedImageStorage:(LWImageStorage *)imageStorage touch:(UITouch *)touch;
3.生成布局模型

LWLayout* layout = [[LWLayout alloc] init];
/***  将LWstorage实例添加到layout当中  ***/
[layout addStorage:textStorage];
[layout addStorage:imamgeStorage];

4.创建LWAsyncDisplayView,并将LWLayout实例赋值给创建LWAsyncDisplayView对象

LWAsyncDisplayView* asyncDisplayView = [[LWAsyncDisplayView alloc] initWithFrame:CGRectZero];
asyncDisplayView.layout = layout;
[self.view addSubview:asyncDisplayView];
5.解析HTML生成iOS原生页面
/*** 创建LWHTMLDisplayView  ***/
LWHTMLDisplayView* htmlView = [[LWHTMLDisplayView alloc] initWithFrame:self.view.bounds];
htmlView.parentVC = self;
htmlView.displayDelegate = self;
[self.view addSubview:htmlView]; /***  获取LWStorageBuilder  ***/
LWStorageBuilder* builder = htmlView.storageBuilder; /***  创建LWLayout  ***/
LWLayout* layout = [[LWLayout alloc] init]; /***  创建LWHTMLTextConfig  ***/
LWHTMLTextConfig* contentConfig = [[LWHTMLTextConfig alloc] init];
contentConfig.font = [UIFont fontWithName:@"Heiti SC" size:15.0f];
contentConfig.textColor = RGB(50, 50, 50, 1);
contentConfig.linkColor = RGB(232, 104, 96,1.0f);
contentConfig.linkHighlightColor = RGB(0, 0, 0, 0.35f); /***  创建另一个LWHTMLTextConfig  ***/
LWHTMLTextConfig* strongConfig = [[LWHTMLTextConfig alloc] init];
strongConfig.font = [UIFont fontWithName:@"STHeitiSC-Medium" size:15.0f];
strongConfig.textColor = [UIColor blackColor]; /***  通过XPath解析HTML并生成LWStorage  ***/
/***  通过UIEdgeInsets设置布局传入第二个参数 ***/
/*** 标签名对应的LWHTMLTextConfig以字典的Key-Value格式传入最后一个参数 ***/
[builder createLWStorageWithXPath:@"//div[@class='content']/p"
edgeInsets:UIEdgeInsetsMake([layout suggestHeightWithBottomMargin:10.0f], 10.0f, 10.0, 10.0f)
configDictionary:@{@"p":contentConfig,
@"strong":strongConfig,
@"em":strongConfig}]; /***  获取生成的LWStorage实例数组  ***/
NSArray* storages = builder.storages; /***  添加到LWLayout实例  ***/
[layout addStorages:storages]; /***  给LWHTMLDisplayView对象并赋值  ***/
htmlView.layout = layout;

原文地址:http://code4app.com/forum.php?mod=viewthread&tid=10375&extra=page%3D2%26filter%3Dsortid%26orderby%3Ddateline%26sortid%3D1

高性能图文混排框架,构架顺滑的iOS应用-b的更多相关文章

  1. iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

    iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏 ...

  2. [Swift通天遁地]八、媒体与动画-(13)CoreText框架实现图文混排

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. 【转】关于FLASH中图文混排聊天框的小结

    原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...

  4. Coretext实现图文混排及Gif图片播放

    CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念:  CTFont CTFontCollection CTFontD ...

  5. 【iOS】使用CoreText实现图文混排

    iOS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情.对此的解决方案有使用CoreText进行绘制,或者使用TextKit.本文主要讲解对于CoreT ...

  6. CoreText实现图文混排

    CoreText的介绍 Core Text 是基于 iOS 3.2+ 和 OSX 10.5+ 的一种能够对文本格式和文本布局进行精细控制的文本引擎.它良好的结合了 UIKit 和 Core Graph ...

  7. iOS开发 - 第05篇 - 项目 - 12 - 图文混排

    1.首页微博文字处理 对于之前微博项目中首页:微博文字中的用户名.话题.链接等文字须要高亮显示.表情字符串须要显示相应表情. 思路: 1>之前微博中的文字使用NSString,要达到不同文字的高 ...

  8. iOS 图文混排 链接 可点击

    对于这个话题 我想到 1 第一个解决方法就是使用 webView 比较经典 把所有复杂工作都交给控件本身去处理了,  但是好像好多需要自定义的地方 没法从 webView获得响应回调 :(估计也可以实 ...

  9. 用NSAttributedString实现简单的图文混排

    iOS7以后,因为TextKit的强大,可以用NSAttributedString很方便的实现图文混排(主要是利用了NSTextAttachment). 关于Textkit的牛逼之处,可以参考objc ...

随机推荐

  1. win8.1恢复win7 CTRL+Space切换输入法

    win8用起来还是有很多好用的东西的,但是最让我受不了的就是输入法的切换,可以说是丧心病狂!!!折磨了我好久,今天终于找到了解决的办法! 那就是这位博客园的哥们给出的方案! http://www.cn ...

  2. 跟我一起学习VIM - The Life Changing Editor

    前两天同事让我在小组内部分享一下VIM,于是我花了一点时间写了个简短的教程.虽然准备有限,但分享过程中大家大多带着一种惊叹的表情,原来编辑器可以这样强大,这算是对我多年来使用VIM的最大鼓舞吧.所以分 ...

  3. visual studio 2013 快捷键大全、VS2013常用快捷键

    Visual Studio 2013 是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等.VS 2013 中新增了很多提高 ...

  4. backboneJs 导图

  5. Agile.Net 组件式开发平台 - 数据访问组件

    Agile.DataAccess.dll 文件为系统平台数据访问支持库,基于FluentData扩展重写,提供高效的性能与风格简洁的API,支持多种主流数据库访问. 当前市面上的 ORM 框架,如 E ...

  6. xml初读

    形式良好的 XML 文档 “形式良好”或“结构良好”的 XML 文档拥有正确的语法. “形式良好”(Well Formed)的 XML 文档会遵守前几章介绍过的 XML 语法规则: XML 文档必须有 ...

  7. 229. Majority Element II My Submissions Question

    Total Accepted: 23103 Total Submissions: 91679 Difficulty: Medium Given an integer array of size n, ...

  8. Cocos2d-x使用瓦片地图

    图所示的复杂地图可以使用瓦片地图技术,瓦片地图是用一些小图片(瓦片)拼接而成,这样可以大大地减少内存消耗.如图所示的瓦片地图,只需要如图所示的三个瓦片就可以了. 瓦片地图 地图中的瓦片 瓦片地图的分类 ...

  9. ASP.NET实现折线图的绘制

    用到.Net中绘图类,实现折线图的绘制,生成图片,在页面的显示,代码如下: /// <summary> /// 获取数据 /// strChartName:图名称: /// yName:纵 ...

  10. Android EditText不弹出输入法焦点问题的总结

    转自:http://mobile.51cto.com/aprogram-403138.htm 看一个manifest中Activity的配置,如果这个页面有EditText,并且我们想要进入这个页面的 ...