OS開發小記:iOS富文本框架DTCoreText在UITableView上的使用
要在頁面中顯示自己的布局,比如文字的字體和顏色、圖文並排的樣式,我們要用iOS SDK的原生UI在app本地搭建,如果一個頁面需要在服務器端獲取數據的話,我們也要在本地搭建好固定的布局,解析服務器傳回的Json數據去進行填充。但是如果一個頁面的布局是不固定的話,比如一個web頁面,用HTML與CSS封裝,我們通常會使用UIWebView進行處理。但是這樣處理等於是是把某一個頁面純粹當成了Web頁面進行渲染,在移動app開發中,這樣的情況被稱為“非原生”,不僅會失去渲染速度和交互體驗,當一個頁面上既有服務器傳回的HTML與CSS樣式又有原生的UI控件時,UIWebView就會變得特別不好處理,與其他UI控件間的通信也顯得很不協調。
UIWebView處理不好這種問題的原因,是因為它遵循瀏覽器解析web頁面的方式:即逐句解析 。這種解析方式類似於解釋型語言,或稱腳本語言,只需要下載整段代碼中的一部分代碼就可以渲染出效果。這不同於一般意義上的編譯型語言,如C、C++、Objective-C等,它是在運行的階段去進行翻譯,因此會喪失很多的效率。此外,蘋果還為它的webview提供了很多強大的功能,除了最基本的渲染網頁上的文字、圖片、視頻以及交互外,它甚至還可以直接渲染doc、pdf、excel、ppt等一系列常用的文件格式。這麽強大的一個控件對系統資源的占用可想而知。
解決這個問題的辦法是:把Html+Css字符串直接由服務器傳到本地,調用iOS/OS X底層的渲染引擎CoreText去進行渲染。換句話說,這種渲染方式是輕量級的,它去掉了許多Web渲染的繁雜步驟和功能,直接根據Html+Css去渲染圖片、文字的樣式。當然,根據你的需求,你也可以決定是否處理超鏈接和顯示視頻等。
如下圖所示,網易新聞客戶端等很多流行的app就是采用類似的方法:
在這個頁面中,布局肯定是不確定,因為所有的文章都是由網易的網編用某種富文本編輯器編寫的,雖然會對移動端做一些優化。而下方又有原生的UITableViewCell(評論、其他新聞)以及UIButton等控件,在這種情況下用一個WebView嵌入肯定是不恰當的。
非常感謝來自澳洲的Oliver Drobnik,秉著開源和分享的精神,為我們提供了完美的框架——DTCoreText。DTCoreText就是筆者所要使用的這種輕量級的Html+Css樣式的解析框架。
以下是在GitHub上的地址以及文檔:
GitHub:https://github.com/Cocoanetics/DTCoreText
接口文檔說明:https://docs.cocoanetics.com/DTCoreText/
筆者推薦用CocoaPods對DTCoreText進行導入。因為在GitHub上下載的demo中會缺一個子工程:DTFoundation。你還得把這個子工程導入到原工程中。另外如果你想研究以下DTCoreText的底層實現,可以看看下面這篇文章:http://blog.cnbang.net/tech/2630/ 。下面筆者就最近開發遇到的問題做一些總結。
如上圖所示,左圖的布局中最上部是一個UIImageView,下面是一個分Section的UITableView,包括右圖所示的顯示評論條目的tableview。下部的評論框是一個單獨的UIView控件。在第二個cell中能看到帶樣式的文字和圖片,這個cell就是使用了DTCoreText的結果。在這裏,主要是使用
以下是部分核心代碼:
- @interface DiscoverDetailViewController ()<DiscoverDetailTableViewCellDelegate,DTAttributedTextContentViewDelegate>
- BOOL _useStaticRowHeight;
- // NSArray *_snippets;
- NSString * const AttributedTextCellReuseIdentifier = @"AttributedTextCellReuseIdentifier";
cellCache類似於tableview的緩存池,用於存放已經生成過的cell
- - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
- else if (indexPath.section == 2)
- DTAttributedTextCell *dtcell = (DTAttributedTextCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
在上面這個確定cell的方法中,省略號部分是其他沒有用到DTAttributedTextCell的處理邏輯,可以不破壞這些邏輯,而在你指定的某個indexpath中用到DTCoreText的處理邏輯:類似於tableview的緩存池一樣的處理方法。
- - (DTAttributedTextCell *)tableView:(UITableView *)tableView preparedCellForIndexPath:(NSIndexPath *)indexPath
- // workaround for iOS 5 bug
- NSString *key = [NSString stringWithFormat:@"%ld-%ld", (long)indexPath.section, (long)indexPath.row];
- DTAttributedTextCell *cell = [cellCache objectForKey:key];
- if ([self _canReuseCells])
- cell = (DTAttributedTextCell *)[tableView dequeueReusableCellWithIdentifier:AttributedTextCellReuseIdentifier];
- cell = [[DTAttributedTextCell alloc] initWithReuseIdentifier:AttributedTextCellReuseIdentifier];
- cell.accessoryType = UITableViewCellAccessoryNone;
- cell.hasFixedRowHeight = _useStaticRowHeight;
- // cache it, if there is a cache
- [cellCache setObject:cell forKey:key];
- [self configureCell:cell forIndexPath:indexPath];
- - (void)configureCell:(DTAttributedTextCell *)cell forIndexPath:(NSIndexPath *)indexPath
- // NSDictionary *snippet = [_snippets objectAtIndex:indexPath.row];
- NSString *html = [_dataDictionary objectForKey:@"content"];
- [cell setHTMLString:html];
- [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
- cell.attributedTextContextView.shouldDrawImages = YES;
- cell.attributedTextContextView.delegate = self;
- cell.attributedTextContextView.backgroundColor = [ANGUIColorPlus colorWithHexString:@"#efeff4"];
- - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
- else if(section == 2)
- DTAttributedTextCell *cell = (DTAttributedTextCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
- return [cell requiredRowHeightInTableView:tableView];
看到上面這三個方法,筆者感覺非常熟悉,DTCoreText非常遵循UITableView原本的設計方法,對cell的重用管理做得很好。而且,關於確定高度的方法DTAttributedTextCell也給出了一個封裝好的自適應高度的方法,使用起來非常方便。
- // reuse does not work for variable height
- if ([self respondsToSelector:@selector(tableView:heightForRowAtIndexPath:)])
- // only reuse cells with fixed height
上面這個方法用於判斷適應當前高度的cell是否可重用,如果可以重用就不需要重新加載了。
此外,如果要加載圖片,還需要實現下面這個代理方法:
- #pragma mark - DTAttributedTextContentViewDelegate
- - (UIView *)attributedTextContentView:(DTAttributedTextContentView *)attributedTextContentView viewForAttachment:(DTTextAttachment *)attachment frame:(CGRect)frame{
- if([attachment isKindOfClass:[DTImageTextAttachment class]]){
- CGFloat aspectRatio = frame.size.height / frame.size.width;
- CGFloat width = dUISize_Screen_Width - 16*2;
- CGFloat height = width * aspectRatio;
- UIView *View = [[UIView alloc] initWithFrame:frame];
- UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,width,height)];
- imageView.backgroundColor = [UIColor grayColor];
- [imageView sd_setImageWithURL:attachment.contentURL placeholderImage:dImage_loadPicDefault_LongSquare options:EMSDWebImageProgressiveDownload];
- imageView.canClick = YES;
- imageView.contentMode = UIViewContentModeScaleAspectFit;
- [View addSubview:imageView];
這個代理方法會根據當前要顯示圖片的url和frame返回一個用於顯示圖片的UIView。筆者在這裏使用SDWebImage作為顯示網絡圖片的方式。然後添加一個UIImageView在View上,這樣做可以根據屏幕的大小按比例縮放要顯示的圖片,以適應顯示。
以上就是實現在UITableView上使用DTCoreText的主要過程。加載的過程很快,滑動時也不會實現卡頓,很流暢。
https://blog.csdn.net/lala2231/article/details/50780842
OS開發小記:iOS富文本框架DTCoreText在UITableView上的使用