（本文代码已升级至Swfit5）
使用网页控件（UIWebView）与工具栏控件（UIToolbar），我们可以自制一个小型的浏览器，其功能如下：
1、输入网址，点击“Go”按钮加载网页
2、加载过程中有进度条，同时可以点击停止按钮取消加载
3、有页面刷新按钮
4、有前进后退按钮
Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-19 at 15.40.35.png
工具条代码代码如下：
import UIKit
import WebKit
class BrowserToolBar: UIToolbar {
var webViewClickAction:((_ actionType: Int) -> Void)? = {
_ in
return
}
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupUI()
{
//返回按钮
let backBarItem = UIBarButtonItem(title: "返回", style: .plain, target: self, action: #selector(backBarItemAction))
// 分割按钮
let btngap1 = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
// 前进按钮
let forwardBack = UIBarButtonItem(title: "前进", style: .plain, target: self, action: #selector(forwardBackAction))
// 分割按钮
let btngap2 = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
// 刷新按钮
let updateBarItem = UIBarButtonItem(title: "刷新", style: .plain, target: self, action: #selector(updateBarItemAction))
// 分割按钮
let btngap3 = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
// 停止按钮
let stopBarItem = UIBarButtonItem(title: "停止", style: .plain, target: self, action: #selector(stopBarItemAction))
// 分割按钮
let btngap4 = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
let progressBarItem = UIBarButtonItem(customView: progressView)
self.setItems([backBarItem,btngap1,forwardBack,btngap2,updateBarItem,btngap3,stopBarItem,btngap4,progressBarItem], animated: true)
ptimer.invalidate()
}
//进度条
let progressView: UIProgressView = {
let temp = UIProgressView(progressViewStyle: UIProgressView.Style.bar)
temp.frame = CGRect(x: 0, y: 0, width: 80, height: 20)
temp.progress = 0
return temp;
}()
//进度条计时器
let ptimer: Timer = {
//创建计时器对象
let ptimer = Timer.scheduledTimer(timeInterval: 0.2, target:self,
selector: #selector(loadProgress),
userInfo:nil,repeats:true)
return ptimer
}()
}
extension BrowserToolBar
{
// 返回按钮
@objc func backBarItemAction()
{
webViewClickAction?(0)
}
// 前进按钮
@objc func forwardBackAction()
{
webViewClickAction?(1)
}
// 刷新按钮
@objc func updateBarItemAction()
{
webViewClickAction?(2)
}
// 停止按钮
@objc func stopBarItemAction()
{
webViewClickAction?(3)
}
// 定时器
@objc func loadProgress()
{
// 如果进度满了，停止计时器
if(progressView.progress >= 1.0)
{
// 停用计时器
ptimer.invalidate();
}
else
{
// 改变进度条的进度值
progressView.setProgress(progressView.progress + 0.02, animated:true);
}
}
}
控制器代码：
import UIKit
import WebKit
class BrowserViewController: UIViewController, UITextFieldDelegate, WKUIDelegate, WKNavigationDelegate {
override func viewDidLoad() {
super.viewDidLoad()
// 设置UI
setupUI()
}
/// 工具条
private let toolBar: BrowserToolBar = {
let toolBar = BrowserToolBar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 44))
return toolBar;
}()
// url输入框
private let urlTextField: UITextField = {
let textField = UITextField(frame: CGRect(x: 0, y: 44, width: UIScreen.main.bounds.size.width - 44, height: 44))
textField.backgroundColor = .white
textField.borderStyle = .line
return textField
}()
// 浏览按钮
private let goButton: UIButton = {
let button = UIButton(frame: CGRect(x: UIScreen.main.bounds.size.width - 44, y: 44, width: 44, height: 44))
button.setTitle("GO", for: .normal)
button.setTitleColor(.black, for: .normal)
button.addTarget(self, action: #selector(goButtonAction), for: .touchUpInside)
button.backgroundColor = .white
return button
}()
// webview
private let webView: WKWebView = {
let webView = WKWebView(frame: CGRect(x: 0, y: 88, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height - 88))
return webView
}()
private let loadIndicator: UIActivityIndicatorView = {
let loadIndicator = UIActivityIndicatorView(frame: CGRect(x: 120.0, y: 120.0, width: 32.0, height: 32.0))
loadIndicator.style = UIActivityIndicatorView.Style.medium
return loadIndicator;
}()
}
extension BrowserViewController
{
// 设置Ui
func setupUI()
{
webView.uiDelegate = self
webView.navigationDelegate = self
urlTextField.delegate = self
self.view.addSubview(toolBar)
self.view.addSubview(urlTextField)
self.view.addSubview(goButton)
self.view.addSubview(webView)
self.view.addSubview(loadIndicator)
toolBar.webViewClickAction = {[weak self] actionType in
print(actionType)
switch actionType {
case 0:
self?.webView.goBack()
case 1:
self?.webView.goForward()
case 2:
self?.webView.reload()
case 3:
self?.webView.stopLoading()
default:
return
}
}
}
// 加载URL
func loadUrl(_ url: String)
{
let urlobj = URL(string:url)
let request = URLRequest(url:urlobj!)
webView.load(request);
}
//跳转URL按钮
@objc func goButtonAction()
{
urlTextField.resignFirstResponder()
let url = urlTextField.text
loadUrl(url!)
}
}
// MARK: WKWebViewDelegate
extension BrowserViewController
{
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!)
{
toolBar.progressView.setProgress(0, animated:false);
toolBar.ptimer.fire();
loadIndicator.startAnimating();
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
{
loadIndicator.stopAnimating();
toolBar.progressView.setProgress(1, animated:true);
toolBar.ptimer.invalidate();
}
}
// MARK: UITextFieldDelegate
extension BrowserViewController
{
func textFieldShouldReturn(_ textField:UITextField) -> Bool
{
urlTextField.resignFirstResponder()
print("url Changed!")
let url = urlTextField.text;
loadUrl(url!)
return true
}
}
网友评论