Skip to content

Custom segmentedControl for iOS written in Swift. Supports vertical layout. Support both image and text. Highly customisable.

License

Notifications You must be signed in to change notification settings

sima-11/SMSegmentView

Repository files navigation

SMSegmentView Description

  • 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).

For CocoaPods User

Add pod 'SMSegmentView', '~> [VERSION]' to Podfile.

How To Use

Step 1

Drag SMSegmentView.swift and SMSegment.swift into your Xcode project.

Step 2

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)

Step 3

Add action for UIControlEvents.ValueChanged, and implement the action method.

E.g. segmentView.addTarget(self, action: #selector(YourViewController.selectSegmentInSegmentView(_:)), forControlEvents: .ValueChanged)

Step 4

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"))

Optional Step

You can programmatically select/deselect a segment by assign an integer to selectedSegmentIndex.

Support Vertical Mode

You can organise all segments vertically by setting the organiseMode as .Vertical. It is set to .Horizontal by default.

E.g. segmentView.organiseMode = .Vertical

More Info

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.

Screenshots

About

Custom segmentedControl for iOS written in Swift. Supports vertical layout. Support both image and text. Highly customisable.

Resources

License

Stars

Watchers

Forks

Packages

No packages published