Latest 1.4.0
Homepage https://github.com/GocePetrovski/ScrollableSegmentedControl
License MIT
Platforms ios 9.0
Authors

CI Status
Version
License
Platform

ScrollableSegmentedControl is replacement for UISegmentedControl that becomes scrollable when the total width of all segments exceeds the width of the control itself.

ScrollableSegmentedControl supports 4 styles of segments: text only, image only, text with image on top and text with image on left.

Text Only Image Only
Demo Demo
Image On Top Image On Left
Demo Demo

Support

  • Xcode 10.0+
  • Swift 4.2+
  • iOS 9.0+

Usage

ScrollableSegmentedControl is designed to be used exactly same as UISegmentedControl. methods and properties are deliberately named same or very similar to ones found in UISegmentedControl.

@IBOutlet weak var segmentedControl: ScrollableSegmentedControl!

override func viewDidLoad() {
    super.viewDidLoad()

    segmentedControl.segmentStyle = .textOnly
    segmentedControl.insertSegment(withTitle: "Segment 1", image: #imageLiteral(resourceName: "segment-1"), at: 0)
    segmentedControl.insertSegment(withTitle: "Segment 2", image: #imageLiteral(resourceName: "segment-2"), at: 1)
    segmentedControl.insertSegment(withTitle: "Segment 3", image: #imageLiteral(resourceName: "segment-3"), at: 2)
    segmentedControl.insertSegment(withTitle: "Segment 4", image: #imageLiteral(resourceName: "segment-4"), at: 3)
    segmentedControl.insertSegment(withTitle: "Segment 5", image: #imageLiteral(resourceName: "segment-5"), at: 4)
    segmentedControl.insertSegment(withTitle: "Segment 6", image: #imageLiteral(resourceName: "segment-6"), at: 5)

    segmentedControl.underlineSelected = true

    segmentedControl.addTarget(self, action: #selector(TableViewController.segmentSelected(sender:)), for: .valueChanged)

    // change some colors 
    segmentedControl.segmentContentColor = UIColor.white
    segmentedControl.selectedSegmentContentColor = UIColor.yellow
    segmentedControl.backgroundColor = UIColor.black

    // Turn off all segments been fixed/equal width. 
    // The width of each segment would be based on the text length and font size. 
    segmentedControl.fixedSegmentWidth = false
}

func segmentSelected(sender:ScrollableSegmentedControl) {
    print("Segment at index (sender.selectedSegmentIndex)  selected")
}

Using appearance proxy to change some colors

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    let segmentedControlAppearance = ScrollableSegmentedControl.appearance()
    segmentedControlAppearance.segmentContentColor = UIColor.white
    segmentedControlAppearance.selectedSegmentContentColor = UIColor.yellow
    segmentedControlAppearance.backgroundColor = UIColor.black

    return true
}

Configuring custom title attributes via setTitleTextAttributes method

let largerRedTextAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16), NSAttributedStringKey.foregroundColor: UIColor.red]
let largerRedTextHighlightAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16), NSAttributedStringKey.foregroundColor: UIColor.blue]
let largerRedTextSelectAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16), NSAttributedStringKey.foregroundColor: UIColor.orange]

segmentedControl.setTitleTextAttributes(largerRedTextAttributes, for: .normal)
segmentedControl.setTitleTextAttributes(largerRedTextHighlightAttributes, for: .highlighted)
segmentedControl.setTitleTextAttributes(largerRedTextSelectAttributes, for: .selected)

See the Demo project for example on how to use it.

Installation

CocoaPods

The easiest way of installing ScrollableSegmentedControl is via CocoaPods.

pod 'ScrollableSegmentedControl', '~> 1.4.0'

Old-fashioned way

Just add ScrollableSegmentedControl.swift to your project.

Latest podspec

{
    "name": "ScrollableSegmentedControl",
    "version": "1.4.0",
    "license": "MIT",
    "summary": "Scrollable Segmented Control for when UISegmentedControl is not sufficient",
    "homepage": "https://github.com/GocePetrovski/ScrollableSegmentedControl",
    "social_media_url": "http://twitter.com/GocePetrovski",
    "authors": {
        "Goce Petrovski": "[email protected]"
    },
    "source": {
        "git": "https://github.com/GocePetrovski/ScrollableSegmentedControl.git",
        "tag": "1.4.0"
    },
    "platforms": {
        "ios": "9.0"
    },
    "swift_version": "4.2",
    "source_files": "ScrollableSegmentedControl/*.swift"
}

Pin It on Pinterest

Share This