高性能圖文混排框架,構架順滑的iOS應用

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:@"http://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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容