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.comStart 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.

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.

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.

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.

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 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.

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

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.

Hi admin do you need unlimited articles for your site ?
What if you could copy content from other sites, make it
unique and publish on your website – i know the
right tool for you, just search in google:
kisamtai’s article tool