All the app in iphone appear in a "grid icon" layout, how can I achieve that layout?

Question

when u first open up iphone, all the app are layout in a "grid icon" type. And if u have too many app, the user swipe to the right, and the new view come out, with again all the app appear in a "grid icon" layout. Can u guys point me to where I can achieve such a design. Code would be very appreciated !!! I did try something and here is what I got so far.
In my delegate.h class I have

UITabBarController *tabBarController;
View1 *view1; //Inherit from UIViewController
View2 *view2; //Inherit from UIViewController

In my delegate.m class I have

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    tabBarController = [[UITabBarController alloc] init]; //Create a tab bar
    view1 = [[View1 alloc] init]; //Create the first view
    UINavigationController *navigationController1 = [[UINavigationController alloc] initWithRootViewController:view1];

    view2 = [[View2 alloc] init]; //create the second view
    UINavigationController *navigationController2 = [[UINavigationController alloc] initWithRootViewController:view2];

    tabBarController.viewControllers = [NSArray arrayWithObjects:navigationController1, navigationController2, nil];

    [window addSubview:tabBarController.view];
    [window makeKeyAndVisible];
 }

So now I have two tab that load view1 and view2, they both implement UINavigationController, meaning that if I create another view3, when I pushViewController, I can create the animated effect like the iPhone. Then in view3.m when I try to go back, I can popViewController. However what I cant achieve is, let see that each view I will have 4 icon, so when I query back from the db, I know I have to display 12 icon, meaning 3 views. But I only know what information at runtime :( . As it is right, I do actually have view1, view2 and view3 as view1.m, view2.m and view3.m. If the number of icon go above 12, meaning I need another view then I am screw. Help please

Answer 1

I would take a look at Three20, an open-source framework that serves as the backbone for the Facebook app, and many others. In it, they have a class called the TTLauncherView the is EXACTLY like the current (as of this writing) Facebook launcher. It is very close to the functionality you get with the iPhone home screen, complete with page swipes, reordering, wobbling and deletion.

Answer 2

@Julien's not exactly right. What you're talking about are views that are added to a UIScrollView.

Here's an example of a scroll view

Search here for UIScrollView or check out Apple's examples (see link above).

Once you have the UIScrollView implemented, you add UIButtons or UIViews to the scrollView laid out in Grid format. Here's an example gridView project. There are others do a search here or Google to find them (e.g. iPhone GridView or iPhone Open Source GridView)

Answer 3

Lots of the solution here seems to be overkilled. Here is how I do it. Create a UIViewControllerTemplate, that contain 4 (or more) customize buttons on it. So every time you create a new view, you will have a layout that will look like 'grid'

-(void) initButtons{
    //button size 100 X 100
    int shiftx = -5;
    int shifty = 15;
    (self.button1).frame  = CGRectMake(40-shiftx, 50-shifty, 100, 100);
    (self.button2).frame  = CGRectMake(180-shiftx, 50-shifty, 100, 100);
    (self.button3).frame  = CGRectMake(40-shiftx, 250-shifty, 100, 100);
    (self.button4).frame  = CGRectMake(180-shiftx, 250-shifty, 100, 100);
}

-(void) viewDidLoad{
    [self initButtons];
    [self.view addSubView:self.button1];
    [self.view addSubView:self.button2];
    [self.view addSubView:self.button3];
    [self.view addSubView:self.button4];
    [super viewDidLoad];
}

Answer 4

Just to dust this topic off a bit, Apple now has a UICollectionViewController to achieve the grid effect. I would implement it by placing it into horizontal UISCrollView attached to a UIPageViewController.