前言
背景：最近做的專案中有這樣一個需求，一個話題詳情介面內部分內容為html標籤，其他為普通內容，然後html標籤是巢狀在Cell中的，一開始用的是UILabel載入html標籤，結果發現對於圖片標籤沒有更好的適應螢幕，果斷換成UIWebView，使用WebView載入計算高度的時候是有些注意點的，所以在此記錄一下，並總結一下相關知識，以備後續查閱。
一、cell巢狀webView具體程式碼及講解
1、自定義Cell並初始化資料
if (indexPath.section == 0) {
LSTopicDetailMainCell *cell = [tableView dequeueReusableCellWithIdentifier:[NSString stringWithUTF8String:object_getClassName([LSTopicDetailMainCell class])] forIndexPath:indexPath];
cell.viewModel = self.viewModel.topMainCellViewModel;
return cell;
}複製程式碼使用viewModel裝配自定義Cell，注意其identifier已經註冊，如下
[_mainTableView registerClass:[LSTopicDetailMainCell class] forCellReuseIdentifier:[NSString stringWithUTF8String:object_getClassName([LSTopicDetailMainCell class])]];複製程式碼2、返回高度
比較麻煩的是高度的計算，因為我對於Cell自動佈局高度的計算是用的 UITableView+FDTemplateLayoutCell 這個第三方，核心是提前計算高度及快取，對UILabel載入Html標籤來說很OK，但是對於webView來講就有些問題，因為他的高度需要在載入完的回撥中去獲取並重新整理，所以需要手動計算。
if (indexPath.section == 0) {
return self.viewModel.topMainCellViewModel.cellHeight;
}複製程式碼3、自定義Cell內相關程式碼
- 載入Html標籤
[self.contentWebView loadHTMLString:viewModel.content baseURL:nil];複製程式碼- UIWebView回撥處理（核心程式碼）
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 獲取內容高度
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.scrollHeight"] intValue];
// 防止死迴圈
if (height != _viewModel.htmlHeight) {
_viewModel.htmlHeight = height;
if (_viewModel.htmlHeight > 0) {
// 更新佈局
CGFloat paddingEdge = 10;
WS(weakSelf)
[self.contentWebView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(paddingEdge);
make.right.equalTo(-paddingEdge);
make.top.equalTo(weakSelf.headerImageView.mas_bottom).offset(paddingEdge);
make.bottom.equalTo(-paddingEdge);
}];
// 重新整理cell高度
_viewModel.cellHeight = _viewModel.otherHeight + _viewModel.htmlHeight;
[_viewModel.refreshSubject sendNext:nil];
}
}
}複製程式碼上面的程式碼註釋已經很清楚了，需要解釋的是防止死迴圈的意思是你重新整理cell的程式碼在回撥裡，當你重新整理的時候，他也會走回撥，不判斷處理的話會造成死迴圈。
4、重新整理Cell
[self.viewModel.topMainCellViewModel.refreshSubject subscribeNext:^(id x) {
@strongify(self);
[self.mainTableView reloadSection:0 withRowAnimation:UITableViewRowAnimationNone];
}];複製程式碼5、完事
二、Cell巢狀UILabel載入Html標籤處理
假如你只是需要處理文字相關的Html標籤的話，使用Label載入是最好的選擇
1、高度處理（核心程式碼）
if (indexPath.section == 0) {
return [tableView fd_heightForCellWithIdentifier:[NSString stringWithUTF8String:object_getClassName([LSTopicDetailMainCell class])] cacheByIndexPath:indexPath configuration:^(LSTopicDetailMainCell *cell) {
@strongify(self);
cell.viewModel = self.viewModel.topMainCellViewModel;
}];
}複製程式碼2、Masonry佈局
[self.contentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(paddingEdge);
make.right.equalTo(-paddingEdge);
make.top.equalTo(weakSelf.headerImageView.mas_bottom).offset(paddingEdge);
make.bottom.equalTo(-paddingEdge);
}];複製程式碼3、Label載入Html
NSAttributedString *content = [[NSAttributedString alloc] initWithData:[viewModel.content dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];
self.contentLabel.attributedText = content;複製程式碼三、UIWebView詳解
1、三種載入方式
- 載入URL內容
NSURL *url = [NSURL URLWithString:@"http://www.jianshu.com/users/1a9cd48c3cf0/latest_articles"];
[self.webview loadRequest:[NSURLRequest requestWithURL:url]];複製程式碼- 載入本地的HTML檔案
NSString *htmlPath = [[[NSBundle mainBundle] bundlePath]
stringByAppendingPathComponent:@"wanglongshuai.html"];
[self.webview loadRequest:[NSURLRequest requestWithURL:
[NSURL fileURLWithPath:htmlPath]]];複製程式碼- 載入html字串
NSString *htmlPath = [[[NSBundle mainBundle] bundlePath]
stringByAppendingPathComponent:@"wanglongshuai.html"];
NSString *htmlString = [NSString stringWithContentsOfFile: htmlPath
encoding:NSUTF8StringEncoding
error:NULL];
[self.webview loadHTMLString:htmlString baseURL:[NSURL
fileURLWithPath:htmlPath]];複製程式碼2、UIWebViewDelegate代理方法
//準備載入內容: 通過返回值來進行是否載入的設定
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
//開始載入
- (void)webViewDidStartLoad:(UIWebView *)webView;
//載入完成
- (void)webViewDidFinishLoad:(UIWebView *)webView;
//載入失敗
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;複製程式碼3、常用屬性及API
- 基本屬性及API
**webView的代理**
@property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate;
**內建的scrollView**
@property (nonatomic, readonly, strong) UIScrollView *scrollView NS_AVAILABLE_IOS(5_0);
**URL請求**
@property (nullable, nonatomic, readonly, strong) NSURLRequest *request;
**是否縮放到適合螢幕大小**
@property (nonatomic) BOOL scalesPageToFit;
**執行javaScript操作**
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;複製程式碼- 載入相關屬性及API
- (void)reload; //重新載入資料
- (void)stopLoading; //停止載入資料
@property (nonatomic, readonly, getter=isLoading) BOOL loading; //是否正在載入
- (void)goBack; //返回上一級
- (void)goForward; //跳轉下一級
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack; //能否返回上一級
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward; //能否跳轉下一級複製程式碼- 視訊相關屬性
//YES，自動檢測網頁上的電話號碼，單擊可以撥打
@property (nonatomic) BOOL detectsPhoneNumbers NS_DEPRECATED_IOS(2_0, 3_0);
//設定某些資料變為連結形式，這個列舉可以設定如電話號，地址，郵箱等轉化為連結
@property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0);
//設定是否使用內聯播放器播放視訊
@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0); // iPhone Safari defaults to NO. iPad Safari defaults to YES
//設定視訊是否自動播放
@property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0); // iPhone and iPad Safari both default to YES
//設定音訊播放是否支援ari play功能
@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0); // iPhone and iPad Safari both default to YES
//設定是否將資料載入如記憶體後渲染介面
@property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0); // iPhone and iPad Safari both default to NO
//設定使用者互動模式
@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0); // default is YES複製程式碼本文由作者 王隆帥 編寫，轉載請保留版權網址，感謝您的理解與分享，讓生活變的更美好!
參考