[iPhone]iPhone UIWebView multi tabbed browsing

출처 : http://kaiengelhardt.com/2011/03/19/iph ··· bview%2F


Let’s Jump Into the Code

Now go to the ExplorerViewController.h file and modify it to this :

#import <UIKit/UIKit.h>

@interface ExplorerViewController : UIViewController <UITextFieldDelegate, UIWebViewDelegate, UIActionSheetDelegate>{
    UITextField *urlField;
    UIBarButtonItem *refreshButton;
    UIBarButtonItem *backButton;
    UIBarButtonItem *forwardButton;
    UIBarButtonItem *bookMarksButton;
    UIActivityIndicatorView *loadingActivity;
    UIWebView *webView;
    UINavigationBar *navigationBar;
    NSMutableArray *webViews;
    UIPageControl *tabControl;
}

@property (nonatomic, retain) IBOutlet UITextField *urlField;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *refreshButton;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *backButton;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *forwardButton;
@property (nonatomic, retain) IBOutlet UIBarButtonItem *bookMarksButton;
@property (nonatomic, retain) IBOutlet UIActivityIndicatorView *loadingActivity;
@property (nonatomic, retain) IBOutlet UIWebView *webView;
@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar;
@property (nonatomic, retain) NSMutableArray *webViews;
@property (nonatomic, retain) IBOutlet UIPageControl *tabControl;

-(NSString*)repairURL:(NSString*)url;
-(IBAction)refreshWebView;
-(IBAction)goBack;
-(IBAction)goForward;
-(void)actualizeButtons;
-(IBAction)bookmarksButtonTapped;
-(IBAction)addBookmarkButtonTapped;
-(IBAction)addTab;
-(IBAction)closeTab;
-(IBAction)tabControlValueChanged;

@end

We define a couple of methods, such as addTab or closeTab and tabControlValueChanged.
We also define one IBOutlet for the UIPageControl and one NSMutableArray, that will hold all our tabs.

Now go to the ExplorerViewController.h file and make the following :
Synthesize the properties we’ve just declared :

@synthesize tabControl;
@synthesize webViews;

Release them in dealloc :

[webViews release];
[tabControl release];
tabControl = nil;
webViews = nil;

Then go to the viewDidLoad method and add the following :

webViews = [[NSMutableArray alloc] initWithCapacity:10];
[self.webViews addObject:webView];
tabControl.numberOfPages = [self.webViews count];
tabControl.hidesForSinglePage = false;

Here we create a new NSMutableArray for the tabs and pass our current webView into it.
Then we actualize the actualise the number of pages in the tabControl to the number of tabs.

Switching Between Tabs

Then go to the top of the file and paste in this code :

-(IBAction)tabControlValueChanged {
    CGRect rect = self.webView.frame;
    self.webView.delegate = nil;
    [self.webView removeFromSuperview];
    self.webView = [webViews objectAtIndex:tabControl.currentPage];
    [self.view addSubview:self.webView];
    self.webView.delegate = self;
    urlField.text = [[[[self webView]request] URL] absoluteString];
    self.webView.frame = rect;
    [self actualizeButtons];
}

This code is a little bit tricky.
First I thought, that I could say self.webView = [webViews objectAtIndex:tabControl.currentPage] , but that didn’t work. The webView did not change.
The code above is a little workaround for it.
We remove the webView from its super view and add the new webView to the view of our viewController.
Note that we are setting the frame of the new webView to the frame of the current webView.
We also have to set the delegate of the current webView to nil and the delegate of the new webView to self.
Because we are changing the webView the current url changes too.
Therefore we have to set the text of the urlField to the url of the newTab.

This code is a little bit useless if we cannot add tabs.

Adding Tabs

Here’s the implementation of the addTab method :

-(IBAction)addTab {
    UIWebView *newTab = [[UIWebView alloc] initWithFrame:self.webView.frame];
    self.webView.delegate = nil;
    newTab.autoresizingMask = self.webView.autoresizingMask;
    newTab.scalesPageToFit = true;
    self.webView = newTab;
    self.webView.delegate = self;
    [webViews addObject:self.webView];
    tabControl.numberOfPages = [webViews count];
    tabControl.currentPage = tabControl.numberOfPages;
    urlField.text = @"";
    [newTab release];
    [self tabControlValueChanged];
    [urlField becomeFirstResponder];
}

First we create a new UIWebView, that is called newTab.
Then we set the delegate of the current webView to nil and set some default behavior of the newTab, such as the AutoResizingMask.
The AutoResizingMask says the webView how it should resize if the orientation is changed.
Do you remember, what we were doing in the last tutorial to define the resizing behavior of the webView?
We were setting the springs & struts in the Interface Builder.
What we do here is just copying the from the current webView to the newTab.
After that we set the current webView to the newTab and set the delegate of it to self.
After that we add the newTab to the webViews array.
The we actualise the number of pages in the tabControl and set its current page to the number of the new tab.
Finally we clear the urlField and let it become the first responder.
Note that we are calling the tabControlValueChanged method from inside of this method.
This is to switch directly to the new tab.

Closing Tabs

Now there is only one thing left : The closeTab method.
Paste these lines above the addTab method :

-(IBAction)closeTab {
    if (!(tabControl.numberOfPages <=1)) {
        int position = tabControl.currentPage - 1;
        if (position < 0) {
            position = 0;
        }
        [webViews removeObjectAtIndex:tabControl.currentPage];
        tabControl.currentPage = position;
        [self tabControlValueChanged];
        self.tabControl.numberOfPages--;
    }
}

This code is mostly self explaining.
We remove the current tab and show the tab that comes before the current tab.
If there is only one tab, nothing should happen.

Save everything in here and go back to the Interface Builder.

The Finishing Touches

Click on the page control and set the springs and struts to the following :

Then click on the addTab button and set them to this :

Finally click on the closeTab button and set them to this :

Then connect the valueChanged event of the page control with the tabControlValueChanged method and the touchUp event of the addTab- and closeTabButton with the addTab and the closeTab method.

Save everything and run your project.
It should work perfectly now.
Here’s is video showing it :

Tutorial Ending

Yeaaah!!!
Our web browser is more than complete.
You can be proud of you, because you made a complete browser, that can compete with Safari.
I hope you’ve enjoyed this tutorial and I’m glad that you are coming to my website.
In the next tutorial I think of making a video player or showing you how to take photos in your app.

Happy programming and god bless.

Here is the complete Xcode project with all the code we’ve developed in this tutorial series : Explorer Final Version with Tab Feature

Posted by incree

2011/04/10 18:57 2011/04/10 18:57
,
Response
0 Trackbacks , 1 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/12

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

« Previous : 1 : ... 199 : 200 : 201 : 202 : 203 : 204 : 205 : 206 : 207 : Next »

Notices

Archives

Authors

  1. incree

Recent Trackbacks

Calendar

«   2014/10   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Site Stats

Total hits:
256715
Today:
229
Yesterday:
183