Animated transition between tabbar’s view on Iphone

6 avril 2009 at 12 h 38 min 7 commentaires

Since last week, I’ve been attending a fantastic training course for Iphone developpement delivered by Geppy Parziale from Invasive Code.
I meet great people there, but training is now finished, and I’m on my own to develop some fresh apps!

I’ve been playing around with the Iphone SDK for the last few days. If you like « transitions » perhaps you tried to add an animation to the tab bar view. Nice transitions provide the tabbar’s item a fluent navigation. WARNING : Although i found nothing explicitely dismissing tabbar animation, it seems Apple discouraged programmers to animate tabbars view switching. Please leave a comment if you found information from Apple on this subject!

Anyway, it’s a good exercise to implement view transition to a TabBar controller. This article requires you to know how to implement the ViewController paradigm. I will not cover basic subjects like creating project, interface building, or any other ViewController related questions. If you don’t know about this, I would suggest you to attend to training courses or read some Cocoa Touch tutorials, books, and materials to be familiar with project designing.

I. Prepare your view and controller

If you are familiar with Iphone and Cocoa developpement, you probably noticed how Apple is using the delegation pattern. The project we are going to build here will follow this delegation chain:

Main application –> TabBarAppDelegate –> ViewSwitcher TabbarDelegate

To implement that, the TabBarDelegate is using the UIApplicationDelegate. The ViewSwitcherTabbarDelegate use the UITabBarController Delegate.

Create 2 or 3 viewController class, design their interface, and link them to the UITabbar’s items. Declare your UITabBarController and name it tabBarController in your application delegate .h file. When ready, just open the implementation of your TabBarAppDelegate and modify the applicationDidFinishLaunching: method as this:

-(void)applicationDidFinishLaunching:(UIApplication *)app {

tabBarController.delegate = [[ViewSwitcherTabbarDelegate alloc]init];

[window addSubview:[tabBarController view]]:

[window makeKeyAndVisible]:

}

Don’t forget to release the ViewSwitcherTabbarDelegate and the tabBarController in your dealloc method of the application Delegate.
Let’s talk about what we have done:
The first line of code declares we are using another class to enhance our tabBarController behaviour.
The second line is defining the first view which is appearing when bringing our tabBarController to the screen.
The third line make our window active on the screen.

II. create your animation

Jump to the ViewSwitcherTabbarDelegate implementation file. You need to implements 2 methods to get your delegate working:

These function are
– tabBarController:didEndCustomizingViewControllers:changed:
– tabBarController:didSelectViewController:

The method we are looking for is tabBarController:didSelectViewController:, because this method will be fired when the tabBarController is switching between his views.

Here is an example of the implementation of this method to animate the transition :

-(void)tabBarController:(UITabBarController *)tabBarController
didSelectViewController:(UIViewController)viewController{
// prepare your transition
CATransition *transition;
transition = [CATransition animation];
transition.type = yourtypeoftransition
transition.duration = yourduration

// prepare your view switching
[[[ViewController view]layer]addAnimation:transition forKey:nil];
}

When building and runnig, you should now see the transition between the view, using your animation parameters. Enjoy !

Entry filed under: english publications, iphone programming. Tags: , .

Validation xhtml strict : textes rayés et _target… Iphone simulator’s mess : get your AVFoundation audio and video working !

7 commentaires Add your own

  • 1. Paul  |  8 avril 2009 à 15 h 05 min

    I followed your instructions but I am getting erros. I installed the QuartzCore.framework but it’s still not working. I’m getting:
    « .objc_class_name_CATransition », referenced from:
    literal-pointer@__OBJC@__cls_refs@CATransition in BlackJack_Odds_CalcAppDelegate.o
    ld: symbol(s) not found
    collect2: ld returned 1 exit status

    Any idea’s on what this could be and how to fix it? I have been searching for a way to animate tabbar view switching and it does seem like Apple doesn’t want developers doing that for some weird reason. Any help would be great.

    Thanks!

    Répondre
    • 2. haveacafe  |  8 avril 2009 à 15 h 28 min

      Anyway, the animation was possible with 2.2.1 iphone SDK version.

      It seems the error you are facing is not due to the tabbarcontroller transition itself, but rather to your quartzcore animation project configuration.

      Three way you should investigate :

      Does your transition works for a simple view switching ?
      Have you imported « QuartzCore/CAAnimation.h » to your tabbarDelegate implementation class ?
      And verify you have implemeted all the required methods for the tabbardelegate protocol.

      Keep on coding… And let us know what was wrong!

      Répondre
  • 3. Paul  |  8 avril 2009 à 22 h 06 min

    I tried importing imported “QuartzCore/CAAnimation.h” and imported “QuartzCore/CAAnimation.h” bot niether worked.

    I started the project as an Tab Bar Application and the tab switching views works without any of the animation code.

    I’m not sure what to try at this point. Any more suggestions? Can you post a sample project with your code working and maybe I can see if there is any I missed?

    Répondre
    • 4. haveacafe  |  10 avril 2009 à 7 h 34 min

      Ok, let’s try to isolate your problem.

      First :
      Verify your delegation is correctly implemented, i think, try some NSLog command in your « ViewSwitcherTabbarDelegate » Class, in the method « didSelectViewController ».

      Second :
      There is no reason for the Animation not to work within the – tabBarController:didSelectViewController: method if you manage to get transition working independantly. Have you success in tring a animated simple view transition between two views (without any TabbarController neither NavigationController, but just with a simple ViewController). To switch views in a viewController, use a button and the « pushViewController:animated » method of the UIViewController.

      Répondre
  • 5. Medlay  |  16 avril 2009 à 13 h 39 min

    2Paul: you must add QuartzCore framework in your project.

    Répondre
  • 6. Medlay  |  16 avril 2009 à 14 h 12 min

    This method does not do transition between views. It only moves view in the selected controller.

    Répondre
  • 7. sztuczne kwiaty  |  21 mars 2013 à 0 h 32 min

    I’m really loving the theme/design of your blog. Do you ever run into any web browser compatibility problems? A number of my blog readers have complained about my website not operating correctly in Explorer but looks great in Firefox. Do you have any advice to help fix this problem?

    Répondre

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Articles récents


%d blogueurs aiment cette page :