iPhone Tutorial Three – Simple Gesture Recognizer and Storyboard

iPhone Tutorial One — Introduction to Storyboarding
iPhone Tutorial Two — Combining UITabBarControllers, UITableViews and UINavigationControllers using Storyboard

Alright guys, it has been quite some time since I posted an iPhone tutorial. This one wont go too in depth, but it will show some simple Gesture Recognizer applications, while putting it all together in a functioning application that you could really use. I’ll start this off with a short reason as to what lead me to do this tutorial.

A friend of mine started up a blog with a friend of his about technology and how this technology is changing how we operate on a day-to-day basis. Their site is Hacking Humanity, and their information will be given at the bottom of this tutorial. Now I was really thinking of doing a tutorial that used the WordPress API, however I felt like doing an API tutorial, while some people are still in their infancy in learning Xcode 4.2 and Storyboarding, was a bad idea. So now, we will be creating a simple Web-based application that uses gesture controls instead of actual buttons. Now, you have to understand, this application will be using websites that are built for mobile platforms, hence there will be no need for horizontal scrolling, which is what makes these gestures useful.

Now, to start off this tutorial, let’s create a Single View Application.

Also, make sure “Use Storyboard” and “Use Automatic Reference Counting” are both checked.

Now, let’s navigate over to the MainStoryboard.storyboard file. As opposed to my other tutorials, we are only going to be using one View Controller. We are going to start this out by adding a WebView to the View Controller.

So I’m going to step away from storyboarding for a little bit and go to the actual coding portion of this. I decided to add a few unnecessary things to this blog, to teach a few things. I’ll add these as I go along with this tutorial.

1 – Try to create classes as much as possible

This is something I wish I had learned from the get go. It seems to have not sunk into my head when I was taking Object Oriented Programming, but doing iOS Development has really made me realize the usefulness of this. If you can, create classes for complicated objects you may use in the future, like custom menus, etc. You may not use an exact copy of the one you originally created, but it will give you a very big head start on a project if you have a library of classes already created. For this project, I created a bar that appears on the bottom of the screen when the web page is loading, with an activity spinner and label, and goes away when the webpage is complete. I could have not included this, but it would be much more difficult to explain adding each of these pieces to Interface Builder. Below is the class for the bar, called Loading Bar.

Loading Bar Class

Alright, now add this class to your project, and head into the ViewController.h file. Make sure to import the LoadingBar.h file, and also to add the UIActionSheetDelegate and UIWebViewDelegate. These are so we can access some delegate functions of UIActionSheet and UIWebView such as knowing when the web page is done loading.

Again, I am going to assume everyone understands what IBOutlet and IBAction are, and I am sure from the picture below you understand what needs to be added to the ViewController.h file. If not, the code to enter is below the picture.

#import <UIKit/UIKit.h>
#import "LoadingBar.h"
 @interface ViewController : UIViewController <UIActionSheetDelegate, UIWebViewDelegate> {
    LoadingBar *lbar;
    IBOutlet UIWebView *webView;
    BOOL CCView;
}
- (IBAction)presentMenu:(id)sender;
 @end

Alright, now lets head on over to the ViewController.m file, and start to do some programming. I deleted most of the delegate functions that aren’t needed in this program just to keep it simple. I’m going to do this file in stages, since there are a few things that, if I put this all up at once, might confuse you. First we are going to deal with the viewDidLoad method.

- (void)viewDidLoad

{

    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:@"http://www.hackinghumanity.com"];

    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    [webView loadRequest:request];

    lbar = [[LoadingBar alloc] init];
    [self.view addSubview:lbar];
}

Alright most of this should be pretty self explanitory. The webView will load up Hacking Humanity when the view first loads. Also, we initialize my custom Loading Bar class and add it to the view. You may be saying to yourself, “Hey Broseph, what’s is the point of this Loading Bar, what happens when the page is finished loading?”. Now, I created two simple functions within the class that take the Loading Bar off of the screen and put it on whether the page is loading or is finished loading.

- (void)webViewDidStartLoad:(UIWebView *)webView {

    [lbar showBar];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    [lbar hideBar];

}

Alright that does it for the ViewController.m file for now. Let’s hook up the connections in the Interface Builder and then test it to make sure everything runs so far.

2 – Test and test often, learn to overuse NSLog

This is something I have done since I have started programming, and it has saved me time and time again. With Objective-C, NSLog is your best friend. Usually as I program I will print out a value I am modifying throughout the program every time I change something, just to make sure everything is happening as I want to. Learn to use NSLog more than is necessary; it is a great thing to do out of habit.

Now that we are in the MainStoryboard.storyboard file, let’s connect up webView to the UIWebView. Also, make sure you go from the UIWebView to the View Controller and set it as it’s delegate.

I know these pictures do not show much as to how to connect things in Interface Builder, but I assume you all know what you are doing when it comes to that. Make sure you run the app to make sure everything is connected. You’ll notice that the application loads and the Loading Bar does its thing at the bottom and then hides when the page is done loading. Definitely check out some of the articles on there. Just saying.

Okay now we are at the point of this application that really matters: adding and using Gesture Recognizers.

First thing is first, scroll through your Objects and drag over a Swipe Gesture Recognizer and place it on top of the UIWebView. You will notice the Swipe Gesture shows up in the bottom black bar. Unfortunately, each of these only supports one direction. Add this twice, for two different directions. Now, click on the left Gesture and go to the Attributes Inspector and change the Swipe value to Left.

The second Gesture’s Swipe value is set to Right by default, so we do not need to edit it. Now here comes the cool part. If you Ctrl+Click from the Gesture to the UIWebView you get access to some of the UIWebView’s delegate functions. On the left one, select the goForward function, and the right one, select the goBack function.

Now test and run the application. I wasn’t sure which directions to do the directions, I just did it as if it is like a book. If you wish to change the direction to be opposite, you know how to.

Let’s head over to the ViewController.m and finish implementing the presentMenu function to go with our last Gesture implementation. I wanted to show that there is a way to connect a function call to a Gesture, so in this instance I have it so a UIActionSheet is present once the gesture is done, and from there you can choose to either navigate to my site if you are on Hacking Humanity, or to their site if you are on mine.

- (IBAction)presentMenu:(id)sender {

    NSString *visit;

    if ([webView.request.URL.absoluteString rangeOfString:@"http://www.hackinghumanity.com"].location != NSNotFound) {

        visit = [NSString stringWithFormat:@"Visit Coding & Coffee"];

        CCView = YES;

    } else if ([webView.request.URL.absoluteString rangeOfString:@"http://codingandcoffee.wordpress.com"].location != NSNotFound) {

        visit = [NSString stringWithFormat:@"Visit Hacking Humanity"];

        CCView = NO;

    }

    UIActionSheet *alert = [[UIActionSheet alloc] initWithTitle:@"What would you like to do?"

                                                       delegate:self 

                                              cancelButtonTitle:@"Nevermind" 

                                         destructiveButtonTitle:nil 

                                              otherButtonTitles:visit, nil];

    [alert showInView:self.view];

}

- (void) actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {

    if (buttonIndex == 0) {

        if (CCView) {

            [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://codingandcoffee.wordpress.com"]]];

        } else {

            [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.hackinghumanity.com"]]];

        }

    }

}

I suppose I can do a quick explanation of what is going on here. First when the presentMenu function is called it sees if the URL contains my site or Hacking Humanity’s. The visit string is used for the action sheet to tell you which site you will be navigating to. The bool set is to tell the action sheet which URL to load. When in the UIActionSheet delegate function, it checks to see if the bool is true or not, and load the cooresponding URL.

3 – if (CCView) and if (CCView == TRUE) are the SAME

This isn’t too big of a deal, but helps in the look of the code, I just felt like this was something good to point out. Conversely, if (!CCView) is the same as if (CCView == FALSE).

Now we can implement the final Gesture Recognizer. Navigate over to the MainStoryboard.storyboard file. Look at your Objects, and add the Tap Gesture Recognizer to the UIWebView.

Click on the Tap Gesture Recognizer and head to the Attribute Inspector. Change Touches to 2. This means that the gesture will require a two finger tap to activate. Now, in order to connect this gesture to the presentMenu function, Ctrl+Click and drag from the Tap Gesture Recognizer to the View Controller. You will be present with a menu of functions to select, and you will see presentMenu: at the bottom. Select that.

Congratulations, you’re done! I hope everyone understood all the points in the tutorial, and if not, check the source code below and if that does not help, leave a comment below.

Source Code

P.S. Please check out Hacking Humanity. Even though the site is just starting up, their posts help by giving people like you and me an unbiased opinion on recent technological releases (such as the iPhone 4S and Motorola Droid RAZR). If you wish to know what they strive to do, you can read all about it below.

We are outsiders. We don’t live in Manhattan or Silicon Valley, so the odds of us being influenced by the companies we intend to report on are slim to none. We are just two guys who love technology. We have real world opinions that are practical, yet objective. Most importantly – we can relate to you. We. Love. Innovation.

Our biggest intention with this website is to set us apart from everyone else. We wholeheartedly acknowledge that technology and our everyday lives are beyond inseparable, hence the name, but we want to dive deeper than that. We want to bring you the news that is changing the way we operate on a day-to-day basis, and answer the questions like “ok, great. Now what does this mean for me?”

I hope you guys visit them and give them a chance, as they update much more frequently than I do, and they really have some good points.

Donations are always accepted to the right, and as always happy coding!

  1. Mediafire seem to be having trouble delivering the files for your tutorials.

    May I suggest Github?

    • Which files in particular?

      • all of them .. but, for some reason Mediafire suddenly responded and I simply downloaded all the files that I was missing from this and that last tutorial.

      • mediafire has some hiccups some times, I may migrate over to github if it happens another time, I am swamped at the moment.

  2. First let me say thanks for the tutorials. This might be a dumb question but when I run the app how do I get the action sheet alert to pop up?? I have the gestures working but I’m not sure how to test it on the simulator. I was double clicking but alas I am wrong. Thanks for your help.

    • You have to do it on a device it will not work in the simulator

  3. Thanks for the nice tut :)

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 47 other followers

%d bloggers like this: