美文网首页PerformanceiOS开发iOS 开发
高性能图文混排框架,构架顺滑的iOS应用

高性能图文混排框架,构架顺滑的iOS应用

作者: 卟师 | 来源:发表于2016-09-07 16:06 被阅读1500次

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

    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 


    长按关注:

    QQ群:427763454

    欢迎你的投稿,展示的你的技术文章:812920365@qq.com

    相关文章

      网友评论

      • San心两yi_钟:你好,最近也在查看gallop的代码,想问一下,gallop 能不能像CoreText那样加载HTML 、 CSS样式 渲染?如果CSS样式不固定的话,该怎么用Gallop进行开发?
      • 07d93406ec39:很厲害 好多可以學習的

      本文标题:高性能图文混排框架,构架顺滑的iOS应用

      本文链接:https://www.haomeiwen.com/subject/okijettx.html