UIWebView顶部添加自定义视图

简介:

今天碰到一个需求,需要往UIWebView顶部添加一个视图。在这里我找到了一个解决方案,目前可以满足我的需求。如果哪位朋友有更好,更优的解决方案,还请不吝赐教。

核心代码如下:

private func addHeaderView(headerView: UIView) {
        
        let browserCanvas = webView!.bounds
        
        for subView in webView!.scrollView.subviews {
            var subViewRect = subView.frame
            if(subViewRect.origin.x == browserCanvas.origin.x &&
                subViewRect.origin.y == browserCanvas.origin.y &&
                subViewRect.size.width == browserCanvas.size.width &&
                subViewRect.size.height == browserCanvas.size.height)
            {
                let height              = headerView.frame.size.height
                subViewRect.origin.y    = height
                subViewRect.size.height = height
                subView.frame           = subViewRect
            }
        }
        webView!.scrollView.addSubview(headerView)
        webView!.scrollView.bringSubviewToFront(headerView)
    }

完整代码如下:

class ViewController: UIViewController, UIWebViewDelegate {

    var webView: UIWebView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.whiteColor()
        let rect = CGRect(x: 0, y: 64, width: CGRectGetWidth(self.view.frame), height: CGRectGetHeight(self.view.frame)-64)
        
        webView = UIWebView(frame: rect)
//        webView!.scalesPageToFit = true
        webView!.delegate = self
        
        let fileURL = NSBundle.mainBundle().URLForResource("index", withExtension: "html")
        let request = NSURLRequest(URL: fileURL!)
        webView!.loadRequest(request)
    }
    
    private func createHeaderView() -> UIView {
        let view = UILabel(frame: CGRect(x: 0, y: 0, width: CGRectGetWidth(self.view.frame), height: 50))
        view.text = "这是头部视图"
        view.backgroundColor = UIColor.orangeColor()
        return view
    }
    
    private func addHeaderView(headerView: UIView) {
        
        let browserCanvas = webView!.bounds
        
        for subView in webView!.scrollView.subviews {
            var subViewRect = subView.frame
            if(subViewRect.origin.x == browserCanvas.origin.x &&
                subViewRect.origin.y == browserCanvas.origin.y &&
                subViewRect.size.width == browserCanvas.size.width &&
                subViewRect.size.height == browserCanvas.size.height)
            {
                let height              = headerView.frame.size.height
                subViewRect.origin.y    = height
                subViewRect.size.height = height
                subView.frame           = subViewRect
            }
        }
        webView!.scrollView.addSubview(headerView)
        webView!.scrollView.bringSubviewToFront(headerView)
    }
    
    //MARK: UIWebViewDelegate
    func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        return true
    }
    
    func webViewDidStartLoad(webView: UIWebView) {
        print("webViewDidStartLoad")
    }
    
    func webViewDidFinishLoad(webView: UIWebView) {
        print("webViewDidFinishLoad")
        
        //添加头部视图
        self.addHeaderView(self.createHeaderView())
        self.view.addSubview(webView)
    }
    
    func webView(webView: UIWebView, didFailLoadWithError error: NSError?) {
        print("didFailLoadWithError")
    }
    
    // MARK:
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

微博: @Danny_吕昌辉
博客: SuperDanny

目录
相关文章
|
7月前
|
小程序
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
|
5月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
87 1
|
6月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
97 1
|
7月前
|
Android开发 计算机视觉 iOS开发
多页面悬停控件和如何获得多UIWindow的页面UIWindow
多页面悬停控件和如何获得多UIWindow的页面UIWindow
40 1
刚进入页面时UIScrollView没有滑动到顶部
刚进入页面时UIScrollView没有滑动到顶部
77 0
|
Android开发 iOS开发 索引
Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView
原文:Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView 背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App。
1889 0
|
Android开发 Kotlin 数据格式
ScrollView滑动—仿微博主页标题栏渐变悬浮及Fragment实现多个内容页面切换
作为一名热爱学习的Android开发工程si,刷微博的时候居然还想着技术呢,觉得自己也是够够了........哈哈哈 image.png 进入今天的正题,微博主页大家肯定是看过的,先看一下微博的效果。
2013 0