UIWebView应用——自己动手写IOS浏览器

      以前学习android的时候研究WebView控件，也是自己写了个简易版的浏览器；IOS同样做个简易版的浏览器，纯属学习，老鸟轻拍哈，若有失误，不吝赐教哈。。。

 

第一步：创建ios project 如下图所示，选择Single View Application：（目前只需要一个界面，所以选这个）

 

第二步：按照下图所示完善product Name（项目名），组织名等，然后next;

 

第三步：按照下图保存项目（也可自行保存到其他路径），create即可；

最后生成的项目结构如下所示：

 

至此，项目建立已经完成，下面我们先在storyboard里面设计界面，然后码代码。

界面设计，打开main.storyboard，然后从控件区域直接拖控件到设计界面，如下图包括四个控件，UITextField,UIButton,UIWebView和红色框里面的UIActivityIndicatorView(俗称“菊花”)四个控件

 然后在这个界面点击编辑器右上角的show the assistant editor按钮（红框中）

 

点击后界面变成下图样式
 接下来的操作简单来讲就是关联代码与刚刚设计的各个控件，按住鼠标按住UITextFeild并按住键盘control键，拖动鼠标到右侧代码@interface与@end之间松开，弹出下面窗口

 其他都默认，Name框输入serchUrl（生成的代码中对应这个输入框的名称）,然后点击connect即可，右侧代码会增加一行，并且右边会有个实心的圆圈，表示属性与界面已关联好

 

 

  @property (weak, nonatomic) IBOutletUITextField *serchUrl; 

 

 其他三个控件做法和UITextFeild一样，最后生成的ViewController.h如下

 

////  ViewController.h//  MyWebView////  Created by 张亚强 on 15/4/13.//  Copyright (c) 2015年 张亚强. All rights reserved.//#import <UIKit/UIKit.h>//实现UIWebViewDeleGate协议，也就是能够使用其方法//比如在ViewController.m中的webViewDidStartLoad等@interface ViewController : UIViewController<UIWebViewDelegate>@property (weak, nonatomic) IBOutlet UIWebView *webView;//webview@property (weak, nonatomic) IBOutlet UITextField *serchUrl;//输入框@property (weak, nonatomic) IBOutlet UIButton *goBtn;//按钮@property (strong, nonatomic) IBOutlet UIActivityIndicatorView *indicator;//菊花@end

 

 做到这一步界面和代码已经做好关联（苹果认死了MVC模式），我们成功了一大半，下面的内容是：输入框输入网址（比如  tudou.com），然后点击GO按钮，则下面WebView 跳转到土豆网主页。具体的编码工作在ViewController.m文件中完成，代码以及详细的注释如下：

////  ViewController.m//  MyWebView////  Created by 张亚强 on 15/4/13.//  Copyright (c) 2015年 张亚强. All rights reserved.//#import "ViewController.h"@implementation ViewController//此方法是类初始化时执行的- (void)viewDidLoad {    [super viewDidLoad];    [self loadWebViewWithString:@"http://www.baidu.com"];}//初始化首页百度封装成方法，在viewDidLoad中初始化调用//传入网址stringUrl拼成http://。。。这种格式并在webview中显示-(void)loadWebViewWithString:(NSString *)stringUrl{    NSURL *url = [[NSURL alloc] initWithString:stringUrl];    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];    [self.webView loadRequest:request];    self.serchUrl.text=@"www.baidu.com";}//下面三个方法是UIWebViewDelegete的//WebView加载时执行- (void)webViewDidStartLoad:(UIWebView *)webView{    //让菊花转动    [self.indicator startAnimating] ;}//webview加载完毕时执行- (void)webViewDidFinishLoad:(UIWebView *)webView{    //让菊花停止转动    [self.indicator stopAnimating];}//webview加载出错时执行- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{    [self.indicator stopAnimating];}//这个方法是项目建好后自动生成的- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

 

 

 现在运行项目已经可以出现百度首页了，是不是很开心啊

 
      然后激动的你在输入框输入tudou.com之后发现页面并没有按照预想的那样跳转，问题出在哪儿呢？我们回头想想，也梳理下刚刚的操作步骤。第一步画好了界面，第二步代码与界面关联好，总觉的哪儿不对，是的，按钮按下的跳转事件呢？做法和前面按住control拖动控件到ViewController.h一样，这次我们直接拖到ViewController.m。

      同样在Main.storyboard界面点击show assistant editor按钮，如果右边的代码不是ViewContoller.m的，那么在红框中找到ViewController.m（我相信这个你绝对没问题）

 
按住control键拖动GO到右侧代码，弹出框name输入sendPage；会在右侧生成sendPage方法；然后完善方法。最后ViewController.m代码如下

////  ViewController.m//  MyWebView////  Created by 张亚强 on 15/4/13.//  Copyright (c) 2015年 张亚强. All rights reserved.//#import "ViewController.h"@implementation ViewController//此方法是类初始化时执行的- (void)viewDidLoad {    [super viewDidLoad];    [self loadWebViewWithString:@"http://www.baidu.com"];}//初始化首页百度封装成方法，在viewDidLoad中初始化调用//传入网址stringUrl拼成http://。。。这种格式并在webview中显示-(void)loadWebViewWithString:(NSString *)stringUrl{    NSURL *url = [[NSURL alloc] initWithString:stringUrl];    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];    [self.webView loadRequest:request];    self.serchUrl.text=@"www.baidu.com";}//GO按钮点击转到网页- (IBAction)sendPage:(id)sender {    [self.indicator startAnimating] ;    //封装成URL，http://后加输入框输入的网址    NSURL *url = [[NSURL alloc] initWithString:[@"http://" stringByAppendingPathComponent:self.serchUrl.text]];    //封装成Request    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];    //加载网页    [self.webView loadRequest:request];}//下面三个方法是UIWebViewDelegete的//WebView加载时执行- (void)webViewDidStartLoad:(UIWebView *)webView{    //让菊花转动    [self.indicator startAnimating] ;}//webview加载完毕时执行- (void)webViewDidFinishLoad:(UIWebView *)webView{    //让菊花停止转动    [self.indicator stopAnimating];}//webview加载出错时执行- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{    [self.indicator stopAnimating];}//这个方法是项目建好后自动生成的- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

 

*注意在main.storyboard界面选中菊花，在右边点击，然后在下面Activity indicator View中选中Hides when stopped，表示菊花在不转动的情况下是隐藏的。

 至此我们的简易版浏览器全部做完，输入tudou.com，点击GO会跳转到土豆首页

 其他细节比如旋转屏幕后布局问题这些不再赘述，自行百度去吧。程序代码打包给出

打包的代码中我加了Navigator，不过对上面没有影响

源码：MyWebView.zip