Twitter-esque UITabBarController?

Question

Je voudrais faire une application qui utilise un UITabBarController qui est similaire à celui de l'application Twitter pour iPhone et iPod touch. (Lumière bleue pour les flèches non lues et coulissantes pour basculer entre les vues de contenu).

Y at-il un moyen facile de faire cela? Tout code source ouvert?

Edit:

J'ai ajouté une prime. Je cherche une réponse qui fonctionne sur tous les appareils et sur iOS 4 et iOS 5.

EDIT:

J'ai foiré avec mon code d'origine et j'ai trouvé une solution simple. J'ai ajouté le chèque suivant, pour iOS 5 dans mon code d'animation:

// iOS 5 changes the subview hierarchy 
// so we need to check for it here 

BOOL isUsingVersionFive = NO; 
NSString *reqSysVer = @"5.0"; 
NSString *currSysVer = [[UIDevice currentDevice] systemVersion]; 
if ([currSysVer compare:reqSysVer options:NSNumericSearch] != NSOrderedAscending){ 
    //On iOS 5, otherwise use old index 
    isUsingVersionFive = YES; 
} 

Puis, au lieu de ceci:

CGFloat tabMiddle = CGRectGetMidX([[[[self tabBar] subviews] objectAtIndex:index] frame]); 

... J'utilise ceci:

CGFloat tabMiddle = CGRectGetMidX([[[[self tabBar] subviews] objectAtIndex:index + (isUsingVersionFive ? 1 : 0)] frame]); 

Tenant toujours la bonté cependant, au cas où j'aurais une chance de trouver quelque chose qui fonctionne dans les réponses.

Answer 1

Je créerais une sous-classe de l'UITabBarController standard et ajouterais deux sous-vues pour la lumière bleue et la flèche coulissante. Ne devrait pas être trop difficile à accomplir.

Editer: Voici une idée de ce qui devrait être inclus dans votre sous-classe. Je ne sais même pas si ce code va compiler.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { 
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) { 
     super.delegate = self; 
    } 
    return self; 
} 

- (void)viewDidLoad { 
    [super viewDidLoad]; 

    //Create blueLight 
    UIImage* img = [UIImage imageNamed:@"blue_light.png"] 
    self.blueLight = [[UIImageView alloc] initWithImage:img]; 
    self.blueLight.center = CGPointMake(320, 460); //I'm using arbitrary numbers here, position it correctly 
    [self.view addSubview:self.blueLight]; 
    [self.blueLight release]; 

    //Create arrow, similar code. 
} 

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{ 
    //Put code here that moves (animates?) the blue light and the arrow 


    //Tell your delegate, what just happened. 
    if([myDelegate respondsToSelector:@selector(tabBarController:didSelectViewController:)]){ 
     [myDelegate tabBarController:self didSelectViewController:viewController] 
    } 
} 

Answer 2

Voici comment créer la flèche

http://isagoksu.com/2009/development/iphone/fancy-uitabbar-like-tweetie/

Et suivez la réponse de Rafael pour obtenir la lumière bleue.

Answer 3

Bien qu'un poste de vieillissement, je pensais que j'intervenir avec un projet GitHub que personne ne dit, ils ont recréé la barre d'onglets de style Twitter assez bien, voici le lien:

https://github.com/boctor/idev-recipes/tree/master/CustomTabBar

Le projet est dans le sous-dossier nommé « CustomTabBar », plus d'informations sont disponibles ici:

http://idevrecipes.com/2011/01/04/how-does-the-twitter-iphone-app-implement-a-custom-tab-bar/

Answer 4

BCTabBarController est ce que je basé mon style twitter personnalisé ta b-bar et il fonctionne dans iOS 4 et 5: http://pastebin.me/f9a876a6ad785cb0b2b7ad98b1024847

Chaque contrôleur de vue onglet doit mettre en œuvre la méthode suivante pour l'image onglets:

- (NSString *)iconImageName { 
    return @"homeTabIconImage.png"; 
} 

(Dans le délégué App) vous initialiser onglet contrôleur de barre comme ceci:

self.tabBarController = [[[JHTabBarController alloc] init] autorelease]; 
self.tabBarController.delegate = self; 
self.tabBarController.viewControllers = [NSArray arrayWithObjects: 
             [[[UINavigationController alloc] initWithRootViewController:[[[iPhoneHomeViewController alloc] init] autorelease]] autorelease], 
             [[[UINavigationController alloc] initWithRootViewController:[[[iPhoneAboutUsViewController alloc] init] autorelease]] autorelease], 
             [[[UINavigationController alloc] initWithRootViewController:[[[iPhoneContactInfoViewController alloc] init] autorelease]] autorelease], 
             [[[UINavigationController alloc] initWithRootViewController:[[[iPhoneMapUsViewController alloc] init] autorelease]] autorelease], 
             [[[UINavigationController alloc] initWithRootViewController:[[[iPhoneCreditsViewController alloc] init] autorelease]] autorelease], 
              nil]; 

en option, vous pouvez utiliser une image d'arrière-plan personnalisé pour chaque onglets voir contrôleur avec cette méthode:

- (UIImage *)tabBarController:(JHTabBarController *)tabBarController backgroundImageForTabAtIndex:(NSInteger)index { 
    NSString *bgImagefilePath; 
    switch (index) { 
     case 0: 
      bgImagefilePath = @"homeBG.png"; 
      break; 
     case 1: 
      bgImagefilePath = @"aboutBG.png"; 
      break; 
     case 2: 
      bgImagefilePath = @"contactBG.png"; 
      break; 
     case 3: 
      bgImagefilePath = @"mapBG.png"; 
      break; 
     case 4: 
      bgImagefilePath = @"creditsBG.png"; 
      break; 
     default: 
      bgImagefilePath = @"homeBG.png"; 
      break; 
    } 
    return [UIImage imageNamed:bgImagefilePath]; 
} 

La flèche en haut de la barre d'onglets glisse vers l'onglet sélectionné comme la barre d'onglets de Twitter.

Quelques captures d'écran:

Answer 5

Juste deux jours je fait une application comme celle-ci pour POC, il se avère qu'il est plus facile que vous pouvez penser. Tout d'abord dans ma méthode applicationdidfinishlaunching: J'ai ajouté l'imageview contenant l'image du pointeur ou de la flèche avec la largeur 64 comme la largeur de l'écran est 320 et j'ai 5 onglets dans la barre d'onglets. Vous pouvez également le calculer si vous pensez que votre projet aura des onglets dynamiques, puis modifiez simplement la largeur de l'image en conséquence quelque chose comme ça.

CGRect rect = tabBarpointerImageView.frame; 
rect.size.width = sel.window.frame.size.width/tabbarcontroller.viewControllers.count; 
tabBarpointerImageView.frame = rect; 

Vous pouvez également définir le mode de contenu de ce point de vue d'image uiviewcontentmodecenter
Aussi j'ai mis le cadre de la imageview par un calcul comme celui-ci

CGRect rect = CGRectZero; 
rect.size.width = self.window.frame.size.width/tabbarcontroller.viewControllers.count; 
rect.size.height = 10;// as image was of 10 pixel height. 
rect.origin.y = self.window.frame.size.height - 49;// as the height of tab bar is 49 
tabBarpointerImageView.frame = rect; 

Et puis dans le délégué procédé de commande de la barre d'onglet

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController 

il suffit d'utiliser un bloc d'animation pour animer le mouvement du pointeur de ce type

[uiview beginanimation:nil context:nil]; 
CGRect rect = tabBarpointerImageView.frame; 
rect.origin.x = rect.size.width * tabbarcontroller.selectedIndex; 
tabBarpointerImageView.frame = rect; 
[uiview commitanimations]; 

PS. Désolé si certaines orthographes ne sont pas correctes.