以前学习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,不过对上面没有影响