Question

What is the view used to create the Template Chooser view in the iWork apps on iPad?

How can I create a view like that on iPad, and what would be a best way to implement it on iPhone considering screen size constraints.

Answer 1

There isn’t any built-in view that will provide that functionality. Which means there will be quite some work to duplicate that functionality.

What you can try is:

1) Create a new UIViewController with a nib.

2) Add the top bar and an UIScrollView with opaque = NO and alpha = 0.

3) If you have a fixed number of “templates” they can be added directly in the nib. You should be able to use UIImageView

4) Otherwise you can add the “templates” dynamically in e.g. viewDidLoad. The only part which can be a little bit tricky is calculating the frame. The following pseudo code should get you started.

int MARGIN = 20;
float templateWidth = self.scrollView.bounds.size.width / 3;
float templateHeight = 300;

for (int i = 0; i < [templates count]; i++) {
  int row = i / 3;
  int col = i % 3;

  float x = MARGIN + col * templateWidth;
  float y = MARGIN + row * templateHeight;
  CGRect templateFrame = CGRectMake(x, y, width - 2 * MARGIN, height - 2 * MARGIN);

  // initialize `UIImageView` or similar

  templateView.frame = templateFrame;
  [self.scrollView addSubView:templateView];
}

self.scrollView.contentSize = CGSizeMake(self.scrollView.bounds.width, /* max bottom of templates */);
} 

After you have got the layout perfected the rest should be quite straightforward since you only need to respond to taps on your template images. Take a look at UITapGestureRecognizer for one way of doing that.

Regarding the iPhone. I would probably do it in the way you select a document in the iWorks apps. Only one template is displayed on screen at the time and you swipe left/right to choose. But it all depends on the context. Perhaps a table view is better suited for the iPhone.

Good luck!