LGSegmentedControl

LGSegmentedControl is a highly customizable and therefor prettier version of UISegmentedControl.

Requirements

• written in pure Swift 4.2
• iOS 9.0 and higher

Attribution

• not a requirement but highly appreciated: add your app to the list of apps using this library

Installation

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

pod 'LGSegmentedControl'

Storyboard

Drag a view into your storyboard and set its class to LGSegmentedControl.
You'll be able to customize your segmented control from there, as well as provide static segment data:

And the best? It supports live rendering in interface builder!

Then, create an @IBAction in your view controller and link to it using the valueChanged action.

Programmatically

Instantiate a new view:

let control = LGSegmentedControl(frame: CGRect(x: 50, y: 50, width: 100, height: 30))
view.addSubview(control)

...then add the segments data:

control.segments = [
    LGSegment(title: "1 day"),
    LGSegment(title: "3 weeks"),
    LGSegment(title: "2 months"),
    LGSegment(title: "Quarter")
]

Lastly, define the selected segment:

control.selectedIndex = 1 // selects: "3 weeks"

To track user interaction, add a target and link to a method in your view controller using the .valueChanged action:

control.addTarget(self, action: #selector(selectedSegment(_:)), for: .valueChanged)

@objc func selectedSegment(_ segmentedControl: LGSegmentedControl) {
    // selectedSegment may be nil, if selectedIndex was set to nil (and hence none was selected)
    guard let segment = segmentedControl.selectedSegment else { return }
    let title = segment.title // ex: "3 weeks"
}

Badge Counts

You can add badge counts to segments, by assigning an Int value:

segment.badgeCount = 3

This will result in:

Note, that setting the badge to 0 will still show a badge count with a value of 0.
If you want to hide a badge, simply set the count nil:

segment.badgeCount = nil

Customization

You can customize many aspects of your control:

// StackView distribution, set to .fill to have each segment be as wide as required; set to .fillEqually, to have all segments be the same width
// default: .fill
public var distribution: UIStackView.Distribution

// StackView spacing
// default: 8
@IBInspectable public var spacing: CGFloat

// Background color of the whole segment
// default: .clear
@IBInspectable override public var backgroundColor: UIColor?

More options using LGSegmentOptions:

// Corner radius of the segments
// default: 6
var cornerRadius: CGFloat

// Determines whether there should be a short fade animation when selecting a segment
// default: true
var animateStateChange: Bool

// Background & text color of the selected segment
// default: .blue-ish (#389FF9), .white
var selectedColor: (background: UIColor, text: UIColor)

// Background & text color of the deselected segment
// default: .clear, .black
var deselectedColor: (background: UIColor, text: UIColor)

// Background & text color of the selected segment
// default: .red, .white
var badgeColor: (background: UIColor, text: UIColor)

// Font of the titleLabel
// default: .systemFont(ofSize: 15)
var font: UIFont

There are many different ways to style a control with given options, here is a few examples:

Contribution

If you find any bugs, please open a new issue.
If you want to contribute changes and features, please open a pull request and I'll happily merge it!

Author

LGSegmentedControl is written and maintained by Linus Geffarth.

License

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