神刀安全网

iOS资讯详情页实现—WebView和TableView混合使用

iOS资讯详情页实现—WebView和TableView混合使用

如果要实现一个底部带有相关推荐和评论的资讯详情页,很自然会想到WebView和TableView嵌套使用的方案。

这个方案是WebView作为TableView的TableHeaderView或者TableView的一个Cell,然后根据网页的高度动态的更新TableHeaderView和Cell的高度,这个方案逻辑上最简单,也最容易实现,而且滑动效果也比较好。

然而在实际应用中发现如果资讯内容很长而且带有大量图片和GIf图片的时候,APP内存占用会暴增,有被系统杀掉的风险。但是在单纯的使用WebView的时候内存占用不会那么大,WebView会根据自身视口的大小动态渲染HTML内容,不会一次性的渲染素有的HTML内容。这个方案只是简单的将WebView的大小更新为HTML的实际大小,WebView将会一次性的渲染所有的HTML内容,因此直接使用这种方案会有内存占用暴增的风险。

我们看下业界内主流的实现方案:

1、网易新闻:

通过Reveal查看网易新闻的视图结构,发现整个新闻详情页都是通过H5实现,包括评论、广告和相关推荐。

iOS资讯详情页实现—WebView和TableView混合使用

image.png

2、今日头条

今日头条新闻详情页最外层是ScrollView,WebView和ThemedView(里面包含TableView)是ScrollView同级SubView。

iOS资讯详情页实现—WebView和TableView混合使用

image.png

查看WebView的布局属性,发现WebView并没有被撑开,但是Y的坐标是发生变化的。

iOS资讯详情页实现—WebView和TableView混合使用

image.png

查看ThemedView的布局属性,发现其Y坐标是也是发生变化的,ThemedView正好位于WebView的下方。

iOS资讯详情页实现—WebView和TableView混合使用

image.png

通过以上分析基本可以推测出头条的解决方案:

  • ScrollView是作为ContainerView,WebView和TableView是ScrollView的SubView。
  • WebView和TableView无法滚动,WebView和TableView的是由ScrollView滚动驱动的,也就是WebView和TableView无法通过手指直接改变其contentOffset,他们的contentOffset是由ScrollView滚动时的contentOffset计算得出。
  • ScrollView在滚动过程中,WebView和TableView的位置也是跟着改变的,这样就能保证WebView和TableView一直保持在视口的位置。

3、简书

《UIWebView与UITableView的嵌套方案》一文中,作者是这样描述的:

将webView作为主体,其加载的HTML最后留一个空白div,用于确定tableView的位置。tableView加到webView.scrollView上,在监听到webView.scrollView的内容尺寸变化后,不断调整tableView的位置对应于该空白div的位置,同时将该div的尺寸设置为tableView的尺寸。

简书是将TableView添加到WebView的ScrollView上,然后通过UIPanGestureRecognizerUIDynamicAnimator模拟滚动产生偏移量来驱动TableView滑动。但是需要添加空白div,预留TableView的位置。

4、腾讯新闻

腾讯新闻的实现方案和今日头条的差不多,只是ScrollView下比今日头条添加了更多的SubView,当然如果理清这个方案的基本思路,就不算很复杂。

iOS资讯详情页实现—WebView和TableView混合使用

image.png

看了几款主流新闻资讯客户端资讯页的实现方案,从业务需求上来说,今日头条和腾讯新闻的实现方案是最为灵活的。简书实现方式也不错,但是需要去修改HTML,业务耦合性稍微高一些。

综合对比了一下,结论是今日头条和腾讯新闻方案比较合适我们,然后就来看看具体的实现的方法吧。

实现方法:

其实大概的方法在上面已经分析过,现在通过数学的方法精确的说明一下。在我们资讯详情页中,使用WebView渲染网页内容,使用TableView渲染“相关推荐”和“资讯评论”。最外层是一个ScrollView,WebView和TableView平铺在这个ScrollView中。

iOS资讯详情页实现—WebView和TableView混合使用

image.png

ScrollView的ContentSize

由于ScrollView用来滚动视图,ScrollView可以滚动到所有渲染内容,所以ScrollView的contentSize.height可通过以下公式计算(简单来说ScrollView的ContentSizeHeight是WebView和TableView的ContentSize之和):

ScrollView.contentSize.height = WebView.contentSize.height + TableView.contentSize.height

ScrollView的ContentOffset

单个控件来看:

WebView的ContentOffset.y取值范围是:0 ~ (WebView.contentSize.height – WebView.height)

TableView的ContentOffset.y取值范围是:0 ~ (TableView.contentSize.height – TableView.Height)

将WebView放在ScrollView上来看,WebView可滚动范围,即ScrollView.contentOffset.y取值范围:

0 ~ (WebView.contentOffset.y – WebView.height)

将TableView放在ScrollView上来看,TableView可滚动范围,即ScrollView.contentOffset.y取值范围:

(ScrollView.contentSize.height – TableView.contentSize.Height) ~ (ScrollView.contentSize.height – TableView.height)

即:

(WebView.contentSize.height) ~ (WebView.contentSize.height + TableView.ContentSize.height – TableView.height)

iOS资讯详情页实现—WebView和TableView混合使用

image.png

从上图可以看出ScrollView.contentSzie.height将被分为6个的区间段。

WebView的Top和TableView的Top

由于WebView和TableView没有完全展开,所以WebView和TableView需要动态改变它们的Top值(frame.origin.y),才能使WebView处于ScrollView的可视位置。

所以我们需要在2间段改变WebView.top,让WebView看起来和相对于ScrollView可视位置不变(这个时候WebView的ContentOffset.y是根据ScrollView的contentOffset.y决定的)。在2区间段:

WebView.contentOffset.y = ScrollView.contentOffset.y

同样需要在4区间段改变TableView.Top使TableView看起来相对于ScrollView可视位置不变。在4区间段:

TableView.contentOffset.y = ScrollView.contentOffset.y – WebView.height

WebView的Height 和 TableView的Height

从上图我们可以看到在2和4区间段 WebView和TableView分别要发生滚动。因为TableView在WebView正下方,如果WebView.height小于ScrollView.height ,那么在这个区间段下我们能够同时看到WebView和TableView,因为WebView正在滚动,TableView未发生滚动,看起来会十分诡异。在4区间段情况也是一样的。

  • 所以WebView的height在 其contentSize 大于scrollView.height时:WebView.height = scrollView.height即可;
  • TableViewView的height在 其contentSize 大于scrollView.height时:TableViewView.height = scrollView.height
  • WebView的height在 其contentSize 小于于scrollView.height时:WebView.height = WebView.contentSize.height;
  • TableViewView的height在 其contentSize 小于scrollView.height时:TableViewView.height = TableViewView.contentSize.height;

相关代码

下面是主要实现代码:

#import "ViewController.h" #import <WebKit/WebKit.h> #import "UIView+HSKit.h" @interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIScrollViewDelegate>  @property (nonatomic, strong) WKWebView *webView;  @property (nonatomic, strong) UITableView *tableView;  @property (nonatomic, strong) UIScrollView *containerScrollView;  @property (nonatomic, strong) UIView    *contentView;  @end  @implementation ViewController{     CGFloat _lastWebViewContentHeight;     CGFloat _lastTableViewContentHeight; }  - (void)viewDidLoad {     [super viewDidLoad];     [self initValue];     [self initView];          NSString *path = @"https://www.jianshu.com/p/f31e39d3ce41";     NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:path]];     request.cachePolicy = NSURLRequestReloadIgnoringCacheData;     [self.webView loadRequest:request];     [self addObservers]; }   - (void)dealloc{     [self removeObservers]; }  - (void)didReceiveMemoryWarning {     [super didReceiveMemoryWarning]; }  - (void)initValue{     _lastWebViewContentHeight = 0;     _lastTableViewContentHeight = 0; }  - (void)initView{          [self.contentView addSubview:self.webView];     [self.contentView addSubview:self.tableView];          [self.view addSubview:self.containerScrollView];     [self.containerScrollView addSubview:self.contentView];      self.contentView.frame = CGRectMake(0, 0, self.view.width, self.view.height * 2);     self.webView.top = 0;     self.webView.height = self.view.height;     self.tableView.top = self.webView.bottom; }   #pragma mark - Observers - (void)addObservers{     [self.webView addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];     [self.tableView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil]; }  - (void)removeObservers{     [self.webView removeObserver:self forKeyPath:@"scrollView.contentSize"];     [self.tableView removeObserver:self forKeyPath:@"contentSize"]; }  - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{     if (object == _webView) {         if ([keyPath isEqualToString:@"scrollView.contentSize"]) {             [self updateContainerScrollViewContentSize:0 webViewContentHeight:0];         }     }else if(object == _tableView) {         if ([keyPath isEqualToString:@"contentSize"]) {             [self updateContainerScrollViewContentSize:0 webViewContentHeight:0];         }     } }   - (void)updateContainerScrollViewContentSize:(NSInteger)flag webViewContentHeight:(CGFloat)inWebViewContentHeight{      CGFloat webViewContentHeight = flag==1 ?inWebViewContentHeight :self.webView.scrollView.contentSize.height;     CGFloat tableViewContentHeight = self.tableView.contentSize.height;          if (webViewContentHeight == _lastWebViewContentHeight && tableViewContentHeight == _lastTableViewContentHeight) {         return;     }          _lastWebViewContentHeight = webViewContentHeight;     _lastTableViewContentHeight = tableViewContentHeight;          self.containerScrollView.contentSize = CGSizeMake(self.view.width, webViewContentHeight + tableViewContentHeight);          CGFloat webViewHeight = (webViewContentHeight < self.view.height) ?webViewContentHeight :self.view.height ;     CGFloat tableViewHeight = tableViewContentHeight < self.view.height ?tableViewContentHeight :self.view.height;     self.webView.height = webViewHeight <= 0.1 ?self.view.height :webViewHeight;     self.contentView.height = webViewHeight + tableViewHeight;     self.tableView.height = tableViewHeight;     self.tableView.top = self.webView.bottom; }  #pragma mark - UIScrollViewDelegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView{     if (_containerScrollView != scrollView) {         return;     }          CGFloat offsetY = scrollView.contentOffset.y;          CGFloat webViewHeight = self.webView.height;     CGFloat tableViewHeight = self.tableView.height;          CGFloat webViewContentHeight = self.webView.scrollView.contentSize.height;     CGFloat tableViewContentHeight = self.tableView.contentSize.height;          if (offsetY <= 0) {         self.contentView.top = 0;         self.webView.scrollView.contentOffset = CGPointZero;         self.tableView.contentOffset = CGPointZero;     }else if(offsetY < webViewContentHeight - webViewHeight){         self.webView.scrollView.contentOffset = CGPointMake(0, offsetY);         self.contentView.top = offsetY;     }else if(offsetY < webViewContentHeight){         self.tableView.contentOffset = CGPointZero;         self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);     }else if(offsetY < webViewContentHeight + tableViewContentHeight - tableViewHeight){         self.contentView.top = offsetY - webViewHeight;         self.tableView.contentOffset = CGPointMake(0, offsetY - webViewContentHeight);         self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);     }else if(offsetY <= webViewContentHeight + tableViewContentHeight ){         self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);         self.tableView.contentOffset = CGPointMake(0, tableViewContentHeight - tableViewHeight);         self.contentView.top = self.containerScrollView.contentSize.height - self.contentView.height;     }else {         //do nothing         NSLog(@"do nothing");     }      }  #pragma mark - UITableViewDataSouce - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{     return 10; }  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{     return 200; }  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];     if (cell == nil) {         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];         cell.backgroundColor = [UIColor redColor];     }          cell.textLabel.text = @(indexPath.row).stringValue;          return cell; }  #pragma mark - private - (WKWebView *)webView{     if (_webView == nil) {         WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];         _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];         _webView.scrollView.scrollEnabled = NO;         _webView.navigationDelegate = self;      }          return _webView; }  - (UITableView *)tableView{     if (_tableView == nil) {         _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];         _tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);         _tableView.delegate = self;         _tableView.dataSource = self;         _tableView.tableFooterView = [UIView new];         _tableView.scrollEnabled = NO;      }     return _tableView; }  - (UIScrollView *)containerScrollView{     if (_containerScrollView == nil) {         _containerScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];         _containerScrollView.delegate = self;         _containerScrollView.alwaysBounceVertical = YES;     }          return _containerScrollView; }  - (UIView *)contentView{     if (_contentView == nil) {         _contentView = [[UIView alloc] init];     }     return _contentView; }  @end  

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS资讯详情页实现—WebView和TableView混合使用

分享到:更多 ()