随笔- 3538 文章- 1 评论- 67 阅读- 398万

Swift - 使用UIWebView和UIToolbar制作一个浏览器

使用网页控件（UIWebView）与工具栏控件（UIToolbar），我们可以自制一个小型的浏览器，其功能如下：

1，输入网址，点击“Go”按钮加载网页

2，加载过程中有进度条，同时可以点击停止按钮取消加载

3，有页面刷新按钮

4，有前进后退按钮

效果图如下：

代码如下：

class ViewController: UIViewController, UIWebViewDelegate,UITextFieldDelegate {
     
    @IBOutlet var btngo:UIButton!
    @IBOutlet var webview:UIWebView!
    @IBOutlet var txturl:UITextField!
    var loadIndicator:UIActivityIndicatorView!
     
    //进度条计时器
    var ptimer:NSTimer!
    //进度条控件
    var progBar:UIProgressView!
     
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
         
        self.webview.delegate = self;
        loadIndicator = UIActivityIndicatorView(frame: CGRectMake(100.0, 100.0, 32.0, 32.0));
        loadIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
        self.view.addSubview(loadIndicator);
         
        txturl.delegate = self
         
         
        //构建浏览器工具条
        setupBrowserToolbar()
    }
     
    func setupBrowserToolbar()
    {
        // 创建一个浏览器工具条，并设置它的大小和位置
        var browserToolbar =  UIToolbar(frame:CGRectMake(0, 20, 320, 44))
         
        // 将工具条添加到当前应用的界面中
        self.view.addSubview(browserToolbar)
         
        //创建图片工具条，但是不是直接使用文件名，而是用 NSData 方式初始化 UIImage
        var path = NSBundle.mainBundle().pathForResource("back", ofType:"png")
         
        var urlStr = NSURL.fileURLWithPath(path!);
        var data = NSData(contentsOfURL:urlStr!);
        var btnback =  UIBarButtonItem(image:UIImage(data: data!),
          style:UIBarButtonItemStyle.Bordered, target:self,action:Selector("backClicked:"));
        //第一个分隔按钮
        var btngap1 =  UIBarButtonItem(barButtonSystemItem:UIBarButtonSystemItem.FlexibleSpace,
            target:nil,
            action:nil);
        // 创建前进按钮 UIBarButtonItem
        var btnforward = UIBarButtonItem(image:UIImage(named:"forward.png"),
          style:UIBarButtonItemStyle.Plain, target:self, action:Selector("forwardClicked:"));
         
        // 第二个分隔按钮，创建一个可伸缩的UIBarButtonItem
        var btngap2 =  UIBarButtonItem(barButtonSystemItem:UIBarButtonSystemItem.FlexibleSpace,
            target:nil,
            action:nil);
         
        // 创建重新加载按钮 UIBarButtonItem
        var btnreload = UIBarButtonItem(image:UIImage(named:"reload.png"),
          style:UIBarButtonItemStyle.Plain, target:self, action:Selector("reloadClicked:"));
         
        //第三个分隔按钮
        var btngap3 =  UIBarButtonItem(barButtonSystemItem:UIBarButtonSystemItem.FlexibleSpace,
            target:nil,
            action:nil);
         
        //创建加载停止按钮
        var btnstop = UIBarButtonItem(image:UIImage(named:"stop"),
          style:UIBarButtonItemStyle.Plain, target:self, action:Selector("stopClicked:"));
         
        //第四个分隔按钮
        var btngap4 =  UIBarButtonItem(barButtonSystemItem:UIBarButtonSystemItem.FlexibleSpace,
            target:nil,
            action:nil);
         
        //创建进度工具条
        progBar = UIProgressView(progressViewStyle:UIProgressViewStyle.Bar)
         
        // 设置UIProgressView的大小
        progBar.frame = CGRectMake(0 , 0 , 80, 20)
         
        // 设置该进度条的初始进度为0
        progBar.progress = 0
         
        // 创建使用 UIView 的自定义的 UIBarButtonItem
        var btnprog =  UIBarButtonItem(customView:progBar)
         
        // 为工具条设置工具按钮
        browserToolbar.setItems( [btnback,btngap1, btnforward,btngap2,
          btnreload,btngap3, btnstop,btngap4, btnprog ], animated:true)
         
        //创建计时器对象
        ptimer = NSTimer.scheduledTimerWithTimeInterval(0.2,
            target:self ,selector: Selector("loadProgress"),
            userInfo:nil,repeats:true);
        ptimer.invalidate()
    }
     
    func textFieldShouldReturn(textField:UITextField) -> Bool
    {
        txturl.resignFirstResponder()
        println("url Changed!")
        var url = txturl.text;
        loadUrl(url)
        return true
    }
    /*
        在 UIWebView 加载指定 URL
    */
    func loadUrl(url:String)
    {
        var urlobj = NSURL(string:url)
         
        var request = NSURLRequest(URL:urlobj!)
         
        webview.loadRequest(request);
    }
     
    func stopClicked(sender:UIBarButtonItem)
    {
        webview.stopLoading()
    }
     
    func reloadClicked(sender:UIBarButtonItem)
    {
        webview.reload()
    }
     
    func backClicked(sender:UIBarButtonItem)
    {
        webview.goBack()
    }
     
    func forwardClicked(sender:UIBarButtonItem)
    {
        webview.goForward()
    }
     
    @IBAction func goClicked(sender:UIButton)
    {
        //收起输入面板
        txturl.resignFirstResponder()
        var url = txturl.text;
        loadUrl(url)
    }
     
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
     
     
    func webViewDidStartLoad(webView:UIWebView)
    {
        progBar.setProgress(0, animated:false);
        ptimer.fire();
        loadIndicator.startAnimating();
    }
    func webViewDidFinishLoad(webView:UIWebView)
    {
        loadIndicator.stopAnimating();
        progBar.setProgress(1, animated:true);
        ptimer.invalidate();
    }
    func loadProgress()
    {
        // 如果进度满了，停止计时器
        if(progBar.progress >= 1.0)
        {
            // 停用计时器
            ptimer.invalidate();
        }
        else
        {
            // 改变进度条的进度值
            progBar.setProgress(progBar.progress + 0.02, animated:true);
        }
    }
     
    func webView(webView: UIWebView!, didFailLoadWithError error: NSError!)
    {
        var alertview = UIAlertView();
        alertview.title = "出错!"
        alertview.message = error.localizedDescription;
        alertview.addButtonWithTitle("确定")
        alertview.show();
    }   
}