Question

I’m studying Three20 now and want to implement facebook iphone client myself as a practice.
In the main screen of facebook iphone client, there are several items below search bar.I think it is a combination of scroll view and pagecontrol. when you click a long time on certain item, it will look like what you do the same on the app icon of your iphone:you can drag the item to the new position and even delete your added items.
So my questions are:

1. What kind of control of the items is,custom TTButton? and how can implement the animation,especially the dragging?
2. when you click one item, one new view comes in.how to implement the animation like shade?

thanks!

Answer 1

The Three20 class that implements the main screen you are talking about is TTLauncherView.

1. It includes TTLauncherButtons as its internal elements, that derives directly from UIControl (as UIButton also does). If you want to implement yourself (not simply use) the dragging animation, you should study the source code available in src/Three20UI/Sources/TTLauncherView.m, which is quite complex to explain here since many method are involved. I would suggest starting with buttonTouchedDown:withEvent and startDraggingButton: and follow the flow from there. If you interested in the editing mode animation, check the wobble selector.

2. As to the animation when you select a button, this is nothing specific to Three20. You can study how they do this in src/Three20UINavigator/Sources/TTBaseNavigationController.m, searching for pushViewController:animatedWithTransition;

This is the code, for your reference:

- (void)pushViewController: (UIViewController*)controller
    animatedWithTransition: (UIViewAnimationTransition)transition {
  [self pushViewController:controller animated:NO];

  [UIView beginAnimations:nil context:nil];
  [UIView setAnimationDuration:TT_FLIP_TRANSITION_DURATION];
  [UIView setAnimationDelegate:self];
  [UIView setAnimationDidStopSelector:@selector(pushAnimationDidStop)];
  [UIView setAnimationTransition:transition forView:self.view cache:YES];
  [UIView commitAnimations];
} 

the final block is the one responsible for the animation effect.