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)，應該就能夠達到效果了。