类似Twitter的UITabBarController？

Question

我想创建一个使用UITabBarController的应用程序，类似于Twitter iPhone和iPod touch应用程序中的选项卡（未读消息蓝光标记，滑动箭头可在内容视图之间切换）。

有没有简单的方法可以做到这一点？有任何开源代码吗？

编辑：

我已添加赏金。我正在寻找适用于iOS 4和iOS 5设备的解决方案。

编辑：

我已修改了我的原始代码，并在我的动画代码中添加了以下检查，以适用于iOS 5:

//  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;
}

然后，不再使用以下代码：

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

我使用这个：

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

尽管如此，我仍然坚持悬赏，以便在答案中找到有效的解决方法。

- Moshe

Answer 1

我会创建一个标准UITabBarController的子类，并添加一些子视图来显示蓝色光和滑动箭头。这应该不难实现。

编辑：以下是你的子类中应该包含的一些内容的想法。我甚至不知道这段代码是否编译通过。

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

- Rafael Vega

---

好的，我会去查看。如果有任何进一步的信息，感激不尽。 - Moshe

很棒的示例代码，但是你如何改变选项卡的形状呢？在 Twitter 应用中，顶部是圆形的，底部是方形的。 - Conceited Code

你可能想要用 [UIView beginAnimation] 和 [UIView commitAnimations] 来包装它，以便让它滑动。 - slf

我已将此作为起点 - 请查看我对问题的编辑以获取iOS5更新。 - Moshe

Answer 2

这里是如何创建箭头的方法：

请访问以下链接：http://isagoksu.com/2009/development/iphone/fancy-uitabbar-like-tweetie/，并按照 Rafael 的回答获取蓝色光。

- Conceited Code

---

链接很好，但加载时间太长。 - Moshe

Answer 3

BCTabBarController是我基于的自定义Twitter风格选项卡栏，它适用于iOS 4和5： http://pastebin.me/f9a876a6ad785cb0b2b7ad98b1024847

每个选项卡视图控制器都应该实现以下方法来设置选项卡图像：

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

（在应用程序委托中）您可以这样初始化选项卡控制器：

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];

可选地，您可以使用此方法为每个选项卡视图控制器设置自定义背景图像：

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

标签栏顶部的箭头会滑动到所选的标签，就像 Twitter 的标签栏一样。

一些截图：

- chown

---

这看起来像是我需要为每个选项卡添加代码... 这不是我想要做的事情。你可以通过询问视图控制器其选项卡栏图像来简化它，对吧？ - Moshe

@Moshe 这就是我在开头链接的 BCTabBarController 版本的工作方式。视图控制器使用 iconImageName 方法确定每个选项卡的图像。您可以选择将该方法((UIImage *)tabBarController:(JHTabBarController *)tabBarController backgroundImageForTabAtIndex:(NSInteger)index)放在应用程序委托中，以告诉选项卡控制器在哪个选项卡上使用什么图像作为背景图像。 - chown

@Moshe 如果您使用此代码（无论谁获得赏金），我可以帮助您实现它。如果您需要更详细的答案，请开始聊天。 - chown

感谢您的友好提议。目前我有一个可以在两个平台上运行的工作实现，正如我第二次编辑时所述。我打算让赏金自然结束，然后添加我自己的完整工作代码示例。 - Moshe

实际上联系了这个控件的开发者，但最终没有使用它，因为它没有实现hidesBottomBarWhenPushed。 - barfoon

Answer 4

虽然这是一个老旧的帖子，但我认为我可以插入一个GitHub项目，没有人提到过，他们很好地重新创建了Twitter风格的选项卡栏，这是链接：

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

该项目位于名为“CustomTabBar”的子文件夹中，更多信息可以在此处找到：

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

- Daniel

Answer 5

今天我为POC制作了一个类似这个的应用程序，结果发现它比你想象的要容易。

首先，在我的applicationdidfinishlaunching:方法中，我添加了一个imageview，它持有指针或箭头的图像，宽度为64，因为屏幕宽度为320，而且我在选项卡栏中有5个选项卡。如果您认为您的项目将具有动态选项卡，则可以进行计算，然后相应地更改imageview的宽度，就像这样。

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

你可能还想将该图像视图的内容模式设置为UIViewContentModeCenter
此外，我已经通过一些计算来设置图像视图的框架，就像这样

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;

然后在选项卡控制器的委托方法中

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

只需使用动画块来像这样动画指针的移动

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

附言： 如果有些拼写不正确，请见谅。

- Robin