如何在UIWebView上方叠加一个UIButton（关闭）按钮？

Question

我一直在寻找并尝试解决iOS中UIWebView的问题。

我有一个非常小的应用程序，只是加载我的网站。源代码存放在https://github.com/pjuu/iotter。

在网站上，当用户单击发布的图像时，它会将图像URL加载到Web视图中。这会使用户陷入困境，无法返回到站点的其他部分。

我想做的是在右上角显示一个(x)按钮(不管使用什么屏幕旋转)，并在浏览器中执行后退操作。

我知道这个问题不是代码问题，因为我可以处理Swift代码部分。但我真的不知道怎样通过编程方式添加按钮并使它显示在WebView上。

我能找到的唯一教程涉及创建工具栏来执行这些类型的操作，但我认为在查看图像时需要占用太多空间。

问题非常简单：

• 这可能吗？
• 如果是，我该如何创建按钮？

我将使用正则表达式检查request.path参数，只有当它与图像URL匹配时才显示它。

如果这对SO不够合适，请原谅。我可以将问题移动或发布到另一个网站上。

非常感谢您提前的任何帮助。我不是移动开发人员，所以使用XCode和Storyboard对我来说与vim大相径庭。

- Joe Doherty

---

UIWebView 是一个 UIView，它可以管理子视图。UIButton 也是一个 UIView，你可以在 UIWebView 上添加一个 UIButton 并像平常一样管理它。我认为你应该转移到 XCode 环境下，这样生活会更轻松... - Jean-Baptiste Yunès

@Jean-BaptisteYunès 我正在使用XCode，这就是很多混淆的来源。感谢您的解释。 - Joe Doherty

Answer 1

参考:

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:

---

解决方案:

1) 创建 "X" 按钮:

// 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) 检测当imageUrl被打开时并使"X" UIButton出现：

// 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) 最后，您需要创建一个方法，当“X”UIButton被点击时关闭页面：

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)
    }
}

---

注意：

在下列行中：

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

我们正在将UIButton设置为交叉图片。

你需要将一个交叉图片添加到你的XCode项目中，并将"cross.png"字符串设置为你的图片的确切名称："nameOfImage.fileType"。

- Coder1000

---

@JoeDoherty :D 很高兴我能帮到你！这将使十字出现在中间。我不知道那是否是你想要的。我认为右上角会更常见。 - Coder1000

@JoeDoherty 你知道如何在XCODE项目中添加图片吗？ - Coder1000

有点类似。我在那里有一个XIB和图标。 - Joe Doherty

哇，非常感谢您。这是很多工作，也可能是我见过的对任何问题最好的答案之一。 - Joe Doherty

@JoeDoherty 很高兴能帮忙:D 如果我只回答了一半，让你不得不在谷歌上搜索另一半的答案，我会感到很不好意思:) 毕竟，SO是为了解决开发问题而存在的！创建一个只回答问题一半的解决方案是没有意义的！ - Coder1000

Answer 2

简单的一行代码解决方案。

在Storyboard中或者编程方式中创建一个所需的“关闭”按钮。

然后，只需要将您的WebView发送到当前视图控制器中所有显示视图的后面：

view.sendSubviewToBack(yourWebView)

现在，所有视图（包括您创建的任何按钮）都将显示在其上方。只需确保在创建所有所需视图之后添加此行即可。

- CSmizzle