SFSafariViewController: Hide navigation bar

Mike Purcell picture Mike Purcell · Nov 19, 2015 · Viewed 25.1k times · Source

I was able to get my app to automatically load a url via the SFSafariViewController per this post, and it works great, the only drawback is the navbar.

The SFSafariViewController navbar is kind of useless when being used this way, as the url is read-only, and the 'done' link doesn't do anything but reload the page. As such, I would like to hide the navbar altogether.

Per the comments attached to accepted answer, it was suggested to set my root view controller to SFSafariViewController which I can't get working. The setup is simple as there is a single view controller with the code included in the aforementioned post.

How can I hide the navbar but still maintain the benefits of the SFSafariViewController? Or if I can't hide the navbar, at least hide the 'done' link?

Code snippet:

import UIKit
import SafariServices

class ViewController: UIViewController
{
    private var urlString:String = "https://example.com"

    override func viewDidLoad()
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func viewDidAppear(animated: Bool)
    {

        super.viewDidAppear(animated)

        let svc = SFSafariViewController(URL: NSURL(string: self.urlString)!)

        self.presentViewController(svc, animated: true, completion: nil)

        self.navigationItem.rightBarButtonItem = nil
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

----- Works. Navbar is "hidden" -----

import UIKit
import SafariServices

class ViewController: UIViewController
{
    private var urlString:String = "https://example.com"

    override func viewDidLoad()
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // This will remove the status (battery, time, etc) bar
        UIApplication.sharedApplication().statusBarHidden = true
    }

    override func viewDidAppear(animated: Bool) {

        super.viewDidAppear(animated)

        let svc = SFSafariViewController(URL: NSURL(string: self.urlString)!)

        // Kind of a hack, in that we really aren't removing the navbar
        //  Rather we are adjusting the starting point of the vpc object so it appears as the navbar is hidden
        self.presentViewController(svc, animated: true) {

            var frame = svc.view.frame
            let OffsetY: CGFloat = 42

            frame.origin = CGPoint(x: frame.origin.x, y: frame.origin.y - OffsetY)
            frame.size = CGSize(width: frame.size.width, height: frame.size.height + OffsetY)
            svc.view.frame = frame
        }
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // For this to work be sure to set the following setting to OFF, in info.plist
    //  'View controller-based status bar appearance'
    override func prefersStatusBarHidden() -> Bool {
        return true
    }
}

Answer

Sahil Kapoor picture Sahil Kapoor · Nov 19, 2015

Put this code in viewDidAppear:

let safariViewController = SFSafariViewController(URL: url)
presentViewController(safariViewController, animated: true) {
    var frame = safariViewController.view.frame
    let OffsetY: CGFloat  = 64
    frame.origin = CGPoint(x: frame.origin.x, y: frame.origin.y - OffsetY)
    frame.size = CGSize(width: frame.width, height: frame.height + OffsetY)
    safariViewController.view.frame = frame
}

To hide the status bar, set View controller-based status bar appearance to YES in your info.plist file and insert this in your view controller.

override func prefersStatusBarHidden() -> Bool {
    return true
}

Warning: I will suggest you against using SFSafariViewController for full screen view because reloading is not possible(since reload button is in UINavigationBar). In case request fails, it will render the application useless. Rather go for full screen WKWebView with custom toolbar instead.

Update: To avoid hiding the reload button, just add a view/imageView over the done button in your SFSafariViewController and render button invisible or at least untappable.

presentViewController(svc, animated: true) {
    let width: CGFloat = 66
    let x: CGFloat = self.view.frame.width - width

    // It can be any overlay. May be your logo image here inside an imageView.
    let overlay = UIView(frame: CGRect(x: x, y: 20, width: width, height: 44))
    overlay.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.5)
    svc.view.addSubview(overlay)
}

The problem with this approach is only that overlay stays on screen, but if you can find a nice image for it, you will be fine.