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

目录
相关文章
|
小程序 开发者
小程序顶部自定义导航栏添加背景图的实现
小程序顶部自定义导航栏添加背景图的实现
201 0
|
8月前
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
8月前
|
小程序
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
|
3月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
114 1
|
6月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
102 1
|
8月前
|
XML 存储 测试技术
Android系统 添加动态控制SystemUI状态栏、导航栏和下拉菜单
Android系统 添加动态控制SystemUI状态栏、导航栏和下拉菜单
1360 1
|
iOS开发
iOS开发- 点击通知栏回到顶部的动画效果
iOS开发- 点击通知栏回到顶部的动画效果
150 0
iOS开发- 点击通知栏回到顶部的动画效果
|
Android开发
玩转AppBarLayout,更酷炫的顶部栏
玩转AppBarLayout,更酷炫的顶部栏
玩转AppBarLayout,更酷炫的顶部栏
|
索引
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
362 0
|
Dart 开发者
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
163 0
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)