iOS开发-webView添加头部与尾部控件

「爱情、让人受尽委屈。」 2022-06-01 00:13 282阅读 0赞

在app开发中我们经常会遇到在内容详细页中界面元素比较复杂，或者格式不确定这种情况，通常我们会利用UIWebView来加载html来处理这样的事件，因为这样不仅简单而且可控性更好，我们不会再因为内容格式的改变，再去苦逼的改代码，一层层的解析数据，在苦苦的等待审核，但是因此也会有一些情况出现，比如我们想要在界面上加上很酷炫的效果，或者有些效果是必须要嵌入原生的元素，这样我们又会遇到很多问题，比如怎么在webView头部加入控件，又如何在尾部添加按钮什么的，这篇文章就要介绍如何为webView添加头部与尾部控件：

### 1.首先创建webView ###

@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];

### 2.我们来遍历一下webView的scrollView有哪些子视图： ###

==self.webss.scrollView.subviews====(
        "<UIWebBrowserView: 0x159b9800; frame = (0 0; 320 504); gestureRecognizers = <NSArray: 0x14ee1100>; layer = <UIWebLayer: 0x14ee0eb0>>"
    )

可以看到只有一个子视图UIWebBrowserView，而这个正是渲染html的view,并且他的高度为504，而测试用的是5s，高度为568，刚好空出来了64个像素，正好是导航器的位置，由此可见我们只要相应的改变UIWebBrowserView的坐标，便可在头部预留出位置给将要添加的原生视图，操作如3

### 3.添加头部视图： ###

#### 3.1获取UIWebBrowserView ####

self.webBrowserView = self.webss.scrollView.subviews[0];
     self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(-20, 0, WIDTH+40, 200)];
    [self.webss addSubview:self.headerImageView];

#### 3.2改变UIWebBrowserView的坐标 ####

CGRect frame = self.webBrowserView.frame;
    frame.origin.y = CGRectGetMaxY(self.headerImageView.frame);
    self.webBrowserView.frame = frame;

#### 3.3添加头部视图（这种情况头部视图不会随着webView的滚动而随着滚动，是固定的） ####

[self.webss sendSubviewToBack:self.headerImageView];

要想添加的视图随着一块滚动，看以下操作：

#### 3.4将视图添加到webView的ScrollView上 ####

headView = [[UIView alloc]init];
    headView.backgroundColor = [UIColor clearColor];
    headView.frame = CGRectMake(0, 0, WIDTH, 200);
    [self.webss.scrollView addSubview:headView];

### 4.添加尾部控件 ###

#### 4.1方法一 ####

第一：既然要在屁股后边加控件，你总得知道他多高吧，所以我们要获取webView内容页的总高度，而因为可能网速,图片这些原因，他每次的contentsize是实时变化的，所以我们要监听webView的scrollView的contentSize的变化：

- (void)addObserverForWebViewContentSize{
        [self.webss.scrollView addObserver:self forKeyPath:@"contentSize" options:0 context:nil];
    }
    - (void)removeObserverForWebViewContentSize{
        [self.webss.scrollView removeObserver:self forKeyPath:@"contentSize"];
    }
    以下是监听结果回调事件：
    
    - (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];
    }

#### 4.2方法二 ####

在WebView的- (void)webViewDidFinishLoad:(UIWebView \*)webView方法中添加代码，实现视图的添加

- (void)webViewDidFinishLoad:(UIWebView *)webView{
        [SVProgressHUD dismiss];
        [_detailsWebView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom=1.3"];
    
        // 获取webView的高度
        CGFloat webViewHeight = [[_detailsWebView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
    
        YCLog(@"获取的网页的高度---%lf", webViewHeight);
    
        CGSize contentSize = self.detailsWebView.scrollView.contentSize;
    
        if (self.attachmentArray != nil && ![self.attachmentArray isKindOfClass:[NSNull class]] && self.attachmentArray.count != 0) {
            for (int i=0; i<self.attachmentArray.count; i++) {
                YCHomeAttachmentModel *attachmentModel = self.attachmentArray[i];
                UIButton *attachmentBtn = [UIButton buttonWithType:UIButtonTypeCustom];
                attachmentBtn.backgroundColor = [UIColor whiteColor];
                attachmentBtn.frame = CGRectMake(0, contentSize.height, SCREEN_WIDTH, 45);
                NSString *btnName = [NSString stringWithFormat:@"%@%@", @"附件:", attachmentModel.name];
                attachmentBtn.tag = i+999;
                [attachmentBtn setTitle:btnName forState:UIControlStateNormal];
                attachmentBtn.titleLabel.font = [UIFont systemFontOfSize:16];
                [attachmentBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
                [attachmentBtn addTarget:self action:@selector(attachmentBtnClick:) forControlEvents:UIControlEventTouchUpInside];
                [self.detailsWebView.scrollView addSubview:attachmentBtn];
                self.detailsWebView.scrollView.contentSize = CGSizeMake(contentSize.width, contentSize.height + 45);
            }
        }    
    }

原文链接：[http://blog.csdn.net/jp940110jpjp/article/details/48223975][http_blog.csdn.net_jp940110jpjp_article_details_48223975]

[http_blog.csdn.net_jp940110jpjp_article_details_48223975]: http://blog.csdn.net/jp940110jpjp/article/details/48223975