iOS中webView嵌套tableView中動(dòng)態(tài)高度問題

在開發(fā)中,我們可能遇到html網(wǎng)頁的展示需求,為了讓展現(xiàn)內(nèi)容靈活多變,故很多新聞?lì)惖膽?yīng)用都是采用html+本地原生界面進(jìn)行展示開發(fā)的。
從獲取html源碼開始說起吧!在拿到html源碼的時(shí)候,我們第一步要將這些網(wǎng)頁內(nèi)容展示到webView上面,顯然,這一步很簡單。如果整個(gè)頁面單純的是一個(gè)網(wǎng)頁的話,基本就完工了,就是純網(wǎng)頁展示嘛!但是如果是webView嵌入到原生的頁面中,比如將webView嵌入到tableView中,就會(huì)遇到一些問題。最不好解決的問題可能就是webView的高度問題了。

webView這個(gè)控件大家估計(jì)都知道,它是有內(nèi)容高度的,就是contentSize,如果內(nèi)容高度比控件的高度大的話,那么滾動(dòng)的時(shí)候就是整個(gè)webView在滾動(dòng),而外層的tablView你會(huì)發(fā)現(xiàn)似乎沒法接收當(dāng)前的滾動(dòng)手勢。這樣其實(shí)造成了一個(gè)問題,就是本來要瀏覽tableView所要展示的內(nèi)容,而結(jié)果卻成了滾動(dòng)webView了,是不是很奇怪,這樣會(huì)影響用戶體驗(yàn)。

其實(shí),解決的方法也很簡單,只要將webView的contentSize的高度設(shè)置為webView的控件高度就可以了。這樣就不會(huì)出現(xiàn)webView的內(nèi)容滾動(dòng)問題了。關(guān)鍵是如何設(shè)置這個(gè)內(nèi)容高度,什么時(shí)候設(shè)置它比較合適。

其實(shí)我嘗試了很多種方案,比如在webView的代理回調(diào)中去實(shí)現(xiàn)高度的更新,但是代理中,只有一個(gè)webView內(nèi)容全部加載完成以后的回調(diào)方法,如果在這個(gè)時(shí)候更新的話,會(huì)有很明顯的跳躍效果,真的是很痛苦。因?yàn)榫W(wǎng)頁的內(nèi)容是實(shí)時(shí)變化的,如果在網(wǎng)頁加載到最后的時(shí)候,在去更新它的高度,這個(gè)跳躍會(huì)更明顯。而我們所需要的其實(shí)就是實(shí)時(shí)更新網(wǎng)頁內(nèi)容的高度,只有這樣才能做到像瀏覽網(wǎng)頁一樣瀏覽tablView中的webView。所以為了解決這個(gè)問題,我用了kvo,使用kvo監(jiān)聽網(wǎng)頁內(nèi)容的高度,如果高度發(fā)生變化,就去更新webView的控件高度,這樣就做到了實(shí)時(shí)性,讓網(wǎng)頁的高度與網(wǎng)頁內(nèi)容的高度始終保持一致,這樣其實(shí)就達(dá)到了我們期待的效果。

就說說實(shí)現(xiàn)吧!代碼奉上,哈哈~

- (void)creatView{

    self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 300)];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
    
    //使用kvo為webView添加監(jiān)聽,監(jiān)聽webView的內(nèi)容高度
    [self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
    
    self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStyleGrouped];
    self.tableView.backgroundColor = [UIColor whiteColor];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    self.tableView.rowHeight = 80;
    
    //設(shè)置webView為tableView的header
    self.tableView.tableHeaderView = self.webView;
    
    [self.view addSubview:self.tableView];
    
    
    

}
//實(shí)時(shí)改變webView的控件高度,使其高度跟內(nèi)容高度一致
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{

    if ([keyPath isEqualToString:@"contentSize"]) {
        CGRect frame = self.webView.frame;
        frame.size.height = self.webView.scrollView.contentSize.height;
        self.webView.frame = frame;
        
        self.tableView.tableHeaderView = self.webView;
    }
}

- (void)dealloc{

    //銷毀的時(shí)候別忘移除監(jiān)聽
    [self.webView.scrollView removeObserver:self forKeyPath:@"contentSize"];
}

#pragma -mark- tableView的代理方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *cellID = @"reuseCell";
    
    UITableViewCell *tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID];
    
    if (tableViewCell == nil) {
        tableViewCell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    
    
    tableViewCell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    
    return tableViewCell;

    
}

對(duì)應(yīng)的效果如下:

webView高度demo.gif

是不是很簡單,如有需要,可以去git上下載我的Demo,我的git地址是:
https://github.com/lccdl/LCCRepository

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容