OS X Dock in an Iphone app?

Question

I've thought that a great addition to an iphone app would be the ability to have the OS X Dock implemented in the iphone. My idea is to have like 5 regular menu that can be chosen in my app and when you swipe your finger across the menu the individual icons would magnify and when you chose an option the icon would bounce while you waited.

I personally would love this in my apps, but I'm wondering if it could be done. Be it be too cpu intensive? Any idea if this could be done in Core Graphics or would you need OpenGL ES?

Thanks to all that respond.

Answer 1

I would probably use OpenGL for that kind of graphic processing. Texture mapping/scaling is done very efficiently in OpenGL.

That said, the problem with your idea is that this is going to be "an app to open other apps".

Answer 2

The Core Animation framework should work fine for the sorts of animations you're discussing (bouncing, scaling). I think it'll be a lot easier than OpenGL.

Here is a code snippet which should animate moving an icon to the y coordinate 148 over a 0.2 second duration:

[UIView beginAnimations: @"iconBounce" context: NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(iconBounceAnimationDidStop:finished:context:)];

CGRect iconPosition = iconImageView.frame;
iconPosition.origin.y = 148; //bounce up
iconImageView.frame = iconPosition;

[UIView setAnimationDuration: 0.2];
[UIView commitAnimations];

The selector iconBounceAnimationDidStop:finished:context: represents a method which will be called when the animation completes. You can write that method so that it will move the icon back down to a starting position to complete the bounce.

Answer 3

It's entirely doable with Core Animation, but you're going to get into a user interaction issue. On the Mac, there's a distinction between mouse drag and a click. But on the iPhone we only have the finger and we're used to direct interaction, meaning we tap up and down and it's selected. In this other mode, you're saying tap-drag-lift (to enlarge icon) may do something different than tap-lift (select). Also, when you drag your finger across the icon strip, the current (enlarged) icon is always the one directly under your finger and not visible, so you'll have to adjust for that.

Even though it's doable, you may want to think through the user experience. Even though it sounds sort of cool, my guess is that it'll take a lot of tweaking to get it to look and feel just right in a mouseless direct-interaction environment. I'd be surprised if Apple didn't already try it out and decide against it.

Answer 4

5 is the exact number of icons that fit perfectly into a UITabBarController, providing an easy way to switch between views that conforms to the Apple iPhone Human Interface Guidelines, and will be very familiar to iPhone users.

Here's a video showing how to create an App with a UITabBarController:

http://www.screentoaster.com/watch/stVUpUQEVLQVteRl1eXFxf/iphonedev_101_uitabbarcontroller

If you still feel you really need to have something that looks like the OS X Dock, I'd recommend using Core Animation.

Create a custom view, and in the init code, add a CALayer for each dock icon. Implement the touchesMoved event to detect finger position, and modify the bounds and position properties for your icon layers to move/resize them. You'll have to fine tune your algorithm for adjusting icon sizes and the animation mode you use to try and match the behavior in OS X, but I believe it's just a linear distortion based on the distance from the cursor (or finger in this case).

Implement code to reset the icons to their default position, and launch whatever action you want for your icons in touchesEnded.

To bounce the icons, you could try animating the position using a CABasicAnimation with the kCAMediaTimingFunctionEaseInEaseOut timing function, and repeating and autoreverse enabled.

Answer 5

Look this sample animation for iPhone. Think it does what you're finding. Note, it's just a sample, it's quite hard to apply this approach to real apps, but quite learning sample.