1. 程式人生 > >TableViewCell 中嵌入WKWebview 顯示HTML字串,TableView高度自適應

TableViewCell 中嵌入WKWebview 顯示HTML字串,TableView高度自適應

需求:每個tableviewcell 新增一個wkwebview 用於顯示HTML 要求webview高度自適應,,每個cell高度自適應,,

網上查的資料,,使用的通知來重新整理tableview,,會使tableview重新整理次數過多,,本文的方法tableview只重新整理一次

實現思路:cell中新增一個代理和一個index屬性(cell協議方法中傳入indexpath.row) 在webview載入完HTML協議方法中重新設定webview的高度 通過代理把每個cell的webview高度和這個cell的index傳回Controller,在代理方法中把傳回的index作為key,webview高度作為value存入一個字典,,當所有的cell裡webview都加在完成,,此時Controller中已有一個儲存了所有cell高度(即webview高度)的字典,,tableview設定高度的協議方法中通過indexpath.row 去字典中取cell的高度即可。。

怎樣防止tableview重新整理陷入死迴圈?通過存入本地一個狀態,,具體看程式碼


為了方便在工程中新增名為test.text的文字檔案,裡面是一個數組,每個元素是字典存放HTML字串

(

{

  option = "<p style=\"line-height:20.1pt; margin:5pt 0pt\"><span style=\"font-family:'Times New Roman'; font-size:10.5pt\">A.</span><span style=\"font-family:'Times New Roman'; font-size:10.5pt\"> </span><span style=\"color:#333333; font-family:'Times New Roman'; font-size:10.5pt\">0.643(</span><span style=\"color:#333333; font-family:\U5b8b\U4f53; font-size:10.5pt\">\U7cbe\U786e\U5230\U767e\U5206\U4f4d</span><span style=\"color:#333333; font-family:'Times New Roman'; font-size:10.5pt\">)</span></p>";

},

{

option = "<p style=\"line-height:20.1pt; margin:5pt 0pt\"><span style=\"font-family:'Times New Roman'; font-size:10.5pt\">B.</span><span style=\"font-family:'Times New Roman'; font-size:10.5pt\"> </span><span style=\"color:#333333; font-family:'Times New Roman'; font-size:10.5pt\">0.64(</span><span style=\"color:#333333; font-family:\U5b8b\U4f53; font-size:10.5pt\">\U7cbe\U786e\U5230\U767e\U5206\U4f4d</span><span style=\"color:#333333; font-family:'Times New Roman'; font-size:10.5pt\">)</span></p>";

}

Controller.m中

@interfaceSecondViewController ()<UITableViewDelegate,UITableViewDataSource,webViewCellDelegate>

@property (nonatomic, strong) UITableView *tableview;

@property (nonatomic, strong) NSMutableDictionary *cellHDic;

@property (nonatomic, strong) NSMutableArray *dataArr;

@end

@implementation SecondViewController

- (void)viewDidLoad {

    [superviewDidLoad];

self.view.backgroundColor = [UIColorwhiteColor];

/// 存放所有cell裡webview高度的字典

self.cellHDic = [NSMutableDictionarydictionary];

self.tableview = [[UITableViewalloc] initWithFrame:CGRectMake(0, 0, [UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height) style:UITableViewStylePlain];

    [self.viewaddSubview:self.tableview];

    self.tableview.delegate = self;

self.tableview.dataSource = self;

self.tableview.separatorStyle = UITableViewCellSeparatorStyleNone;

/// 防止tableview不停重新整理的狀態

    [[NSUserDefaultsstandardUserDefaults] setObject:@"0"forKey:@"reload"];

    [selfloadData];

}

- (void)loadData{

    [MBProgressHUDshowHUDAddedTo:self.viewanimated:YES];

/// 從工程中取出資料

NSBundle *mainBundle = [NSBundlemainBundle];

    NSString *txtPath = [mainBundle pathForResource:@"test" ofType:@"txt"];

NSArray *arr = [NSArrayarrayWithContentsOfFile:txtPath];

self.dataArr = [NSMutableArrayarrayWithArray:arr];

    [self.tableviewreloadData];

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

returnself.dataArr.count;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    NSString *CellIdentifier = [NSString stringWithFormat:@"Cell%ld%ld", [indexPath section], [indexPath row]];

    SecondTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (!cell) {

        cell = [[SecondTableViewCellalloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier];

    }

    cell.backgroundColor = [UIColorwhiteColor];

    cell.delegate = self;

    NSDictionary *dic = self.dataArr[indexPath.row];

    [cell refreshWebView:dic[@"option"] indexPath:indexPath.row];

    return cell;

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

return [self.cellHDic[[NSStringstringWithFormat:@"%ld",indexPath.row]] floatValue];

}

- (void)webViewDidFinishLoad:(CGFloat)webHeight cellIndex:(NSInteger)index{

    [self.cellHDicsetValue:[NSStringstringWithFormat:@"%f",webHeight] forKey:[NSStringstringWithFormat:@"%ld",index]];

/// 防止一直重新整理  只有字典中的元素個數和tableviewcell個數相同時才重新整理tableview

if (self.cellHDic.count==self.dataArr.count) {

/// 通過NSUserDefaults 存的一個狀態讓tableview只重新整理一次

if ([[[NSUserDefaultsstandardUserDefaults] objectForKey:@"reload"] isEqualToString:@"0"]) {

NSArray *paths = [NSArrayarrayWithObjects:[NSIndexPathindexPathForRow:index inSection:0],nil];

            [self.tableviewreloadRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];

            [MBProgressHUDhideHUDForView:self.viewanimated:YES];

            [[NSUserDefaultsstandardUserDefaults] setObject:@"1"forKey:@"reload"];

        }

    }

}

SecondTableViewCell.h


@protocol webViewCellDelegate<NSObject>

/// 傳回webview高度的代理

- (void)webViewDidFinishLoad:(CGFloat)webHeight cellIndex:(NSInteger)index;

@end

@interface SecondTableViewCell : UITableViewCell

@property (nonatomic,weak) id<webViewCellDelegate>delegate;

@property (nonatomic, assign) NSInteger indexPath;

- (void)refreshWebView:(NSString *)url indexPath:(NSInteger)index;

@end

SecondTableViewCell.m

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {

        [self createView];

    }

returnself;

}

- (void)createView{

self.newsWebView = [[WKWebViewalloc] init];

self.newsWebView.frame = CGRectMake(0, 0, self.contentView.frame.size.width, 0);

self.newsWebView.navigationDelegate = self;

self.newsWebView.scrollView.scrollEnabled = NO;

    [self.newsWebViewsizeToFit];

    [self.contentViewaddSubview:self.newsWebView];

    //

self.line = [[UIViewalloc] init];

    [self.contentViewaddSubview:self.line];

self.line.backgroundColor = [UIColorlightGrayColor];

}

- (void)refreshWebView:(NSString *)url indexPath:(NSInteger)index{

    self.indexPath = index;

    //// headerString 的新增是解決wkwebview 載入HTML是字型太小的問題

NSString *headerString = @"<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>";

    [self.newsWebViewloadHTMLString:[headerString stringByAppendingString:url] baseURL:nil];

}

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation*)navigation{

}

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation*)navigation{

    [webView evaluateJavaScript:@"document.body.scrollHeight"completionHandler:^(id_Nullable result,NSError * _Nullable error){

        CGFloat height = [result floatValue];

self.newsWebView.frame = CGRectMake(0, 0, self.contentView.frame.size.width, height);

        [self.delegatewebViewDidFinishLoad:height cellIndex:self.indexPath];

self.line.frame = CGRectMake(0, height-0.5, self.contentView.frame.size.width, 0.5);

    }];

}


demo地址

連結:https://pan.baidu.com/s/15HfCM1EdWcymv8J6vmGvKg  密碼:zkqh

相關推薦

TableViewCell 嵌入WKWebview 顯示HTML字串TableView高度適應

需求:每個tableviewcell 新增一個wkwebview 用於顯示HTML 要求webview高度自適應,,每個cell高度自適應,,網上查的資料,,使用的通知來重新整理tableview,,會使tableview重新整理次數過多,,本文的方法tableview只重新

jqgrid textarea使用回車鍵表格高度適應

應專案需求實現jqgrid中表格為textarea時高度自適應 在jqgrid中 編輯狀態時的表格 為input,textarea,select時回車事件將觸發單元格儲存"saveCell"; 原始碼: 1.在原始碼中搜索"textarea"找到到這段程式碼,將$(

Android GridView之新增分隔線動態設定高度實現高度適應並解決第一個item不顯示的問題

最近做一個專案時遇到一點問題,在這裡分享一下解決思路。 首先看效果圖: 這裡的需求是實現介面中的六個圖示,博主後來和同事討論過這個問題,用 GridView 實現費時費力好嘛,同事認為做6個 Button 就 好了,可能博主就愛鑽牛角尖吧,一開始認為怎麼辦只要還有辦法那就

vue動態加入ECharts圖表時ECharts寬度適應/不能100%撐開

首先上圖吧, 關於vue動態加入echarts時,寬度不能100%的問題,首先上圖 如圖,echarts中的canvas的width才500,顯然不對呀,右邊還有那麼大的一片空白,需要說明下互動步驟 看看程式碼, 按鈕觸發click方法 顯示彈窗或

常用css上下佈局-上邊高度固定下邊高度適應

 上下兩個盒子,上邊的固定,下面的自適應 <div class= "container"> <div class="left"></div> <div class="right"></div> </div

Android動態設定GridView的高度固定column實現高度適應

動態設定GridView的高度,固定column,根據gridview中的item個數設定高度: 呼叫以下方法:     [java]  view plain copy print ?

小程式tab切換內容高度適應

<view class='aboutusContainer'> <image src='/assets/images/company.png' class='companyLogo'></image> <view cl

css 頭部和底部固定中間高度適應出滾動條 css程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initia

html實現輸入框高度適應

html實現輸入框高度自適應 解決方案 情況一:父div中只有一個元素時正常寫 做網頁的時候為了解決textarea輸入時可以隨著文字的增加自動調整高度,將父div的heigth設定為auto 情況二:父d

ViewPager 巢狀多個不同高度的FragmentViewPager 高度適應

問題: ViewPager 巢狀多個Fragment,但是每個Fragment高度不一致,導致高度比較小的Fragment底部留有大片空白區域。 解決方法: 參考文章 關於ViewPager高度自適應(隨著pager頁的高度改變Viewpager的高度)

動態設定GridView的高度固定column實現高度適應

動態設定GridView的高度,固定column,根據gridview中的item個數設定高度: 呼叫以下方法: public static void setListViewHeightBased

頂部和底部固定高度中間高度適應的佈局

html程式碼 <div id="all"> <div id="top">top</div> <div id="conte

Nodejs:npm run build之後dist\index.html頁面在火狐可以正常顯示登入頁面並登入成功在Chrome可以正常顯示登入頁面登入失敗

問題描述:Nodejs:npm run build之後,dist\index.html頁面在火狐中可以正常顯示登入頁面並登入成功,在Chrome中可以正常顯示登入頁面,登入失敗   解決方法:將打包後的dist\index.html放到http伺服器上執行就可以登入了。   總結:

html嵌入flvplayer.swf播放器播放視訊

html中嵌入flvplayer.swf播放器,播放視訊 只需要改動紅色的程式碼: <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-4445535411111' codebase='http://download.macromedia.co

網頁html嵌入特殊字型(中文英文)

英文字型引入方法: html程式碼 <!DOCTYPE html> <html> <head> </head> <style> @font-face { font-family: 'fon

jquery Bootstrap 彈出框(Popover)顯示html內容URLdiv等

containe inpu lock ext ace src group mar 顯示 實現效果: 其實有個關鍵點: data-container="body" data-html="true" 註意下就可以了 <button type="button" class=

在網頁能正常顯示的頁面在手機端出現問題?

只需要在頁面的head中加上如下程式碼即可: <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,use

[Robot Framework] 校驗字串是否包含某個子字串校驗同時滿足兩個條件任意一個

${tWarningMessage} Run Keyword If ${tIfExist} AutoItLibrary.Win Get Text Generate Fee Data warning message ELSE Set Variable "" ${tIfDuplicateFee} Evaluat

linux在資料夾查詢檔案包含的字串並進行相應的替換

說明如下:要在一個目錄中,查詢所有檔案中包含的字串AAA,找出檔案,並用BBB進行替換掉。 #grep -r AAA ./                                 #表示在當前目錄中遞迴查詢包含AAA的檔案。 #grep -rl AAA ./                     

IOS UILabel顯示HTML字串

在寫一個IOS的APP時,有一部分片段是HTML字串,開始想使用UIWebView來顯示,開始實驗成功,後來不知何原因,無法顯示內容,後來發現IOS7後,UILabel支援顯示HTML顯示,具體見程式碼,一方面自己好查閱,也供有需要朋友查閱。 要顯示的HTML串 <f