iOS-UIWebView添加头部和尾部

前言

项目中使用UIWebView显示本地或者是服务器上的页面很容易，可是仅限于显示页面，可控性并不高，若是有须要在头部和尾部加上原生的view，显示部分信息相对于所有使用UIWebView来讲会好蛮多，下面开始实现添加逻辑；

 

（一）在UIWebView的子控件Scrollview中添加头部以及尾部，添加头部相对于来讲简单，先设置Scrollview的contentInset属性，UIEdgeInsetsMake(50, 0, 0, 0)即显示内容下移50;而后添加一个自定义view，frame等于CGRectMake(0, -50, self.view.frame.size.width, 50)便可。尾部的话，会复杂点，主要是UIWebView的contentSize会变，因此首先要知道contentSize或者说是内容的高度，方法是使用KVO监听UISCrollview的contentSize属性，这个方法我也是从网上找到的，原来个人想法是，经过UIScrollView的- (void)scrollViewDidScroll:(UIScrollView *)scrollView，根据下拉的offsety来控制尾部view的显示，可是后面发现不可行，因此才找到了这个KVO的方法；下面看代码：

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    self.webss = [[UIWebView alloc] initWithFrame:self.view.bounds];
    self.webss.scrollView.contentInset = UIEdgeInsetsMake(50, 0, 0, 0);
    [self.webss loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
    self.webss.backgroundColor = [UIColor whiteColor];
    self.webss.opaque = NO;
    
    UIImageView *headerView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -50, self.view.frame.size.width, 50)];
    headerView.userInteractionEnabled = YES;
    headerView.backgroundColor = [UIColor redColor];
    
    [self.webss.scrollView addSubview:headerView];
    [self.view addSubview:_webss];

}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self addObserverForWebViewContentSize];
}
- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [self removeObserverForWebViewContentSize];
}

- (void)addObserverForWebViewContentSize
{
    [self.webss.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
}
- (void)removeObserverForWebViewContentSize
{
    [self.webss.scrollView removeObserver:self forKeyPath:@"contentSize"];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    [self test];
}


//设置footerView，并计算合适位置；
- (void)test
{
    //取消监听，由于这里会调整contentSize，避免无限递归
    [self removeObserverForWebViewContentSize];
    
    UIView *viewss = [self.view viewWithTag:99999];
    [viewss removeFromSuperview];
    
    CGSize contentSize = self.webss.scrollView.contentSize;
    UIView *vi = [[UIView alloc] init];
    vi.backgroundColor = [UIColor blueColor];
    vi.userInteractionEnabled = YES;
    vi.tag = 99999;
    vi.frame = CGRectMake(0, contentSize.height, self.view.frame.size.width, 150);
    
    [self.webss.scrollView addSubview:vi];
    self.webss.scrollView.contentSize = CGSizeMake(contentSize.width, contentSize.height + 150);
    
    //从新监听
    [self addObserverForWebViewContentSize];
}

以上的代码是实现的关键代码，KVO机制我就不说了，还有一个关键的地方就是UIView *viewss = [self.view viewWithTag:99999];[viewss removeFromSuperview];两句代码，contentSize有可能变，有可能不变；只能保留经过监听到的最后一次contentSize计算出来的位置，不然尾部自定义的view会显示不正确。

 

（二）改进demo的一些想法；

在下拉UIwebview的过程当中，也会显示灰色的背景色，至关的难看；基于上面的demo，已经实现了头部与尾部的添加，把头部的高度与下拉的距离同步起来，在这个UIScrollView的- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法中，计算出offsety，而后头部自定义view的frame等于CGRectMake(0, -50-offsety, self.view.frame.size.width, 50+offsety)，应该就能够达到效果了。