CODEWITHSUNDEEP
iosscrollbartabbar
user3708224
user3708224

Reputation: 1259

custom scrollable tab bar on top iOS

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!

vevo tab screen 1 vevo tab screen 2

Upvotes: 6

Views: 14923

Answers (4)

Chris
Chris

Reputation: 7310

I was looking for a similar solution, but ended up coming up with my own and wanted to share for anyone that might be looking at this later.

https://github.com/chrismanahan/Simple-Scrolling-Tab-Bar

It's a super simple way to create a sliding tab bar with the standard UITabBarController in your storyboard.

Upvotes: 0

Abdullah Md. Zubair
Abdullah Md. Zubair

Reputation: 3324

You can have a look at this library: https://github.com/raihan/ZRScrollableTabBar. Which is simple and lightweight and may help you.

Upvotes: 0

Carlos Jiménez
Carlos Jiménez

Reputation: 537

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.

enter image description here

Hope it helps!

Upvotes: 7

Ian MacDonald
Ian MacDonald

Reputation: 14010

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.

Upvotes: 1

Related Questions