iOS_UIWebView UIActivityIndicatorView

一、UIWebView

UIWebView是可以在应用中嵌入网页内容的类。我们可以使用它来实现网页浏览、超链接、加载本地HTML文件等功能。本博文最后将使用UIWebView实现简单的浏览器功能。

Class：UIWebView

Inheritance: NSObject -> UIResponder -> UIView -> UIWebView

Delegate：UIWebViewDelegate

API中UIWebView的原文描述
You use the UIWebView class to embed web content in your application. To do so, you simply create a UIWebView object, attach it to a window, and send it a request to load web content. You can also use this class to move back and forward in the history of webpages, and you can even set some web content properties programmatically.

使用UIWebView的步骤

1.创建UIWebView对象

// 创建UIWebView
    UIWebView *webView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

2.设置相关属性

// 自动对页面进行缩放以适应屏幕
    webView.scalesPageToFit = YES;

3.将UIWebView对象添加至视图

    [self.view addSubview:webView];

4.加载内容

    // 创建URL
    NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"];
    // 创建URL请求
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    // 开始连接到给定的URL地址
    [webView loadRequest:urlRequest];

UIWebView的三种加载方式

API 提供了UIWebView三种加载方式
1. - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)encodingName baseURL:(NSURL *)baseURL
2. - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
3. - (void)loadRequest:(NSURLRequest *)request

1、直接给出URL地址加载网页

    NSString *path = @"http://www.baidu.com";
    NSURL *url = [[NSURL alloc] initWithString:path];
    [webView loadRequest:[NSURLRequest requestWithURL:url]];

2、将本地html文件内容嵌入web页面

    NSString *resourcePath = [[NSBundle mainBundle] resourcePath];
    NSString *filePath  = [resourcePath stringByAppendingPathComponent:@"test.html"];
    NSString *htmlstring =[[NSString alloc] initWithContentsOfFile:filePath
                                                          encoding:NSUTF8StringEncoding error:nil];
    [webView loadHTMLString:htmlstring
                    baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]  bundlePath]]];

如果不通过html文件载入，也可以给定html代码字符串载入页面

    NSString *HTMLData = @"图片";
    [webView loadHTMLString:HTMLData
                    baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

3.与第二种类似，只是更详细的给出了网页的编码方式。

UIWebViewDelegate

UIWebViewDelegate定义了一些方法，可以在网页被加载的特定时候进行干预。如要使用这些方法必须签订协议，指定代理人，才可以实代理方法。

/* 网页视图请求加载失败时调用。提供NSSError对象，标识所发生错误类型。*/
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error

/* 网页视图加载结束调用 */
- (void)webViewDidFinishLoad:(UIWebView *)webView

/* 网页视图开始加载调用 */
- (void)webViewDidStartLoad:(UIWebView *)webView

---

二、UIActivityIndicatorView

活动指示器（俗称：小菊花）用来显示一个任务正在进行中，外观是一个要么正在旋转，要么停止的齿轮。主要应用是耗时操作的提示，比如网络请求。

Class：UIActivityIndicatorView

Inheritance: NSObject -> UIResponder -> UIView -> UIActivityIndicatorView

该类使用简单，在此仅给出其SDK中的声明供参考。

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIActivityIndicatorView : UIView <NSCoding>
{ 
  @package
    CFTimeInterval               _duration;
    BOOL                         _animating;
    UIActivityIndicatorViewStyle _activityIndicatorViewStyle;
    UIActivityIndicatorViewStyle _actualActivityIndicatorViewStyle;
    BOOL                         _hidesWhenStopped;
}

- (instancetype)initWithActivityIndicatorStyle:(UIActivityIndicatorViewStyle)style;     // sizes the view according to the style

@property(nonatomic) UIActivityIndicatorViewStyle activityIndicatorViewStyle; // default is UIActivityIndicatorViewStyleWhite
@property(nonatomic) BOOL                         hidesWhenStopped;           // default is YES. calls -setHidden when animating gets set to NO

@property (readwrite, nonatomic, retain) UIColor *color NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;

- (void)startAnimating;
- (void)stopAnimating;
- (BOOL)isAnimating;
@end

需要注意的属性：hidesWhenStopped，小齿轮停止后是否隐藏，为了与用户保持良好的交互，一般保持默认值YES，即齿轮停止的时候隐藏。

---

三、简单浏览器功能的实现

使用UIWebView和UIActivityIndicatorView可以实现简单的浏览器功能，即在窗口最上部使用文本框接受输入的URL地址，点击按钮跳转到指定的网页。下面的示例提供了实现此功能的核心代码，并且进行了简单的封装。

解决思路：UITextField对象接受URL地址，点击UIButton对象触发事件，在该事件中通过tag值找到UITextField对象，同时辞去第一响应者，调用封装后的加载网页方法。为提高交互效果，需要使用UITextFieldDelegate和UIWebViewDelegate两个协议，使用UIActivityIndicatorView进行耗时的提示。

具体实现的核心代码如下：

// 加载网页视图的方法
- (void)loadWebPageWithString:(NSString *)urlString
{
    urlString = [NSString stringWithFormat:@"http://%@", urlString];
    NSLog(@"%@", urlString);
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [_webView loadRequest:request];
}

// 使用的协议
- (void)webViewDidStartLoad:(UIWebView *)webView
{
    NSLog(@"开始加载");

    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(_webView.frame.origin.x, _webView.frame.origin.y, _webView.frame.size.width, _webView.frame.size.height)];
    backgroundView.tag = 1004;
    backgroundView.backgroundColor = [UIColor blackColor];
    backgroundView.alpha = 0.3;
    [self.view addSubview:backgroundView];

    _activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(_webView.frame.origin.x, _webView.frame.origin.y, _webView.frame.size.width, _webView.frame.size.height)];
    _activityIndicator.center = CGPointMake(_webView.frame.size.width / 2, _webView.frame.size.height / 2);
    _activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhiteLarge;
    [backgroundView addSubview:_activityIndicator];

    [_activityIndicator startAnimating];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSLog(@"结束加载");

    [_activityIndicator stopAnimating];
    UIView *backgroundView = (UIView *)[self.view viewWithTag:1004];
    [backgroundView removeFromSuperview];
}

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    NSLog(@"加载错误");

    [_activityIndicator stopAnimating];
    UIView *backgroundView = (UIView *)[self.view viewWithTag:1004];
    [backgroundView removeFromSuperview];

    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"通知" message:@"加载失败" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
    alertView.frame = CGRectMake(30, 150, self.view.frame.size.width - 60, 150);
    [alertView show];
    [alertView release];
}

详情可见附件: 简单浏览器实现的Demo

---

---