iOS Cell嵌套UIWebView（內附UIWebView詳解）

前言

背景：最近作的項目中有這樣一個需求，一個話題詳情界面內部份內容爲html標籤，其餘爲普通內容，而後html標籤是嵌套在Cell中的，一開始用的是UILabel加載html標籤，結果發現對於圖片標籤沒有更好的適應屏幕，果斷換成UIWebView，使用WebView加載計算高度的時候是有些注意點的，因此在此記錄一下，並總結一下相關知識，以備後續查閱。

1、cell嵌套webView具體代碼及講解

一、自定義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])]];複製代碼

二、返回高度

比較麻煩的是高度的計算，由於我對於Cell自動佈局高度的計算是用的 UITableView+FDTemplateLayoutCell 這個第三方，核心是提早計算高度及緩存，對UILabel加載Html標籤來講很OK，可是對於webView來說就有些問題，由於他的高度須要在加載完的回調中去獲取並刷新，因此須要手動計算。

if (indexPath.section == 0) {

        return self.viewModel.topMainCellViewModel.cellHeight;
    }複製代碼

三、自定義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的代碼在回調裏，當你刷新的時候，他也會走回調，不判斷處理的話會形成死循環。

四、刷新Cell

[self.viewModel.topMainCellViewModel.refreshSubject subscribeNext:^(id x) {

        @strongify(self);
        [self.mainTableView reloadSection:0 withRowAnimation:UITableViewRowAnimationNone];
    }];複製代碼

五、完事

2、Cell嵌套UILabel加載Html標籤處理

假如你只是須要處理文字相關的Html標籤的話，使用Label加載是最好的選擇

一、高度處理（核心代碼）

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;
        }];
    }複製代碼

二、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);
    }];複製代碼

三、Label加載Html

NSAttributedString *content = [[NSAttributedString alloc] initWithData:[viewModel.content dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];
    self.contentLabel.attributedText = content;複製代碼

3、UIWebView詳解

一、三種加載方式

• 加載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]];複製代碼

二、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;複製代碼

三、經常使用屬性及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複製代碼

本文由做者 王隆帥 編寫，轉載請保留版權網址，感謝您的理解與分享，讓生活變的更美好!

參考

www.jianshu.com/p/fbdb09b6b…