Twitter-esque UITabBarController?

Question

Tôi muốn tạo một ứng dụng sử dụng UITabBarController tương tự như ứng dụng Twitter dành cho iPhone và iPod touch. (Đèn xanh lam cho mũi tên chưa đọc và trượt để chuyển đổi giữa các chế độ xem nội dung).

Có cách nào dễ dàng để thực hiện việc này không? Bất kỳ mã nguồn mở nào?

Edit:

Tôi đã thêm một tiền thưởng. Tôi đang tìm kiếm một câu trả lời mà làm việc trên các thiết bị và trên iOS 4 và iOS 5.

EDIT:

Tôi đã sai lầm với mã ban đầu của tôi và tôi tìm thấy một giải pháp đơn giản. Tôi đã thêm việc kiểm tra sau, dành cho iOS 5 trong mã hoạt hình của tôi:

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

Sau đó, thay vì điều này:

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

... Tôi sử dụng này:

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

Tuy nhiên, vẫn giữ tiền thưởng, trong trường hợp tôi có cơ hội tìm được thứ gì đó hoạt động trong các câu trả lời.

Answer 1

Tôi sẽ tạo một lớp con của UITabBarController chuẩn và thêm một vài bản xem phụ cho đèn xanh lam và mũi tên trượt. Không nên quá khó để hoàn thành.

Chỉnh sửa: Đây là ý tưởng về một số nội dung sẽ được đưa vào lớp con của bạn. Tôi thậm chí không biết nếu mã này sẽ biên dịch.

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

Đây là cách bạn tạo ra các mũi tên

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

Và làm theo câu trả lời của Rafael để có được ánh sáng màu xanh.

Answer 3

Mặc dù một bài lão hóa, tôi mặc dù tôi sẽ xen vào với một dự án GitHub mà không ai đề cập, họ đã tái tạo các thanh tab Twitter theo kiểu khá tốt, đây là liên kết:

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

Các dự án nằm trong thư mục phụ có tên là "CustomTabBar", biết thêm chi tiết có thể được tìm thấy ở đây:

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

Answer 4

BCTabBarController là những gì tôi dựa tùy chỉnh twitter phong cách của tôi ta b-bar trên và nó hoạt động trong iOS 4 và 5: view controller http://pastebin.me/f9a876a6ad785cb0b2b7ad98b1024847

Mỗi tab cần thực hiện các phương pháp sau đây cho hình ảnh tab:

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

(Trong các đại biểu ứng dụng), bạn sẽ khởi tạo tab điều khiển thanh như vậy:

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

tùy chọn, bạn có thể sử dụng một hình nền tùy chỉnh cho mỗi tab xem điều khiển với phương pháp này:

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

Mũi tên ở đầu thanh tab trượt sang tab được chọn giống như thanh tab twitter.

Một số ảnh chụp màn hình:

Answer 5

Chỉ 2day tôi đã thực hiện một ứng dụng như thế này cho POC, nó quay ra rằng đó là dễ dàng hơn bạn có thể nghĩ đến.

Đầu tiên trong phương pháp applicationdidfinishlaunching: Tôi đã thêm hình ảnh giữ hình ảnh của con trỏ hoặc mũi tên có chiều rộng là 64 khi chiều rộng màn hình là 320 và tôi có 5 tab trong thanh tab. bạn cũng có thể tính toán nó nếu bạn nghĩ rằng dự án của bạn sẽ có các tab động và sau đó chỉ cần thay đổi chiều rộng của imageview cho phù hợp một cái gì đó như thế này.

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

Bạn cũng có thể muốn thiết lập các chế độ nội dung về điều đó xem hình ảnh như uiviewcontentmodecenter
Ngoài ra tôi đã thiết lập các khung hình của ImageView bởi một số tính toán như thế này

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; 

Và sau đó trong các đại biểu phương pháp điều khiển thanh tab

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

chỉ cần sử dụng khối hoạt ảnh để làm động chuyển động của con trỏ như thế này

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

PS. Xin lỗi nếu một số cách viết không chính xác.