在app開發中我們經常會遇到在內容詳細頁中介面元素比較複雜，或者格式不確定這種情況，通常我們會利用UIWebView來載入html來處理這樣的事件，因為這樣不僅簡單而且可控性更好，我們不會再因為內容格式的改變，再去苦逼的改程式碼，一層層的解析資料，在苦苦的等待稽核，但是因此也會有一些情況出現，比如我們想要在介面上加上很酷炫的效果，或者有些效果是必須要嵌入原生的元素，這樣我們又會遇到很多問題，比如怎麼在webView頭部加入控制元件，又如何在尾部新增按鈕什麼的，這篇文章就要介紹如何為webView新增頭部與尾部控制元件：（仿今日頭條demo 見最後）

1.首先建立webView

<span style="font-size:14px;">@property (nonatomic, strong) UIView* webBrowserView;

self.webss = [[UIWebView alloc]init];
self.webss.backgroundColor = [UIColor clearColor];
self.webss.delegate= self;
self.webss.tag = 1314;
self.webss.scrollView.delegate = self;
self.webss.frame = CGRectMake(0, NAVHEIGHT, WIDTH,HEIGHT-NAVHEIGHT);
[self.view addSubview:self.webss];</span>
 

2.我們來遍歷一下webView的scrollView有哪些子檢視：

<span style="font-size:14px;">==self.webss.scrollView.subviews====(
    "<UIWebBrowserView: 0x159b9800; frame = (0 0; 320 504); gestureRecognizers = <NSArray: 0x14ee1100>; layer = <UIWebLayer: 0x14ee0eb0>>"
)</span>

可以看到只有一個子檢視UIWebBrowserView，而這個正是渲染html的view,並且他的高度為504，而測試用的是5s，高度為568，剛好空出來了64個畫素，正好是導航器的位置，由此可見我們只要相應的改變UIWebBrowserView的座標，便可在頭部預留出位置給將要新增的原生檢視，操作如3；

3.新增頭部檢視：

3.1獲取UIWebBrowserView

<span style="font-size:14px;">self.webBrowserView = self.webss.scrollView.subviews[0];
 self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(-20, 0, WIDTH+40, 200)];
[self.webss addSubview:self.headerImageView];</span>

3.2改變UIWebBrowserView的座標

<span style="font-size:14px;">CGRect frame = self.webBrowserView.frame;
frame.origin.y = CGRectGetMaxY(self.headerImageView.frame);
self.webBrowserView.frame = frame;</span>

3.3新增頭部檢視（這種情況頭部檢視不會隨著webView的滾動而隨著滾動，是固定的）

<span style="font-size:14px;">[self.webss sendSubviewToBack:self.headerImageView];</span>

要想新增的檢視隨著一塊滾動，看以下操作：

3.4將檢視新增到webView的ScrollView上

<span style="font-size:14px;">headView = [[UIView alloc]init];
headView.backgroundColor = [UIColor clearColor];
headView.frame = CGRectMake(0, 0, WIDTH, 200);
[self.webss.scrollView addSubview:headView];</span>

至此頭部控制元件已新增完畢，接下來新增尾部控制元件

4.新增尾部控制元件

第一：既然要在屁股後邊加控制元件，你總得知道他多高吧，所以我們要獲取webView內容頁的總高度，而因為可能網速,圖片這些原因，他每次的contentsize是實時變化的，所以我們要監聽webView的scrollView的contentSize的變化：

<span style="font-size:14px;">- (void)addObserverForWebViewContentSize{
    [self.webss.scrollView addObserver:self forKeyPath:@"contentSize" options:0 context:nil];
}
- (void)removeObserverForWebViewContentSize{
    [self.webss.scrollView removeObserver:self forKeyPath:@"contentSize"];
}</span>

以下是監聽結果回撥事件：

<span style="font-size:14px;">- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
//在這裡邊新增你的程式碼
    [self layoutCell];
}
//設定footerView的合理位置
- (void)layoutCell{
    //取消監聽，因為這裡會調整contentSize，避免無限遞迴
    [self removeObserverForWebViewContentSize];
    UIView *viewss = [self.view viewWithTag:99999];
    CGSize contentSize = self.webss.scrollView.contentSize;
    UIView *vi = [[UIView alloc]init];
    vi.backgroundColor = BGCOLOR;
    vi.userInteractionEnabled = YES;
    vi.tag = 99999;
    vi.frame = CGRectMake(0, contentSize.height, WIDTH, 150);
    [self.webss.scrollView addSubview:vi];
    self.webss.scrollView.contentSize = CGSizeMake(contentSize.width, contentSize.height + 150);
   //重新監聽
    [self addObserverForWebViewContentSize];
}</span>