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 cocoapodsTo 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'
endThen, run the following command:
$ pod installManually:
- 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 SJSegmentedScrollViewThen 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 = viewCustomize 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.0Change 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.