iOS WebView with an Address Bar

I’ve started cre­at­ing an iPhone appli­ca­tion at my job and one of the things I imme­di­ately took advan­tage of is the UIWe­b­View. One of the things it lacks is an address bar and a progress load­ing indi­ca­tor (prob­a­bly talk about this in another post). An address bar can be pretty use­ful for know­ing where you are and espe­cially if it acts like Safari’s Address bar where it will scroll along with the con­tent and slide off screen as well.

I started using iOS’s sto­ry­board­ing fea­ture where you can eas­ily attach view con­troller and actions, which is pretty dark amaz­ing because it kills off the need for XIB files. I love it. Any­way, you can do all the easy stuff with cre­at­ing a new project and drag­ging UIWe­b­View under the view and resize it because we also want a tool­bar with a UITextField in it.

You’ll want to cre­ate IBOut­let Instance vari­ables for the UIWe­b­View, UITool­Bar and UITextField in the ViewController’s header file and then go back to the inter­face builder to drag from the View Con­troller to the web­view and the Text Field.

One thing we want to lis­ten for is the changes to the web­view, so we’ll need to set the View­Con­troller as  a del­e­gate (crtl + drag from Web­View to View con­troller I think or other way around)

If you call load­Request from the UIWe­b­View in view­Did­Load, you’ll see your address bar updated with the url. That was pretty easy.

Next, we’ll want to get the UIWe­b­View to take on the full view­able screen (except the sys­tem bar) and add the tool­bar to the UIWe­b­View, so we can get the Safari-like scroll effect. No longer we will use the inter­face builder to do this.

  • First, we need to add the tool bar to the UIWe­b­View. Remem­ber, our tool bar has already been instan­ti­ated in the sto­ry­board. The UIWe­b­View has a scrol­lview to which we can eas­ily say [web­View scrol­lview addSubview:addressToolBar].
  • Then we’ll want to push down the con­tent. There is another view called UIWeb­BrowserView that holds the con­tent. So in view­Did­Load we’ll want to all the sub­views of the UIWe­b­View until we find a class called UIWeb­BrowserView. 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 cre­ate a new frame and set the origin.y to 0 and assign it to the webview.

Run the appli­ca­tion and the tool bar should dis­ap­pear when scrolling away, but it sucks when scrolling hor­i­zon­tally. This is where we take advan­tage of delegates!

  • We’ll want to set the webview’s scroll view’s del­e­gate to our view con­troller: webView.scrollview.delegate = self;
  • You’ll also want to add UIS­crol­lViewDel­e­gate to the ViewController’s header file.
  • Imple­ment - (void)scrollViewDidScroll:(UIS­crol­lView *)scrol­lView in the ViewController’s source then cre­ate 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 tool­bar frame to the new frame. (same thing we did above basically).

Easy, wasn’t it? Now you have an address bar that scroll’s hor­t­i­zon­tally just like safari’s Address bar.

Of course I’m leav­ing a lot of details out such as Address bar nav­i­ga­tion, page nav­i­ga­tion but­tons and etc, but I never said we were going to make a browser! The other details you want is left for you to implement.

You just read iOS WebView with an Address Bar. Please share if you've liked it.
You may find related posts by clicking on the tags and/or categories above.