Twitter-esque UITabBarController?

Question

Я хотел бы создать приложение, использующее UITabBarController, аналогичное тому, которое есть в приложении Twitter для iPhone и iPod touch. (Синий свет для непрочитанных и скользящая стрелка для переключения между представлениями контента).

Есть ли простой способ сделать это? Любой открытый исходный код?

Редактировать:

Я добавил награду. Я ищу ответ, который работает на всех устройствах и на iOS 4 и iOS 5.

EDIT:

Я испортил свой оригинальный код и нашел простое решение. Я добавил следующую проверку для 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

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

Answer 5

Просто 2 дня я создал одно приложение, подобное этому, для POC, оказалось, что это проще, чем вы думаете.

Сначала в моем методе applicationdidfinishlaunching: я добавил imageview, содержащее изображение указателя илиСтрелка с шириной 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.Извините, если некоторые варианты написания неверны.