(作业)WKWebView实现简单的浏览器
2017-12-06 09:34
357 查看
又是一周一次的作业时间,我们直接看要求和最终的效果图吧
可以看出,最下面一块是一个网页,上面的第一行分别是回退按钮,前进按钮和刷新按钮,第二行是一个输入框和一个搜索按钮,这次作业要求不难,基本的功能框架里面已经有现成的方法了,所以我们只需要调用即可。那接下来开始实现部分。
首先,我们需要定义两个属性,一个WKWebView和一个UITextField(使用UIWebView也可以,不过WKWebView更加快捷、内存占用也比较少)
要使用WKWebView,我们需要在开头引入WebKit框架
然后声明两个属性
到这里,我们还需要自己定义一个加载网页的方法,用于webView加载网页
我们在方法中,首先判断输入的网址是否含有”http://”字符串,如果没有,需要拼接上去,不然webView无法load该网址,因为使用的是http协议,苹果默认只支持https的协议,所以需要在info.plist文件中添加App Transport Security Settings下的Allow Arbitrary Loads字段,并且设置值为YES。
在拼接好字符串之后,使用该字符串生成URL和URLRequest,并使用WKWebView的load方法加载该request即可加载网页了。
到这里,准备工作就完成了,现在我们就开始往界面上添加我们的控件
首先设置根视图的背景颜色,然后获取屏幕的宽度和高度,并设置按钮的宽度和高度
然后我们开始初始化我们的webView,并默认加载百度网页
接下来我们添加文本输入框,并设置默认的占位符为百度的网址
最后就是添加那几个按钮了
最后再实现按钮相应的功能即可
哦哦,,,博主还忘记一件事,还要实现点击键盘的done按钮之后关闭键盘呢!
我们需要使ViewController遵循UITextFieldDelegate协议,并将textField的代理设置为self(ViewController)。这样就可以在点击done时回收键盘了。
所有的代码如下
可以看出,最下面一块是一个网页,上面的第一行分别是回退按钮,前进按钮和刷新按钮,第二行是一个输入框和一个搜索按钮,这次作业要求不难,基本的功能框架里面已经有现成的方法了,所以我们只需要调用即可。那接下来开始实现部分。
首先,我们需要定义两个属性,一个WKWebView和一个UITextField(使用UIWebView也可以,不过WKWebView更加快捷、内存占用也比较少)
要使用WKWebView,我们需要在开头引入WebKit框架
import WebKit
然后声明两个属性
var webView: WKWebView! var textField: UITextField!
到这里,我们还需要自己定义一个加载网页的方法,用于webView加载网页
func loadURL(path: String) { let url: URL? if path.hasPrefix("http://") { url = URL(string: path) } else { url = URL(string: "http://\(path)") } if url != nil { let request = URLRequest(url: url!) webView.load(request) } }
我们在方法中,首先判断输入的网址是否含有”http://”字符串,如果没有,需要拼接上去,不然webView无法load该网址,因为使用的是http协议,苹果默认只支持https的协议,所以需要在info.plist文件中添加App Transport Security Settings下的Allow Arbitrary Loads字段,并且设置值为YES。
在拼接好字符串之后,使用该字符串生成URL和URLRequest,并使用WKWebView的load方法加载该request即可加载网页了。
到这里,准备工作就完成了,现在我们就开始往界面上添加我们的控件
首先设置根视图的背景颜色,然后获取屏幕的宽度和高度,并设置按钮的宽度和高度
self.view.backgroundColor = UIColor.white let width = self.view.frame.width let height = self.view.frame.height let buttonHeight: CGFloat = 40 let buttonWidth: CGFloat = width / 5
然后我们开始初始化我们的webView,并默认加载百度网页
webView = WKWebView(frame: CGRect(x: 0, y: (buttonHeight + 10) * 2, width: width, height: height - (buttonHeight + 10) * 2)) self.view.addSubview(webView) loadURL(path: "www.baidu.com")
接下来我们添加文本输入框,并设置默认的占位符为百度的网址
textField = UITextField(frame: CGRect(x: 10, y: buttonHeight + 20, width: width / 5 * 4, height: buttonHeight)) textField.placeholder = "www.baidu.com" textField.layer.borderWidth = 1 textField.delegate = self textField.returnKeyType = .done self.view.addSubview(textField)
最后就是添加那几个按钮了
let goBtn = UIButton(frame: CGRect(x: buttonWidth * 4 + 10, y: buttonHeight + 20, width: buttonWidth - 10, height: buttonHeight)) goBtn.setTitle("GO", for: .normal) goBtn.setTitleColor(UIColor.cyan, for: .normal) goBtn.setTitleColor(UIColor.brown, for: .highlighted) goBtn.addTarget(self, action: #selector(goWeb), for: .touchUpInside) self.view.addSubview(goBtn) let backBtn = UIButton(frame: CGRect(x: 10, y: 20, width: buttonWidth, height: buttonHeight)) backBtn.setTitle("<", for: .normal) backBtn.setTitleColor(UIColor.cyan, for: .normal) backBtn.setTitleColor(UIColor.brown, for: .highlighted) backBtn.addTarget(self, action: #selector(backWeb), for: .touchUpInside) self.view.addSubview(backBtn) let forwardBtn = UIButton(frame: CGRect(x: 20 + buttonWidth, y: 20, width: buttonWidth, height: buttonHeight)) forwardBtn.setTitle(">", for: .normal) forwardBtn.setTitleColor(UIColor.cyan, for: .normal) forwardBtn.setTitleColor(UIColor.brown, for: .highlighted) forwardBtn.addTarget(self, action: #selector(forwardWeb), for: .touchUpInside) self.view.addSubview(forwardBtn) let freshBtn = UIButton(frame: CGRect(x: 30 + buttonWidth * 2, y: 20, width: buttonWidth, height: buttonHeight)) freshBtn.setTitle("⟳", for: .normal) freshBtn.setTitleColor(UIColor.cyan, for: .normal) freshBtn.setTitleColor(UIColor.brown, for: .highlighted) freshBtn.addTarget(self, action: #selector(freshWeb), for: .touchUpInside) self.view.addSubview(freshBtn)
最后再实现按钮相应的功能即可
@objc func freshWeb() { webView.reload() } @objc func forwardWeb() { webView.goForward() } @objc func backWeb() { webView.goBack() } @objc func goWeb() { let path = textField.text ?? "" loadURL(path: path) }
哦哦,,,博主还忘记一件事,还要实现点击键盘的done按钮之后关闭键盘呢!
func textFieldShouldReturn(_ textField: UITextField) -> Bool { textField.resignFirstResponder() return true }
我们需要使ViewController遵循UITextFieldDelegate协议,并将textField的代理设置为self(ViewController)。这样就可以在点击done时回收键盘了。
所有的代码如下
import UIKit
import WebKit
class ViewController: UIViewController, UITextFieldDelegate {
var webView: WKWebView! var textField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = UIColor.white let width = self.view.frame.width let height = self.view.frame.height let buttonHeight: CGFloat = 40 let buttonWidth: CGFloat = width / 5
webView = WKWebView(frame: CGRect(x: 0, y: (buttonHeight + 10) * 2, width: width, height: height - (buttonHeight + 10) * 2)) self.view.addSubview(webView) loadURL(path: "www.baidu.com")
textField = UITextField(frame: CGRect(x: 10, y: buttonHeight + 20, width: width / 5 * 4, height: buttonHeight)) textField.placeholder = "www.baidu.com" textField.layer.borderWidth = 1 textField.delegate = self textField.returnKeyType = .done self.view.addSubview(textField)
let goBtn = UIButton(frame: CGRect(x: buttonWidth * 4 + 10, y: buttonHeight + 20, width: buttonWidth - 10, height: buttonHeight)) goBtn.setTitle("GO", for: .normal) goBtn.setTitleColor(UIColor.cyan, for: .normal) goBtn.setTitleColor(UIColor.brown, for: .highlighted) goBtn.addTarget(self, action: #selector(goWeb), for: .touchUpInside) self.view.addSubview(goBtn) let backBtn = UIButton(frame: CGRect(x: 10, y: 20, width: buttonWidth, height: buttonHeight)) backBtn.setTitle("<", for: .normal) backBtn.setTitleColor(UIColor.cyan, for: .normal) backBtn.setTitleColor(UIColor.brown, for: .highlighted) backBtn.addTarget(self, action: #selector(backWeb), for: .touchUpInside) self.view.addSubview(backBtn) let forwardBtn = UIButton(frame: CGRect(x: 20 + buttonWidth, y: 20, width: buttonWidth, height: buttonHeight)) forwardBtn.setTitle(">", for: .normal) forwardBtn.setTitleColor(UIColor.cyan, for: .normal) forwardBtn.setTitleColor(UIColor.brown, for: .highlighted) forwardBtn.addTarget(self, action: #selector(forwardWeb), for: .touchUpInside) self.view.addSubview(forwardBtn) let freshBtn = UIButton(frame: CGRect(x: 30 + buttonWidth * 2, y: 20, width: buttonWidth, height: buttonHeight)) freshBtn.setTitle("⟳", for: .normal) freshBtn.setTitleColor(UIColor.cyan, for: .normal) freshBtn.setTitleColor(UIColor.brown, for: .highlighted) freshBtn.addTarget(self, action: #selector(freshWeb), for: .touchUpInside) self.view.addSubview(freshBtn)
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool { textField.resignFirstResponder() return true }
@objc func freshWeb() { webView.reload() } @objc func forwardWeb() { webView.goForward() } @objc func backWeb() { webView.goBack() } @objc func goWeb() { let path = textField.text ?? "" loadURL(path: path) }
func loadURL(path: String) { let url: URL? if path.hasPrefix("http://") { url = URL(string: path) } else { url = URL(string: "http://\(path)") } if url != nil { let request = URLRequest(url: url!) webView.load(request) } }
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
相关文章推荐
- 通过WebView实现简单的浏览器
- Webview实现android简单的浏览器实例代码
- 通过WebView实现简单的浏览器
- javaFX实例1-webView实现简单浏览器
- android:webview实现简单的浏览器
- 超简单实现TextView中某段文字超链接点击打开浏览器跳转到网页
- android开发中WebView控件的实例与注意要点——个人主页浏览器简易实现
- WebView详解与简单实现Android与H5互调
- WKWebView的简单使用-----内存消耗优于UIWebView
- Android-用WebView开发简单的浏览器
- Android:WebView带划屏手势的浏览器实现
- 对于wkwebview网页高度计算的补充/网页高度计算的另一种简单方法
- Android程序:简易浏览器的实现(WebView)
- 制作一个简单的浏览器WebView的使用
- JS交互点击WKWebView中的图片实现预览效果
- WKWebView的简单使用
- WebView详解与简单实现Android与H5互调
- JS交互 点击WKWebView中的图片实现预览效果
- webView 之 webapp在ios中简单实现滑动,回弹,加速等效果