Web View

(Updated: )

建立一個簡單Web瀏覽器，此範例需要使用到TextField、Web View、Toolbar、Bar Button Item、Activity Indicator View；元件的用途方別如下：

  1. TextField:輸入網址。
  2. Web View:show網頁使用。
  3. Toolbar、Bar Button Item:工具列，可返回上頁、下頁、重整。
  4. Activity Indicator View:讓使用者得知網頁還在進行loading。

預期完成後的結果如下圖：

**Step 1.**建立SingleView，專案名稱為Web View

**Step 2.**編輯MainStoryboard.storyboard

將元件依序拖曳近來，並且安排好擺設的位置

需注意的是Activity Indicator View的屬性設定，要將Animating、Hidden打勾，預設才會隱藏，動畫也才會執行。

**Step 3.**編輯ViewController.h

  1. 加入UIWebViewDelegate協定。
  2. 定義元件的變數。
  3. 定義Bar Button Item的IBAction事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@interface ViewController : UIViewController<UIWebViewDelegate>
{
    UIWebView *webView_;
    UITextField *urlTextField_;
    UIActivityIndicatorView *activityView_;
}

@property (strong, nonatomic) IBOutlet UIWebView *webView;
@property (strong, nonatomic) IBOutlet UITextField *urlTextField;
@property (strong, nonatomic) IBOutlet UIActivityIndicatorView *activityView;

-(IBAction)goforward:(id)sender; //往下頁
-(IBAction)goback:(id)sender;    //往上頁
-(IBAction)goaddress:(id)sender; //往目前的網址
-(IBAction)hitReturn:(id)sender; //點選鍵盤的return的觸發事件

@end

**Step 4-1.**編輯ViewController.m

完成synthesize的部份。

1
@synthesize webView = webView_, urlTextField = urlTextField_, activityView = activityView_;

完成之後依序寫入往下頁、往上頁的事件，直接使用WebView元件提供的方法goForward、goBack來達到往下頁、往上頁的目的。

1
2
3
4
5
6
7
8
-(IBAction)goforward:(id)sender
{
    [self.webView goForward];
}
-(IBAction)goback:(id)sender
{
    [self.webView goBack];
}

**Step 4-2.**編輯ViewController.m

goaddress事件中，先取得TextField的值，放入NSString的urlString變數中，在將此值，給予NSURL的url變數；得知url為何時，再使用NSURLRequest來取得url所得到的網頁結果；而這個結果由Web View來呈現。

[urlTextField_ resignFirstResponder];是將TextField的鍵盤回到原本的狀態(原本狀態為隱藏)。

1
2
3
4
5
6
7
8
9
10
11
-(IBAction)goaddress:(id)sender
{
    NSString *urlString;
    urlString = [self.urlTextField text];
    
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest];
    
    [urlTextField_ resignFirstResponder];
}

**Step 4-3.**編輯ViewController.m

透過webViewDidStartLoad、webViewDidFinishLoad這兩個方法，來設定Activity Indicator View是否為隱藏，並開始動畫的效果。

1
2
3
4
5
6
7
8
9
10
11
-(void) webViewDidStartLoad:(UIWebView *)webView
{
    activityView_.hidden = NO;
    [activityView_ startAnimating];
}

-(void) webViewDidFinishLoad:(UIWebView *)webView
{
    activityView_.hidden = YES;
    [activityView_ stopAnimating];
}

hitReturn:為鍵盤上的return被按下時要執行的事件，其內容都跟上面一樣！

1
2
3
4
5
6
7
8
9
10
-(IBAction)hitReturn:(id)sender
{
    NSString *urlString = [self.urlTextField text];
    
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest];
    
    [urlTextField_ resignFirstResponder];
}

**Step 5.**建立關連

最後就是建立IBAction、IBOutlet的關聯，如下圖：

如果想要一近畫面時就啟動預設的網頁畫面，在viewDidLoad加入下列的程式碼，其運作過程都一樣。

1
2
3
4
5
6
7
8
9
10
11
- (void)viewDidLoad
{
    [super viewDidLoad];
    webView_.delegate = self;
    
    NSString *urlString = @"http://www.google.com";
    
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest];
}