- Custom segmented control for iOS.
- Written in Swift.
- Support both images and text.
- Support vertically organise segments.
- More customisible than UISegmentedControl and easy to expand (e.g. styling).
Add pod 'SMSegmentView', '~> [VERSION]' to Podfile.
Drag SMSegmentView.swift and SMSegment.swift into your Xcode project.
Initialise SMSegmentView:
You can simply use SMSegmentView(frame:) to initialise your segment view by using the default properties.
But mostly, you may want to use SMSegmentView(frame:, dividerColour:, dividerWidth:, segmentAppearance:) to make it look more customised.
The parameter segmentAppearance: reads a SMSegmentAppearance instance. You can find what attributes it supports in SMSegmentAppearance class.
E.g.:
let appearance = SMSegmentAppearance()
appearance.segmentOnSelectionColour = UIColor(red: 245.0/255.0, green: 174.0/255.0, blue: 63.0/255.0, alpha: 1.0)
appearance.segmentOffSelectionColour = UIColor.whiteColor()
appearance.titleOnSelectionFont = UIFont.systemFontOfSize(12.0)
appearance.titleOffSelectionFont = UIFont.systemFontOfSize(12.0)
appearance.contentVerticalMargin = 10.0
let segmentView = SMSegmentView(frame: SomeFrame, dividerColour: UIColor(white: 0.95, alpha: 0.3), dividerWidth: 1.0, segmentAppearance: appearance)Add action for UIControlEvents.ValueChanged, and implement the action method.
E.g. segmentView.addTarget(self, action: #selector(YourViewController.selectSegmentInSegmentView(_:)), forControlEvents: .ValueChanged)
Add segments to your segment view.
E.g.:
segmentView.addSegmentWithTitle("Segment 1", onSelectionImage: UIImage(named: "target_light"), offSelectionImage: UIImage(named: "target"))
segmentView.addSegmentWithTitle("Segment 2", onSelectionImage: UIImage(named: "handbag_light"), offSelectionImage: UIImage(named: "handbag"))
segmentView.addSegmentWithTitle("Segment 3", onSelectionImage: UIImage(named: "globe_light"), offSelectionImage: UIImage(named: "globe"))
You can programmatically select/deselect a segment by assign an integer to selectedSegmentIndex.
You can organise all segments vertically by setting the organiseMode as .Vertical. It is set to .Horizontal by default.
E.g. segmentView.organiseMode = .Vertical
The framework comes with a sample project to demonstrate how to use it. Besides, this tutorial may give you some idea on how to expand this framework a little bit.
