How to use Open Flow to create a menu.

Open flow gives your app a cover flow like effect and we will use this to create a menu. You will need a current iPhone app with at least one view with a .xib file. I will be using the code from Beginning iPhone dev adding a web view.

The wordpress icon is not mine I got it from factoryjoe.com

Start by downloading open flow.

Just click the download button. Then a popup like the following will show.

Now click the Download.tar.gz button. Once you have downloaded it open it.

Click and drag the OpenFlow into your project.

Make sure copy items into destination group’s folder(if needed) is checked. Then click add.
Now that we have openflow we need to add a view controller. So ctrl click on the Classes folder and add a new item.

I named my controller OpenFlowViewController.m, it will be the easiest for you if you name yours the same. Make sure that Also create a “OpenFlowViewController.h” is checked. Now click the finish button.

Now change the OpenFlowViewController.h to the following.

#import "AFOpenFlowView.h"

@interface OpenFlowViewController : UIViewController {
        IBOutlet AFOpenFlowView *myOpenFlowView;
        UINavigationController *navigationController;
}

@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

@end

So in this code we are creating a pointer to an AFOpenFlowView and a UINavigationController. Now you will need two images for the next part so go google icons and find some you like. Once you have found your icons change OpenFlowViewController.m to the following adding in the name of your images where specified.

#import "OpenFlowViewController.h"

@implementation OpenFlowViewController

@synthesize navigationController;
- (void)viewDidLoad {
        [myOpenFlowView setNumberOfImages:2];

        UIImage *image1 = [UIImage imageNamed:@"PutTheNameOfYourImageHere"];
        [myOpenFlowView setImage:image1 forIndex:0];
        UIImage *image2 = [UIImage imageNamed:@"PutTheNameOfYourImageHere"];
        [myOpenFlowView setImage:image2 forIndex:1];
        //myOpenFlowView.navigationController= navigationController;

    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

- (void)viewDidUnload {
    [super viewDidUnload];
}
- (void)dealloc {
    [super dealloc];
}
@end

The code in viewDidLoad will add the images to the AFOpenFlowView. There is also a commented out line of code we will get to that in a minute. Now we need to change the OpenFlowViewController.xib so double click on it.

Click on the UIView.

Change the UIView Class to AFOpenFlowView.

Now click on File’s Owner.

Click on the circle next to view and drag your cursor to the Open Flow View. Do the same for myOpenFlowView. Then save.
Now we need to change the MainWindow.xib so that we can see our view. Double click on the MainWindow.xib and it will bring up the Interface Builder.

Drag a UINavigationController, from the Library, above all the other controllers under the UITabBarController. Then click on the UIViewController that is under the UINavigationController.


Now change the Class to OpenFlowViewController.

Then attach the navagation bar to the UINavigationBar Save the .xib file and go back to Xcode.
We need to add in a few Frameworks.

Find the Frameworks tab in Xcode.

Ctrl click and add Existing Frameworks.

Find CFNetwork.framework and added it.

Then do the same thing but add QuartzeCore.framework instead.

Now run the project. You can slide the images across the screen but we can’t click them yet. Go back to OpenFlowViewController.m and uncomment out.

myOpenFlowView.navigationController= navigationController;

This line sets the navigationController of our OpenFlowViewController to the navigationController of myOpenFlowView which if you remember is a pointer to AFOpenFlowView. Currently AFOpenFlowView does not have a navigationController. So lets go add that. In AFOpenFlowView.h add the following line right in side the {} of the AFOpenFlowView interface.

UINavigationController *navigationController;

Then after the end } add in this line

@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

Ok now in AFOpenFlowView.m you are going have to find the implementation of AFOpenFlowView it is about the 1/3 down the page.

@implementation AFOpenFlowView
@synthesize dataSource, viewDelegate, numberOfImages, defaultImage;
// Add the following line to you code
@synthesize navigationController;

The last thing we need to do is make touchesEnded look like the following.

if (isSingleTap) {
// Which cover did the user tap?
CGPoint targetPoint = [[touches anyObject] locationInView:self];
CALayer *targetLayer = (CALayer *)[scrollView.layer hitTest:targetPoint];
AFItemView *targetCover = [self findCoverOnscreen:targetLayer];
if (targetCover && (targetCover.number != selectedCoverView.number))
        [self setSelectedCover:targetCover.number];
        else {
                if (selectedCoverView.number==0) {
                        FirstViewController *TempController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];//  [[UIViewController alloc] init];
                        [navigationController pushViewController:TempController animated:YES];
                        [TempController release];
                }
                else{
                        FirstViewController *TempController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];//  [[UIViewController alloc] init];
                        [navigationController pushViewController:TempController animated:YES];
                        [TempController release];
                }
        }
}
[self centerOnSelectedCover:YES];
        // And send the delegate the newly selected cover message.
if (beginningCover != selectedCoverView.number)
        if ([self.viewDelegate respondsToSelector:@selector(openFlowView:selectionDidChange:)])
                [self.viewDelegate openFlowView:self selectionDidChange:selectedCoverView.number];

If the user just clicks on the screen then the menu will navigate to a different page. There are two important lines you will need to know.

if (selectedCoverView.number==0)

The line above in english says if the first image in the array is the selected image then do the following.
At the top of AFOpenFlowView.m add. Remember that arrays always start will 0. If you want to refer to the second image then you need to change the 0 to a 1.

FirstViewController *TempController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];
                                [navigationController pushViewController:TempController animated:YES];
                                [TempController release];

FirstViewController is the name of the controller that I want to navigate to. TempController is a pointer of type FirstViewController. FirstView is the name of the .xib file I want to navigate to. For this code you will need a xib file. Then we use the navigationController to navigate to the FirstViewController we created.

#import "FirstViewController.h"

Now run the code and you should see a working menu.
Download the code for How to use OpenFlow to create a menu.
If you have any trouble feel free to comment and I will be happy to help.

This entry was posted in Regular iPhone Apps. Bookmark the permalink.

2 Responses to How to use Open Flow to create a menu.

  1. Jason says:

    Hi Britney, thank you for your guide. It helps break down the coverflow code a little better than the documentation.

    I am an amateur iphone programmer and I’m having a difficult time trying to integrate the coverflow menu into my app. Essentially, I’m already using a navigation controller to load my root view, and I use that navigation controller (stored in MainWindow.xib) to navigate between different view controllers.

    I tried using most of your guide to use images as a menu to navigate to new view controllers, but I feel like I missing one or two small steps. I’m not using a tab bar controller so my app is slightly different. Do you have any suggestions or example apps where just a navigation controller is used. When I click on the images nothing happens. I double and triple checked my code.

    Thanks again, I appreciate your help,
    Jason

    • admin says:

      Sorry for the late reply since you already have a navigation controller you shouldn’t need to create one just for this self.navigationController instead of just navaigationController.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>