How to overlay a UIButton (close) button on top of a UIWebView?

Question

I have been looking and trying to solve an issue I have with a UIWebView for iOS.

I have a very small app which just loads my website the source code lives at https://github.com/pjuu/iotter.

On the site when a user clicks on a posted image it load the image URL in to the web view. This leaves them stranded and unable to get back to other parts of the site.

What I want to do is display an (x) button in the top right hand corner (no matter what screen rotation is in use) and have perform the back operation in the browser.

I know this question isn't a code issue as I'm fine to sort of the Swift code part of it. I just could not for the life of me work out how to add the button programmatically and have it display over the webview.

The only tutorials I could find involved creating a tool bar to perform these type of actions which I think would take up to much space when looking at an image.

The question is very simple:

• Is this possible?
• If so how would I go about creating the button?

I am going to check the request.path parameter with regex to only show it if it matches an image URL.

Apologies if this isn't fitting enough for SO. I am happy to move the question or post on another site.

Thank you for any help in advance. I am not a mobile developer so using XCode and the storyboard stuff is a world away from vim for me.

Answer 1

REFERENCE:

1) CGRectMake: https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGGeometry/#//apple_ref/c/func/CGRectMake

2) UIWebViewDelegate: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebViewDelegate_Protocol/#//apple_ref/occ/intfm/UIWebViewDelegate/webView:shouldStartLoadWithRequest:navigationType:

---

SOLUTION:

1) Create the "X" UIButton:

// Define the UIButton

let button   = UIButton(type: UIButtonType.System) as UIButton
let image = UIImage(named: "name") as UIImage?
button.frame = CGRectMake(self.view.frame.width - 60, 30, 35, 35)
button.setTitle("Test Button", forState: UIControlState.Normal)
button.setImage(image, forState: .Normal)
button.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside)

self.view.addSubview(button)

//Hide the UIButton

button.hidden = true

2) Detect when an imageUrl is opened and make the "X" UIButton appear:

// This function is triggered every time a request is made:

optional func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
    let string = request.URL

    if string.rangeOfString(".png") || string.rangeOfString(".jpg")|| string.rangeOfString(".jpeg"){
        // code to make cross appear
        // for example:
        self.button.hidden = false
    }
}

3) Finally, you will need to create the method that closes the page when the "X" UIButton is tapped:

func btnPressed(sender: UIButton!) {
    if(webview.canGoBack) {
        //Go back in webview history
        webview.goBack()
    } else {
        //Pop view controller to preview view controller
        self.navigationController?.popViewControllerAnimated(true)
    }
}

---

N.B.:

In the lines:

let image = UIImage(named: "cross.png") as UIImage?
button.setImage(image, forState: .Normal)

We are setting the UIButton to be the image of a cross. You need to add a cross image to your XCode project and set the "cross.png" String to the exact name of your image: "nameOfImage.fileType".