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/

按照拉斐尔的回答得到蓝灯。

Answer 3

虽然是一个老化的帖子，但我会插入一个没人提到的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/

Answer 4

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

每个标签视图控制器应对标签图像实施以下方法：

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

（在App委托中）您将初始化标签栏控制器，如下所示：

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

标签栏顶部的箭头滑动到选中的标签，就像推文标签栏一样。

一些截图：

BCTabBarController

Answer 5

就在2天，我为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
我也通过像这样的计算设置了imageview的框架

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。对不起，如果某些拼写不正确。

Twitter-esque UITabBarController？

5 个答案: