UIWebView取消自適應高度漆际,作為tableView的headerView實現(xiàn)HTML與評論的完美結合

<h1>在這記錄的是我的學習過程,如有錯誤請不吝批評</h1>

UIWebView是我們用來顯示HTML耸别,文件類型首要選擇的開發(fā)控件健芭。在使用過程中難免有一些配置達不到我們的要求。所以需要我們結合一些其他的語言或者使用特殊的處理來展示我們要的效果秀姐。

我在使用UIWebView展示HTML的時候慈迈,需要在此基礎上還顯示我們對這條HTML信息作出的評價列表。HTML和評論列表的數(shù)據(jù)是分開給的省有。so吩翻,用了UITableView這個控件,然后用UIWebView當做UITableViewtableViewHeaderView锥咸,評論列表數(shù)據(jù)就用自定義的cell就好了狭瞎。

這種做法有以下幾個問題需要解決:
1.UIWebView所顯示的HTML的高度怎么獲取搏予?即如果不允許UIWebView自適應高度熊锭,那么他的滾動高度要怎么獲取雪侥?
2.UIWebView作為UITableViewtableViewHeaderView時碗殷,出現(xiàn)的滑動沖突怎么解決??
3.在HTML數(shù)據(jù)并沒有做到自適應屏寬的前提下速缨,關閉UIWebView的高度自適應锌妻,如何保證自己寫的自適應屏寬的css樣式不受影響,能夠正常顯示旬牲?

首先仿粹,關于UIWebView的滾動高度的獲取搁吓,可以采用以下方式:

CGFloat _webViewHeight = [[_webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"]floatValue];

其次,關于webView與tableView的滑動沖突問題吭历,將webView的scrollEnable設置為no:

_webView.scrollView.scrollEnabled=NO;

最后堕仔,關于關閉了webView的高度自適應之后,保證自己寫的自適應屏寬的css樣式(關于自適應屏寬的css樣式請參考:iOS UIWebView加載HTML晌区,以及遇到問題的解決方案的最后)不受影響并正常顯示HTML文件內容:
將獲取webView的滾動高度以及重置webView的高度的代碼均放在UIWebViewDelegate中的
- (void)webViewDidFinishLoad:(UIWebView*)webView 這個方法中摩骨,也就是說,將更新webViewframe操作放到html加載完成之后朗若,這樣就保證了css樣式表已經讀取恼五,并將其中填寫的約束信息應用在了HTML文件中。

代碼:

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIWebViewDelegate>
{
    UIView *_view; // 裝載webView的容器

    // 請求下來保存的數(shù)據(jù)
    NSString *_name;
    NSString *_update_time;
    NSString *_content;
}

/// 加載詳情的view
@property(nonatomic,strong) UIWebView *webView;
/// 加載評論列表的View
@property (nonatomic, strong) UITableView *table;

@end

@implementation ViewController

#pragma mark - btn action
- (void) leftBarButtonClicked
{
    [self.navigationController popViewControllerAnimated:YES];
}

#pragma mark - Net request
- (void)detailNetRequest {
        _name=@"獲取下來的name字符串";
        _update_time = @"獲取下來的time字符串";
       _content = @"獲取下來的html content"; // 這里不包含<html,head,body>這些標簽
        // 網絡請求哭懈,在成功block里面添加下面這句代碼
        [weakSelf.webView loadHTMLString:[self getHtmlString] baseURL:nil];
}

#pragma mark - UITableViewDelegate, UITableViewDataSource
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuse"];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"reuse"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"評論數(shù)據(jù)%ld", indexPath.row];
    return cell;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 5;
}

#pragma mark - other
/// 拼接完整的html字符串:新添加了title灾馒, time的CSS樣式
- (NSString *)getHtmlString
{
    NSMutableString *html = [NSMutableString string];
    [html appendString:@"<html>"];
    [html appendString:@"<head>"];
    [html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"xxx.css" withExtension:nil]];
    [html appendString:@"</head>"];
    [html appendString:@"<body style=\"background:#f6f6f6\">"];
    [html appendString:[self getBodyString]];
    [html appendString:@"</body>"];
    [html appendString:@"</html>"];
    
    return html;
}

/// 拼接body內容:包含了title, time银伟, content
- (NSString *)getBodyString
{
    NSMutableString *body = [NSMutableString string];
    [body appendFormat:@"<div class=\"title\">%@</div>",_name];
    [body appendFormat:@"<div class=\"time\">%@</div>",_update_time];
    if (self.model.content != nil) {
        [body appendString:_content];
    }
    return body;
}

#pragma mark - life circle
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self loadCostomNavTitle:@"title"];
    [self setLeftBarItemWithImgName:@"return" action:@selector(leftBarButtonClicked)];
   
    // 加載視圖
    self.table=[[UITableView alloc]initWithFrame:CGRectMake(0,CGRectGetMaxY(self.webView.frame),SCREEN_WIDTH,SCREENH_HEIGHT-navigationBar_height - 48)];
    self.table.delegate=self;
    self.table.dataSource=self;
    self.table.separatorStyle=UITableViewCellSelectionStyleNone;
    [self.view addSubview:self.table];
    
    // 這個高度先給一個比較小的值,之后計算html的滾動高度之后會更新這個高度的绘搞。
    _view= [[UIView alloc]initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,100)];
    self.table.tableHeaderView=_view;
    // 同理這個也是一樣
    _webView= [[UIWebView alloc]initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,100)];
    // 這句是避免兩者的滑動產生沖突
    _webView.scrollView.scrollEnabled=NO;
    [_view addSubview:_webView];
    _webView.delegate=self;    
    // 網絡請求
    [self detailNetRequest];
}

#pragma mark - UIWebviewDelegate
- (void)webViewDidFinishLoad:(UIWebView*)webView {
    // 用來獲取HTML的滾動高度
    CGFloat _webViewHeight = [[_webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"]floatValue];
    
    // 更新webView的高度
    CGRect newFrame = _webView.frame;
    newFrame.size.height = _webViewHeight;
    _webView.frame = newFrame;
    [_webView sizeToFit];
    // 更新View的高度
    CGRect Frame = _view.frame;
    Frame.size.height = Frame.size.height+_webView.frame.size.height;
    _view.frame = newFrame;
    
    [self.table setTableHeaderView:_view];//這句話才是重點
    self.webView.frame = CGRectMake(0,0,SCREEN_WIDTH, _webViewHeight);
    self.webView.scrollView.contentSize = CGSizeMake(SCREEN_WIDTH, _webViewHeight+1);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

<h6>感謝以下幾位提供的技術總結:
iOS中UIWebview中網頁寬度自適應的問題
UIWebView 適配屏幕
TableView上的HeaderView放WebView
</h6>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末彤避,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子夯辖,更是在濱河造成了極大的恐慌琉预,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,406評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蒿褂,死亡現(xiàn)場離奇詭異圆米,居然都是意外死亡,警方通過查閱死者的電腦和手機啄栓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評論 3 398
  • 文/潘曉璐 我一進店門娄帖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人昙楚,你說我怎么就攤上這事近速。” “怎么了堪旧?”我有些...
    開封第一講書人閱讀 167,815評論 0 360
  • 文/不壞的土叔 我叫張陵削葱,是天一觀的道長。 經常有香客問我淳梦,道長析砸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,537評論 1 296
  • 正文 為了忘掉前任爆袍,我火速辦了婚禮首繁,結果婚禮上作郭,老公的妹妹穿的比我還像新娘。我一直安慰自己蛮瞄,他們只是感情好所坯,可當我...
    茶點故事閱讀 68,536評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挂捅,像睡著了一般芹助。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上闲先,一...
    開封第一講書人閱讀 52,184評論 1 308
  • 那天状土,我揣著相機與錄音,去河邊找鬼伺糠。 笑死蒙谓,一個胖子當著我的面吹牛,可吹牛的內容都是我干的训桶。 我是一名探鬼主播累驮,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼舵揭!你這毒婦竟也來了谤专?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,668評論 0 276
  • 序言:老撾萬榮一對情侶失蹤午绳,失蹤者是張志新(化名)和其女友劉穎置侍,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拦焚,經...
    沈念sama閱讀 46,212評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡蜡坊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,299評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了赎败。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秕衙。...
    茶點故事閱讀 40,438評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖僵刮,靈堂內的尸體忽然破棺而出灾梦,到底是詐尸還是另有隱情,我是刑警寧澤妓笙,帶...
    沈念sama閱讀 36,128評論 5 349
  • 正文 年R本政府宣布若河,位于F島的核電站,受9級特大地震影響寞宫,放射性物質發(fā)生泄漏萧福。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,807評論 3 333
  • 文/蒙蒙 一辈赋、第九天 我趴在偏房一處隱蔽的房頂上張望鲫忍。 院中可真熱鬧膏燕,春花似錦、人聲如沸悟民。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽射亏。三九已至近忙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間智润,已是汗流浹背及舍。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窟绷,地道東北人锯玛。 一個月前我還...
    沈念sama閱讀 48,827評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像兼蜈,于是被迫代替她去往敵國和親攘残。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,446評論 2 359

推薦閱讀更多精彩內容