DTCards – Universalizing an iPhone App

Ever since the iPad came out I’ve been giving the occasional thought as to how I could universalize my existing iPhone apps. Generally the problem is that you have view controllers that work well on the resolution of the iPhone, but if you simply display them full screen on iPad they look weird.

So I’ve started to work on a view controller that would allow me to reuse my iPhone view controllers by displaying them not in full screen but as distinct cards. The idea is that you would use the same DTCardsViewController as root in your app and then depending on which device it runs on will either show the cards filling the iPhone screen or by laying them out to better fill the iPad screen.

In this article I want to give you a brief demo of where my R&D stands so far.

For the first phase I decided to keep things simple and just have a method to push a card – in the form of a view controller – onto the scrolling table. Optionally each card can have a second view controller to control the backside. Cards would flip to reveal their backside.

On iPad the cards get a black border and rounded corners, via this method:

@implementation UIView (Cards)
 
- (void)addRoundedCornersToCardWithRadius:(CGFloat)radius
{
	CALayer *layer = self.layer;
	layer.borderColor = [UIColor blackColor].CGColor;
	layer.borderWidth = 1.0;
	layer.cornerRadius = radius;
	layer.masksToBounds = YES;
	self.clipsToBounds = YES;
}
 
@end

The cards view controller knows how to keep track of which card is centermost and if you rotate the iPad it will center on this card. If the user pinches open on a card, then this the view controller will move to closeup mode sliding out the neighboring cards. Here you could enhance the interface by enlarging image views or adding additional details for which there was no space on the 1:1 view. Pinch-Close goes back to the stream of cards.

Have a look at this YouTube video where I demonstrate the working technology so far. Sorry if there’s no audio, that’s entirely YouTube’s fault.

I don’t quite know what the best user interactions would be, so if you have some ideas please share them in the comments. Do you know any scenario that would benefit from such a dual universal view controller?

Categories: Parts