SRTabBarController aims to replicate much of UITabBarController's functionality for macOS. It acts as a visual tab bar for NSTabView and has a number of nifty features.
- Add tabs using segues right within your storyboard.
- Set text color, tint color, bar color, and item spacing in Interface Builder.
- Choose from 4 positions: Top, Bottom, Left, Right.
- Supports text & image, text only or image only tabs.
- Use translucent effects via
NSVisualEffectsView. - Written in Swift.
Check out this screencast for some of the options available
SRTabBarController can be installed manually by including all files within the Pod directory in your project. However, installation via CocoaPods is recommended.
pod 'SRTabBarController', :git => 'https://github.com/vincentneo/SRTabBarController.git'While SRTabBarController can be added to your project programatically, it is recommended that you use it in your storyboard, just like UITabBarController tabs can be defined via segues. As custom relationship segues are unsupported, a workaround has been used which utilises custom segues and identifiers to define tabs.
1 - Drag a new UIViewController into your storyboard and set it as the root content view controller for your window.
2 - Set the class of the new controller to be SRTabBarController ensuring that the bundle is set correctly.
3 - Define tab bar properties from the Attributes inspector on the SRTabBarController.
4 - Create your view controllers for each tab and link your SRTabBarController to them using a Custom segue.
5 - Ensure each tab view controller has a title defined in the attributes inspector. This is used as the title of the tab.
6 - Okay, this is the trickiest part. Click on each of the segues you just created and define the following in the attributes inspector.
The index here defines the position it will be displayed in the tab bar. Optionally, you can provide the name of a default image within your app's assets. For example if you had a search tab that you wanted to be at position 1 and have an icon called Search you would set the following as the identifier tab_1_Search.
Alongside the settings that can be defined within Interface Builder's inspector there are also a number of options that can be set by subclassing SRTabBarController. The SRTabBar itself is actually an NSVisualEffectsView so it's very easy to get those translucent effects users are familiar with in macOS.
Location - To customize the location on the screen set tabBarLocation to .Top, .Right, .Bottom, or .Left.
Bar Item Image Position - To customize the position of the image of the bar item, set tabBarImagePosition to options available by NSControl.ImagePosition, such as .imageLeft, .imageRight, .imageAbove, .imageBelow or .imageOnly. Defaults to .imageAbove.
Font - To customize font of the bar items, set tabBarFont as a regular NSFont. You can set .systemFont sizes and weight, for example. Defaults to size 10 system font.
Translucency - To enable the visual effects turn set tabBar?.translucent = true.
Visual Effects - Check out the NSVisualEffectsView for some of the settings that can be enabled for the tabBar. You'll most likely want to change the material and blendingMode.
Check out this screencast for some of the options available