阅读 576

iOS中webView嵌套tableView中动态高度问题

前言

在开发中,我们可能遇到html网页的展示需求,为了让展现内容灵活多变,故很多新闻类的应用都是采用html+本地原生界面进行展示开发的。 从获取html源码开始说起吧!在拿到html源码的时候,我们第一步要将这些网页内容展示到webView上面,显然,这一步很简单。如果整个页面单纯的是一个网页的话,基本就完工了,就是纯网页展示嘛!但是如果是webView嵌入到原生的页面中,比如将webView嵌入到tableView中,就会遇到一些问题。最不好解决的问题可能就是webView的高度问题了。

方案

webView这个控件大家估计都知道,它是有内容高度的,就是contentSize,如果内容高度比控件的高度大的话,那么滚动的时候就是整个webView在滚动,而外层的tablView你会发现似乎没法接收当前的滚动手势。这样其实造成了一个问题,就是本来要浏览tableView所要展示的内容,而结果却成了滚动webView了,是不是很奇怪,这样会影响用户体验。

其实,解决的方法也很简单,只要将webView的contentSize的高度设置为webView的控件高度就可以了。这样就不会出现webView的内容滚动问题了。关键是如何设置这个内容高度,什么时候设置它比较合适。

其实我尝试了很多种方案,比如在webView的代理回调中去实现高度的更新,但是代理中,只有一个webView内容全部加载完成以后的回调方法,如果在这个时候更新的话,会有很明显的跳跃效果,真的是很痛苦。因为网页的内容是实时变化的,如果在网页加载到最后的时候,在去更新它的高度,这个跳跃会更明显。而我们所需要的其实就是实时更新网页内容的高度,只有这样才能做到像浏览网页一样浏览tablView中的webView。所以为了解决这个问题,我用了kvo,使用kvo监听网页内容的高度,如果高度发生变化,就去更新webView的控件高度,这样就做到了实时性,让网页的高度与网页内容的高度始终保持一致,这样其实就达到了我们期待的效果。

实现

就说说实现吧!代码奉上,哈哈~

- (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添加监听,监听webView的内容高度
    [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;
    
    //设置webView为tableView的header
    self.tableView.tableHeaderView = self.webView;
    
    [self.view addSubview:self.tableView];
    
    
    

}
复制代码
//实时改变webView的控件高度,使其高度跟内容高度一致
- (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{

    //销毁的时候别忘移除监听
    [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;

    
}

复制代码

对应的效果如下:

webView高度demo.gif

例子

点我看 Demo

关注下面的标签,发现更多相似文章
评论