Giter Club home page Giter Club logo

sjsegmentedviewcontroller's Introduction

SJSegmentedScrollView

CI Status Version License Platform

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.

demo

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 🍺 :)

paypal

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.