Deprecated

Do not use SJSegmentedScrollView for new projects. This repo exists to support existing projects only.

The scrolling when using this component is not smooth, for details see:

DBRO-1549 | Locator Screen - Smooth the Scrolling when Map is scrolled away BMKT-1748 | Locator Screen - Smooth the Scrolling when Map is scrolled away NDLS-3100 | Locator Screen - Smooth the Scrolling when Map is scrolled away

and a discussion on Slack on January 5th, 2021

hathway/SJSegmentedScrollView

SJSegmentedScrollView is a light weight generic controller written in Swift. Its a simple customizable controller were you can integrate any number of ViewControllers into a segmented controller with a header view controller.

Highlights

• Horizontal scrolling for switching from segment to segment.
• Vertical scrolling for contents.
• Single header view for all segments.
• Title, segment selection color, header size, segment height etc can be customized accordingly.
• Supports Swift and Objective-C.
• Supports multitasking.
• Supports Refreshcontrol and custom pull to refresh libs.

Installation

CocoaPods:

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

To integrate SJSegmentedViewController into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
use_frameworks!

target '<Your Target Name>' do
pod ’SJSegmentedScrollView’, ‘1.3.8'
end

Then, run the following command:

$ pod install

Manually:

• Download SJSegmentedViewController.
• Drag and drop SJSegmentedViewController directory to your project

Requirements

• Xcode 7.3+
• iOS 9.0+
• Swift 2.3+

Communication

• If you found a bug, open an issue.
• If you have a feature request, open an issue.
• If you want to contribute, submit a pull request.

Donation

If this project help you reduce time to develop, you can give me a beer 🍺 :)

Usage

Here is how you can use SJSegmentedViewController.

Import SJSegmentedScrollView to your viewcontroller,

import SJSegmentedScrollView

Then add any number of ViewControllers into SJSegmentedViewController. All you have to do is as follows.

if let storyboard = self.storyboard {

let headerViewController = storyboard
    .instantiateViewControllerWithIdentifier("HeaderViewController")

let firstViewController = storyboard
    .instantiateViewControllerWithIdentifier("FirstTableViewController")
firstViewController.title = "First"

let secondViewController = storyboard
    .instantiateViewControllerWithIdentifier("SecondTableViewController")
secondViewController.title = "Second"

let thirdViewController = storyboard
    .instantiateViewControllerWithIdentifier("ThirdTableViewController")
thirdViewController.title = "Third"

let segmentedViewController = SJSegmentedViewController(headerViewController: headerViewController,
segmentControllers: [firstViewController,
	secondViewController,
	thirdViewController])

• Present ViewController

self.presentViewController(segmentedViewController, animated: false, completion: nil)

• Push ViewController

self.navigationController?.pushViewController(segmentedViewController,
                                                          animated: true)

• Add Child ViewController

addChildViewController(segmentedViewController)
self.view.addSubview(segmentedViewController.view)
segmentedViewController.view.frame = self.view.bounds
segmentedViewController.didMoveToParentViewController(self)

We upgraded to Swift 4. For those who want to use older version,

Swift 3: pod ’SJSegmentedScrollView’, ‘1.3.6'

Swift 2.3: pod ’SJSegmentedScrollView’, ‘1.3.6' OR

pod 'SJSegmentedScrollView', :git => 'https://github.com/subinspathilettu/SJSegmentedViewController.git', :tag => 'v1.1.1'

Customize Segement Tab

Defaultly, SJSegmentedScrollView shows the controller.title as segments tab.

firstViewController.title = "First"

You can customize the segment tab view by providing controller.navigationItem.titleView.

// Custom ImageView
let view = UIImageView()
view.frame.size.width = 100
view.image = UIImage(named: imageName)
view.contentMode = .scaleAspectFit
view.backgroundColor = .white

firstViewController.navigationItem.titleView = view

Customize your view

By default, SJSegmentedScrollView will observe the default view of viewcontroller for content changes and makes the scroll effect. If you want to change the default view, implement SJSegmentedViewControllerViewSource and pass your custom view.

func viewForSegmentControllerToObserveContentOffsetChange() -> UIView {
	return view
}

SJSegmentedViewControllerDelegate delegate method which helps to customize segment view by accessing the current segment, index, etc.

Note: if there is only one content controller then the segment will be empty.

segmentedViewController.delegate = self

extension ViewController: SJSegmentedViewControllerDelegate {
    
    func didMoveToPage(controller: UIViewController, segment: SJSegmentTab?, index: Int) {
        if segmentedViewController.segments.count > 0 {
            
            let segmentTab = segmentedViewController.segments[index]
            segmentTab.titleColor = .yellow
        }
    }
}

You can also customize your controllers by using following properties in SJSegmentedViewController.

let segmentedViewController = SJSegmentedViewController()

//Set height for headerview.
segmentedViewController.headerViewHeight = 250.0

//Set height for segmentview.
segmentedViewController.segmentViewHeight = 60.0

//Set color for selected segment.
segmentedViewController.selectedSegmentViewColor = UIColor.redColor()

//Set color for segment title.
segmentedViewController.segmentTitleColor = UIColor.blackColor()

//Set background color for segmentview.
segmentedViewController.segmentBackgroundColor = UIColor.whiteColor()

//Set shadow for segmentview.
segmentedViewController.segmentShadow = SJShadow.light()

//Set bounce for segmentview.
segmentedViewController.segmentBounces = true

//Set font for segmentview titles.
segmentedViewController.segmentTitleFont = UIFont.systemFontOfSize(14.0)

//Set height for selected segmentview.
segmentedViewController.selectedSegmentViewHeight = 5.0

//Set height for headerview to visible after scrolling
segmentedViewController. headerViewOffsetHeight = 10.0

Change Segment Programmatically

To change segment programmatically, use SJSegmentedViewController func setSelectedSegmentAt(_ index: Int, animated: Bool).

segmentControl.setSelectedSegmentAt(index, animated: true)

Author

Subins Jose, [email protected]

License

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