custom scrollable tab bar on top iOS

Question

I have a question about implementing a custom scrollable tab bar at the top of the screen in an iOS app. I am looking for a a tab bar very similar to the vevo app (pictured below). I have checked out this scrolling tab bar ( https://github.com/vermontlawyer/JFATabBarController ), but would like to move it to the top, and it seems to be glitchy when I edit the source code...I am assuming I can not use a standard tabbarcontroller for this but must make a custom tab bar....correct? How would I go about creating a custom scrolling tab bar at the top of the screen?

Thank you very much for any feedback!

Answer 1

this project may help you: https://github.com/Marxon13/M13InfiniteTabBar but you need

Consist in a infinite UITabBar with a UIScrollView embedded in it ;) and it can be configure to put the tabbar in top of screen.

Hope it helps!

Answer 2

Basically, you'd do something like the following:

@class CustomTabBar;

@protocol CustomTabBarDatasource <NSObject>
- (int)numberOfElementsInCustomTabBar:(CustomTabBar *)bar;
- (NSString *)titleForTabAtIndex:(int)index inCustomTabBar:(CustomTabBar *)bar;
@end

@protocol CustomTabBarDelegate <NSObject>
- (void)customTabBar:(CustomTabBar *)bar activatedTabAtIndex:(int)index;
@end

@interface CustomTabBar : UIView
@property (weak) id<CustomTabBarDataSource> dataSource;
@property (weak) id<CustomTabBarDelegate> delegate;
@end

@interface YourViewController : UIViewController {
  CustomTabBar *myTabBar;
}
@end

@interface YourViewController (TabBarDataSource) <CustomTabBarDataSource>
@end

@interface YourViewController (TabBarDelegate) <CustomTabBarDelegate>
@end

The implementation for your CustomTabBar would include a UIScrollView and a set of UIButtons, whose title you would retrieve from the dataSource. When a button is fired, you'd call the delegate's customTabBar:activatedTabAtIndex: method. Your YourViewController would change its content when the delegate method fires.