Need help with ScrollableSegmentedControl?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

242 Stars 67 Forks MIT License 92 Commits 21 Opened issues


Scrollable Segmented Control for when UISegmentedControl is not sufficient

Services available


Need anything else?

Contributors list

# 330,383
50 commits
# 528,158
6 commits
# 682,213
1 commit
# 348,781
1 commit


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 |


  • Xcode 10.2+
  • Swift 5.0+
  • iOS 9.0+


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 =

// 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 =

return true


Configuring custom title attributes via setTitleTextAttributes method

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

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.



The easiest way of installing ScrollableSegmentedControl is via CocoaPods.

pod 'ScrollableSegmentedControl', '~> 1.5.0'

Old-fashioned way

Just add

to your project.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.