Question

I’m developing an iPad app that allows a user to select “widgets” to appear on the screen. The screen is divided into two columns, widgets will be placed in either the left or right column. Each widget is a view controller with a static fixed width but a varying height depending the content of the widget. I am looking for a way to place the widgets on the screen so they are placed at the next logical location automatically – something similar to what a layout manager in Java would do.

I created the method addWidget which keeps track of the height of all the widgets in each column. Widgets are then added to the column with the smallest height. This works, but I am looking for perhaps a more elegant way of doing this, or ideas on improving the current solution.

- (void) addWidget:(UIViewController *)controller {

    if(leftHeight <= rightHeight) {
        controller.view.frame = CGRectMake(20.0, leftHeight, controller.view.bounds.size.width, controller.view.bounds.size.height);
        leftHeight = leftHeight + controller.view.bounds.size.height + 20;
    }

    else {
        controller.view.frame = CGRectMake(self.view.bounds.size.width-controller.view.bounds.size.width-20, rightHeight, controller.view.bounds.size.width, controller.view.bounds.size.height);
        rightHeight = rightHeight + controller.view.bounds.size.height + 20;
    }

    [scrollView addSubview:controller.view];
}

Thanks

Answer 1

If you are after a “Springboard”-like view for your widgets, I suggest looking into the Three20 framework.

It offers a [TTLauncherView][2] class that implements exactly what you are looking for, including paging, reordering of icons, and shaking effect when deleting — just like the real Springboard. It is very easy to use once you have learned a bit about Three20.

By the way, it is the one that the official Facebook app uses…

In case you do not want to use Three20 you could simply have a look at the implementation to make up your mind.