SMSwipeableTabView

Swipeable Views with Tabs (Like Android SwipeView With Tabs Layout)

Code Quality Rank: L5

Programming language: Swift

License: MIT License

Tags: UI    

Latest version: v1.0.1

README

SMSwipeableTabView

SMSwipeableTabView is a custom control which is mixture of UIPageViewController and Scrollable Tab Bar. This is similar to Swipe view with tabs alyout in android. Any number of tabs can be added along with the swipeable views. User can fully customize the control.

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

This library works with iOS version 8.0 and above. It is written in Swift.

• iOS 8.0+ / Mac OS X 10.9+
• Xcode 7

Demo:

(Without Customization)

Installation

CocoaPods (iOS 8+, OS X 10.9+)

SMSwipeableTabView is available through CocoaPods. To install it, simply add the following line to your Podfile:

platform: ios, '8.0'
use_framework!

target 'MyApp' do
    pod "SMSwipeableTabView"
end

Carthage (iOS 8+, OS X 10.9+)

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate SMSwipeableTabView into your Xcode project using Carthage, specify it in your Cartfile:

github "smahajan28/SMSwipeableTabView"

Run carthage update to build the framework and drag the built SMSwipeableTabView.framework into your Xcode project.

Swift Package Manager

How to use

(check out the provided Example)

We need to add the following code in the viewController where we need to implement this control.

//Add the title bar elements as an Array of String
swipeableView.titleBarDataSource = titleBarDataSource //Array of Button Titles like ["Punjab", "Karnataka", "Mumbai"]

//Assign your viewcontroller as delegate to load the Viewcontroller
swipeableView.delegate = self

//Set the View Frame (64.0 is 44.0(NavigationBar Height) + 20.0(StatusBar Height))
swipeableView.viewFrame = CGRect(x: 0.0, y: 64.0, width: UIScreen.mainScreen().bounds.width, height: UIScreen.mainScreen().bounds.height-64.0)

//Then add the view controller on the current view.
self.addChildViewController(swipeableView)
self.view.addSubview(swipeableView.view)
swipeableView.didMoveToParentViewController(self)

Delegate Callback

Whenever you click on any segment button or swipe the page on the controller. Delegate method will return the next viewcontroller to load

func didLoadViewControllerAtIndex(index: Int) -> UIViewController {
    //We can implement switch case with the index Parameter and load new controller at every new index. Or we can load the same list view with different datasource.
    let listVC = UIViewController()
    listVC.backgroundColor = UIColor.red
    listVC.dataSource = anyArray[index] // This will be an array of arrays or we need to set our dataSource of every different controller.
    return listVC
}

Customization

We can customize each and every control in this view. Just pass a dictionary with required fields.

NOTE: Set the frame of swipeableViewController after setting all the attributes.

e.g.: If you want to change the background color of the top bar, just add the following code:

swipeableView.segmentBarAttributes = [SMBackgroundColorAttribute : UIColor.lightGray]

If you want to change the background color of the selection bar(Bar display under the segment button) and set Alpha of the selection bar, just add the following code:

swipeableView.selectionBarAttributes = [
                                        SMBackgroundColorAttribute : UIColor.green, 
                                        SMAlphaAttribute : 0.8
                                        ]

Also you can update the segment Button, just add attributes for button:

// Setting Font And BackgroundColor of Button
swipeableView.buttonAttributes = [
                                    SMBackgroundColorAttribute : UIColor.green, 
                                    SMAlphaAttribute : 0.8,
                                    SMFontAttribute : UIFont(name: "HelveticaNeue-Medium", size: 13.0)
                                 ]

if you want to add images instead of Title in buttons, you can easily set Normal and Highlighted Image attribute in the dictionary, like

// Setting Font And BackgroundColor of Button
// Here for Normal and Highlighted Images we need to send the imageName array
swipeableView.buttonAttributes = [
                                    SMBackgroundColorAttribute : UIColor.clear, 
                                    SMAlphaAttribute : 0.8,
                                    SMButtonHideTitleAttribute : true,
                                    SMButtonNormalImagesAttribute :["image_name1", "image_name2"] as [String]),
                                    SMButtonHighlightedImagesAttribute : ["high_image_name1", "high_image_name2"] as [String])
                                 ]

you can add the following attribute keys in the dictionary

SMFontAttribute // Set UIFont insatance
SMForegroundColorAttribute  // Set UIColor instance (e.g. : Button Title Label ForegroundColor)
SMBackgroundColorAttribute // Set UIColor instance
SMAlphaAttribute // Set CGFloat value
SMBackgroundImageAttribute // Set UIImage instance
SMButtonNormalImageAttribute // Set UIImage instance
SMButtonHighlightedImageAttribute // Set UIImage instance
SMButtonHideTitleAttribute // Set Bool instance

Width of selectionBar is highly customizable. We can make the width fix or variabele.

swipeableView.buttonWidth = 60.0

Similarly Height of selectionBar can be changed using

swipeableView.selectionBarHeight = 2.0 //For thin line

We can also change the height of the segmentBar, use the below line of code:

swipeableView.segementBarHeight = 50.0 //Default is 44.0

Padding in the button can be customised using:

swipeableView.buttonPadding = 10.0 //Default is 8.0

Customized App Demo

(With Customization)

Author

Sahil Mahajan, [email protected]

License

SMSwipeableTabView is available under the MIT license. See the LICENSE file for more info.