zoukankan      html  css  js  c++  java
  • 高性能图文混排框架,构架顺滑的iOS应用-b

    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
  • 相关阅读:
    java基础部分的一些有意思的东西。
    antdvue按需加载插件babelpluginimport报错
    阿超的烦恼 javaScript篇
    .NET E F(Entity Framework)框架 DataBase First 和 Code First 简单用法。
    JQuery获得input ID相同但是type不同的方法
    gridview的删除,修改,数据绑定处理
    jgGrid数据格式
    Cannot read configuration file due to insufficient permissions
    Invoke action which type of result is JsonResult on controller from view using Ajax or geJSon
    Entity model数据库连接
  • 原文地址:https://www.cnblogs.com/isItOk/p/5875132.html
Copyright © 2011-2022 走看看