Twitter 风格的 UITabBarController？

Question

我想制作一款使用 UITabBarController 的应用程序，该应用程序类似于适用于 iPhone 和 iPod touch 的 Twitter 应用程序中的应用程序。 （蓝光表示未读，滑动箭头用于在内容视图之间切换）。

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

编辑：

我添加了赏金。我正在寻找一个适用于跨设备以及 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]);

尽管如此，仍然坚持赏金，以防我有机会找到可以在答案。

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

Answer 2

以下是创建箭头的方法

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

并按照 Rafael 的回答获取蓝光。

Answer 3

虽然是一篇老化的帖子，但我想我会插入一个没有人提到的 GitHub 项目，他们很好地重新创建了 Twitter 风格的选项卡栏，这里是链接：

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

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

Answer 4

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 选项卡栏一样，转到所选的选项卡。

一些屏幕截图：

Answer 5

仅仅两天我就为 POC 制作了一款这样的应用程序，事实证明它比你想象的要容易。

首先在我的 applicationdidfinishlaunching: 方法中，我添加了图像视图，其中包含宽度为 64 的指针或箭头图像，因为屏幕宽度为 320，并且选项卡栏中有 5 个选项卡。如果您认为您的项目将具有动态选项卡，然后只需相应地更改图像视图的宽度，您也可以计算它，如下所示。

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

PS。
抱歉，如果某些拼写不正确。