I started using iOS's storyboarding feature where you can easily attach view controller and actions, which is pretty dark amazing because it kills off the need for XIB files. I love it. Anyway, you can do all the easy stuff with creating a new project and dragging UIWebView under the view and resize it because we also want a toolbar with a UITextField in it.
You'll want to create IBOutlet Instance variables for the UIWebView, UIToolBar and UITextField in the ViewController's header file and then go back to the interface builder to drag from the View Controller to the webview and the Text Field.
One thing we want to listen for is the changes to the webview, so we'll need to set the ViewController as a delegate (crtl + drag from WebView to View controller I think or other way around)
- Add UIWebViewDelegate to the ViewController's header file.
- Go to the ViewController's source file and implement webView:shouldStartLoadWithRequest:navigationType: where you''ll ask the request obj for it's absolutestring and assign it to the address bar with setText.
If you call loadRequest from the UIWebView in viewDidLoad, you'll see your address bar updated with the url. That was pretty easy.
Next, we'll want to get the UIWebView to take on the full viewable screen (except the system bar) and add the toolbar to the UIWebView, so we can get the Safari-like scroll effect. No longer we will use the interface builder to do this.
- First, we need to add the tool bar to the UIWebView. Remember, our tool bar has already been instantiated in the storyboard. The UIWebView has a scrollview to which we can easily say [webView scrollview addSubview:addressToolBar].
- Then we'll want to push down the content. There is another view called UIWebBrowserView that holds the content. So in viewDidLoad we'll want to all the subviews of the UIWebView until we find a class called UIWebBrowserView. Here's some code:
for (UIView * WVSubview in [webView subviews]) {
if ([NSStringFromClass([WVSubView class]) isEqualToString:@"UIWebBrowserView"]) {
CGRect frame = WVSubview.frame;
frame.origin.y = addressToolbar.frame.size.height; // Shift down
WVSubview.frame = frame;
}
}- We'll also want to set the webView.frame = self.view.frame. You might have to create a new frame and set the origin.y to 0 and assign it to the webview.
Run the application and the tool bar should disappear when scrolling away, but it sucks when scrolling horizontally. This is where we take advantage of delegates!
- We'll want to set the webview's scroll view's delegate to our view controller: webView.scrollview.delegate = self;
- You'll also want to add UIScrollViewDelegate to the ViewController's header file.
- Implement - (void)scrollViewDidScroll:(UIScrollView *)scrollView in the ViewController's source then create new frame, like we did above, and set it to the tollbar's frame. You'll want to set the newframe.origin.x to the scrollview.contentOffset.x and then set the toolbar frame to the new frame. (same thing we did above basically).
Easy, wasn't it? Now you have an address bar that scroll's hortizontally just like safari's Address bar.
Of course I'm leaving a lot of details out such as Address bar navigation, page navigation buttons and etc, but I never said we were going to make a browser! The other details you want is left for you to implement.