Skip to content

vincentneo/SRTabBarController

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SRTabBarController

license CocoaPods CocoaPods

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.

Types of tab bars

Check out this screencast for some of the options available

Installation

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'

Usage

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.

Xcode Inspector

3 - Define tab bar properties from the Attributes inspector on the SRTabBarController.

Attributes Inspector

4 - Create your view controllers for each tab and link your SRTabBarController to them using a Custom segue.

Attributes Inspector

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.

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.

Customizing SRTabBarController

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

About

🚥 A fork of the UITabBarController clone for macOS

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Swift 92.7%
  • Ruby 7.3%