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