iOS學習之WebView的使用 （主要是下面的全屏半透明實現）

標籤：des   style   blog   http   io   ar   color   os   使用   

1、使用UIWebView載入網頁

 

運行XCode 4.3，建立一個Single View Application，命名為WebViewDemo。

2、載入WebView

在ViewController.h添加WebView成員變數和在ViewController.m添加實現

 

[cpp] view plaincopy 

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController  
4. {  
5.     UIWebView *webView;  
6. }  
7. @end  

[cpp] view plaincopy 

1. ViewController.m  

[cpp] view plaincopy 

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];  
5.     NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];  
6.     [self.view addSubview: webView];  
7.     [webView loadRequest:request];  
8. }  

運行，這樣百度網頁就開啟了

 

 

手機的網路環境是即時變化的，網路慢的時候，怎麼提示使用者網頁正在開啟呢？在網頁開啟出錯的時候怎麼提示使用者呢？這時候我們就需要知道網頁什麼時候開啟的，

什麼時候載入完成，什麼時候出錯了。那麼我們需要實現這個<UIWebViewDelegate>協議

3、實現協議，在ViewController.h修改如下：

 

[cpp] view plaincopy 

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController<UIWebViewDelegate>  
4. {  
5.     UIWebView *webView;  
6. }  
7. @end  

按住control+command+向上鍵，切換到ViewController.m檔案，這是我們在檔案中打入- (void) webView，就能看到如下實現方法：

 

 

 

UIWebView中幾個重要的函數
1.- (void )webViewDidStartLoad:(UIWebView  *)webView   網頁開始載入的時候調用
2.- (void )webViewDidFinishLoad:(UIWebView  *)webView  網頁載入完成的時候調用
3.- (void)webView:(UIWebView *)webView  didFailLoadWithError:(NSError *)error 網頁載入錯誤的時候調用

4、實現這三個方法，加入NSLog。

先在viewDidLoad 的webView執行個體化下面加上

    [webView setDelegate:self];設定代理。這樣上面的三個方法才能得到回調。

三個方法實現如下：

 

[cpp] view plaincopy 

1. <span style="font-family:Arial, Verdana, sans-serif;color:#333333;">- (void) webViewDidStartLoad:(UIWebView *)webView  
2. {  
3.     NSLog(@"webViewDidStartLoad");  
4. }  
5. - (void) webViewDidFinishLoad:(UIWebView *)webView  
6. {  
7.     NSLog(@"webViewDidFinishLoad");  
8. }  
9. - (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error  
10. {  
11.     NSLog(@"didFailLoadWithError:%@", error);  
12. }  
13. </span>  

運行列印：

2012-06-23 15:20:29.728 WebViewDemo[1001:f803] webViewDidStartLoad

2012-06-23 15:20:29.991 WebViewDemo[1001:f803] webViewDidFinishLoad

那我們試試error情況，把wifi關掉，運行列印結果：

 

 

2012-06-23 15:23:58.939 WebViewDemo[1087:f803] webViewDidStartLoad

2012-06-23 15:23:59.016 WebViewDemo[1087:f803] webViewDidFinishLoad

請求結果不變，為什麼關掉網路還成功了呢？緩衝？我換163.com試試，這是真正的結果出來了：

 

2012-06-23 15:24:41.131 WebViewDemo[1134:f803] webViewDidStartLoad

2012-06-23 15:24:41.149 WebViewDemo[1134:f803] didFailLoadWithError:Error Domain=NSURLErrorDomain Code=-1009 "The Internet connection appears to be offline." UserInfo=0x6b41660 {NSErrorFailingURLStringKey=http://www.163.com/, NSErrorFailingURLKey=http://www.163.com/, NSLocalizedDescription=The Internet connection appears to be offline., NSUnderlyingError=0x6eae690 "The Internet connection appears to be offline."}

串連錯誤了，調用了didFailLoadWithError。

 

5、載入等待介面

為了給使用者更直觀的介面效果，我們加上等待的loading介面試試

 

在webViewDidStartLoad加入等待

 

 

 

[cpp] view plaincopy 

1. <strong>- (void) webViewDidStartLoad:(UIWebView *)webView  
2. {  
3.     //建立UIActivityIndicatorView背底半透明View       
4.     UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];    
5.     [view setTag:108];    
6.     [view setBackgroundColor:[UIColor blackColor]];    
7.     [view setAlpha:0.5];    
8.     [self.view addSubview:view];    
9.       
10.     activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 32.0f, 32.0f)];    
11.     [activityIndicator setCenter:view.center];    
12.     [activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];    
13.     [view addSubview:activityIndicator];    
14.   
15.     [activityIndicator startAnimating];  
16.    </strong>  

載入完成或失敗時，去掉loading效果

 

 

 

 

[cpp] view plaincopy 

1. <strong>- (void) webViewDidFinishLoad:(UIWebView *)webView  
2. {  
3.     [activityIndicator stopAnimating];  
4.     UIView *view = (UIView*)[self.view viewWithTag:108];  
5.     [view removeFromSuperview];  
6.     NSLog(@"webViewDidFinishLoad");  
7.   
8. }  
9. - (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error  
10. {  
11.     [activityIndicator stopAnimating];  
12.     UIView *view = (UIView*)[self.view viewWithTag:108];  
13.     [view removeFromSuperview];  
14.     </strong>  

運行效果：

 

 

 

 

例子代碼：http://download.csdn.net/detail/totogo2010/4391866

 

著作權聲明：本文由http://blog.csdn.net/totogo2010/原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者部落格連結，謝謝

iOS學習之WebView的使用 （主要是下面的全屏半透明實現）