高效能圖文混排架構，構架順滑的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:datainRange: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:UIViewContentModeScaleAspectFillimageSize:CGSizeMake(60, 60)alignment:LWTextAttachAlignmentToprange:NSMakeRange(webImageTextStorage.text.length - 7, 0)];/***  用網狀圖片替換掉指定位置的文字  ***/[textStorage lw_replaceTextWithImageURL:[NSURL URLWithString:@"https://avatars0.githubusercontent.com/u/8408918?v=3&s=460"]contentMode:UIViewContentModeScaleAspectFillimageSize:CGSizeMake(60, 60)alignment:LWTextAttachAlignmentToprange:NSMakeRange(webImageTextStorage.text.length - 7, 0)];/***  用UIView替換掉指定位置的文字  ***/[textStorage lw_replaceTextWithView:[[UISwitch alloc] initWithFrame:CGRectMake(0, 0, 60.0f, 30.0f)]contentMode:UIViewContentModeScaleAspectFillsize:CGSizeMake(60.0f, 30.0f)alignment:LWTextAttachAlignmentToprange: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