Twitter-esque UITabBarController?

Me gustaría hacer una aplicación que use un UITabBarController que sea similar al de la aplicación de Twitter para iPhone y iPod touch. (Luz azul para flecha no leída y deslizante para cambiar entre vistas de contenido).

¿Hay una forma fácil de hacer esto? ¿Cualquier código de código abierto?

Editar:

He agregado una recompensa. Estoy buscando una respuesta que funcione en todos los dispositivos y en iOS 4 e iOS 5.

EDITAR:

He ensuciado mi código original y encontré una solución simple. Agregué la siguiente comprobación, para iOS 5 en mi código de 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] != NSOrdenetworkingAscending){ //On iOS 5, otherwise use old index isUsingVersionFive = YES; } 

Entonces, en lugar de esto:

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

… Yo uso esto:

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

Aun así, mantengo la recompensa, en caso de que tenga la oportunidad de encontrar algo que funcione en las respuestas.

Crearía una subclass del UITabBarController estándar y agregaría un par de sub-vistas para la luz azul y la flecha deslizante. No debería ser muy difícil de lograr.

Editar: aquí hay una idea de algunas de las cosas que deberían ir en su subclass. Ni siquiera sé si este código se comstackrá.

 - (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] } } 

Aquí es cómo se crea la flecha

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

Y sigue la respuesta de Rafael para get la luz azul.

Aunque es una publicación antigua, pensé que me interesaría un proyecto de GitHub que nadie mencionó, han recreado bastante bien la barra de tabs estilo Twitter, aquí está el enlace:

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

El proyecto se encuentra en la subcarpeta denominada "CustomTabBar", se puede encontrar más información aquí:

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

BCTabBarController es lo que basé en mi pestaña de barra de estilo de Twitter personalizada y funciona en iOS 4 y 5: http://pastebin.me/f9a876a6ad785cb0b2b7ad98b1024847

Cada controller de vista de pestaña debe implementar el siguiente método para la image de tabs:

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

(En el delegado de la aplicación) inicializarías el controller de la barra de tabs así:

 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:[[[iPhoneCnetworkingitsViewController alloc] init] autorelease]] autorelease], nil]; 

Opcionalmente , puede usar una image de background personalizada para cada controller de vista de tabs con este método:

 - (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 = @"cnetworkingitsBG.png"; break; default: bgImagefilePath = @"homeBG.png"; break; } return [UIImage imageNamed:bgImagefilePath]; } 

La flecha en la parte superior de la barra de tabs se desliza hacia la pestaña que está seleccionada al igual que la barra de tabs de Twitter.

Algunas capturas de pantalla:

BCTabBarControllerBCTabBarController

Solo 2 días hice una aplicación como esta para POC, resulta que es más fácil de lo que puedes pensar.

Primero en mi applicationdidfinishlaunching: termine el método de ejecución applicationdidfinishlaunching: agregué la vista de image que contiene la image del puntero o flecha con el ancho de 64, el ancho de la pantalla es 320 y tengo 5 tabs en la barra de tabs. también puede calcularlo si cree que su proyecto tendrá tabs dinámicas y, a continuación, simplemente cambie el ancho de la image de manera similar.

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

También es posible que desee configurar el modo de contenido de esa vista de image como uiviewcontentmodecenter
También he configurado el marco de la image con un cálculo como este

 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; 

Y luego en el método delegado del controller de barra de tabs

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

simplemente use un bloque de animation para animar el movimiento del puntero como este

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

PD. Lo siento si algunos deletreos no son correctos.