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