Latest 2.1.2
License MIT
Platforms ios 8.0

CI Status

A customized segment control sublassing UIControl where the view, titles of each segment and the indicator view can all be cutomized.


  • [x] Customized configuration
    • @IBInspectableTitle color
    • @IBInspectableIndicator image
    • @IBInspectableNumber of displayed segments
    • Title font
    • Indicator view
  • [x] DataSource protocol
    • Number of segments
    • Segment background view (optional)
  • [x] Documentation



To run the example project, clone the repo, and run pod install from the Example directory first.


HSegmentControl is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod "HSegmentControl"
Swift version version
2.3 2.0.x
3.0 2.1.0 or later


Add to View

You can either add HSegmentControl programmatically with code

let segmentControl = HSegmentControl()
// Customized configuration
// .
// .
// .

or simply drag and drop an UIView in storyboard (Interface Builder) and set the class to HSegmentControl.

Data source protocol

Make sure your controller implements the HSegmentControlDataSource protocol and is set to the dataSource of the HSegmentControl

class ViewController: UIViewController, HSegmentControlDataSource{
    // .
    // .
    // .
    override func viewDidLoad(){
        segmentControl.dataSource = self
    // .
    // .
    // .
    // MARK: - HSegmentControlDataSource protocol
    func numberOfSegments(segmentControl: HSegmentControl) -> Int {
        return 5

    func segmentControl(segmentControl: HSegmentControl, titleOfIndex index: Int) -> String {
        return ["1","two", "threeeeeee", "four", "five"][index]

    // Optional
    func segmentControl(segmentControl: HSegmentControl, segmentBackgroundViewOfIndex index: Int) -> UIView {
        let view = UIView()
        view.backgroundColor = UIColor(red: CGFloat(drand48()), green: CGFloat(drand48()), blue: CGFloat(drand48()), alpha: 1)
        return view

Configure HSegmentControl

override func viewDidLoad(){
    segmentControl.dataSource = self
    // Customized configuration
    segmentControl.numberOfDisplayedSegments = 3
    segmentControl.selectedTitleFont = UIFont.boldSystemFontOfSize(17)
    segmentControl.selectedTitleColor = UIColor.darkGrayColor()
    segmentControl.unselectedTitleFont = UIFont.systemFontOfSize(17)
    segmentControl.unselectedTitleColor = UIColor.blackColor()
    segmentControl.segmentIndicatorImage = UIImage(named: "ind_img")
    segmentControl.segmentIndicatorViewContentMode = UIViewContentMode.Bottom
    segmentControl.segmentIndicatorView.backgroundColor = UIColor.whiteColor()

Value changed

As you did in any other UIControl, link the valueChanged functions to delegate action when value changed.

@IBAction func valueChanged(sender: AnyObject){
    print("value did change to ((sender as! HSegmentControl).selectedIndex)")

Change value manually

Simply set the selectedIndex variable

segmentControl.selectedIndex = 2

Note that function valueChanged(sender:) will not be called when you set selectedIndex manually.




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

Latest podspec

    "name": "HSegmentControl",
    "version": "2.1.2",
    "summary": "A customized segment control sublassing UIControl.",
    "description": "A customized segment control sublassing UIControl where the view, titles of each segment and the indicator view can all be cutomized.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "Chang, Hao": "[email protected]"
    "source": {
        "git": "",
        "tag": "2.1.2"
    "platforms": {
        "ios": "8.0"
    "source_files": "HSegmentControl/Classes/**/*",
    "pushed_with_swift_version": "3.0"

Pin It on Pinterest

Share This