Segment Control
JNSegmentedControl is an easy to use, animated segmented control for iOS written in Swift.
JNSegmentedControl supports 3 main styles of segments: text only, image only, text with image on (under, above, before and after text).
JNSegmentedControl is available through CocoaPods. To install
it, simply add the following line to your Podfile:
pod 'JNSegmentedControl'
Import JNSegmentedControl module
import JNSegmentedControl
Initalization:
Storyboard:
Manually, you can add a UIView instance to your Xib, set ‘JNSegmentedControl’ class and connect @IBOutlet reference.
Programmatically:
Init ‘JNSegmentedControl’ UIView instance programatically.
let segmentedControlView = JNSegmentedCollectionView()
self.view.addSubview(segmentedControlView)
Setup:
JNSegmentedControl Setup:
self.segmentedControlView.setup(
items: [NSAttributedString],
selectedItems: [NSAttributedString],
options: JNSegmentedCollectionOptions(),
badgeCounts: [Int]
)
To start with default options you can pass (nil) value to the options parameter.
self.segmentedControlView.setup(
items: [NSAttributedString],
selectedItems: [NSAttributedString],
options: nil,
badgeCounts: []
)
Configuring items:
The Segmented Control items & selected items are array of NSAttributedString. In order to set items you need to provide an instance of [NSAttributedString].
Default Items:
var items = [NSAttributedString]()
let item = NSAttributedString(string: “Default Item", attributes: [])
items.append(item)
Selected Items:
var items = [NSAttributedString]()
let item = NSAttributedString(string: “Selected Item", attributes: [])
items.append(item)
Handling callback:
self.segmentedControlView.didSelectItem = { segment in
print("Selected item: ", segment)
}
Options Customization:
contentItemLayoutMargins: Content item layout margins from Left and Right.
JNSegmentedCollectionOptions(
backgroundColor: UIColor.white,
itemOptionType: JNSegmentedCollectionItemOptionType,
layoutType: JNSegmentedCollectionLayoutType.dynamic,
verticalSeparatorOptions: JNSegmentedCollectionItemVerticalSeparatorOptions? = nil,
scrollEnabled: true,
contentItemLayoutMargins: 10.0
)
JNSegmented Collection Item Option Type:
The Segmented Control Item has two types of layout for items:
multiple(options: [JNSegmentedCollectionItemOptions]): Multiple option for all items.
enum JNSegmentedCollectionItemOptionType {
case single(option: JNSegmentedCollectionItemOptions)
case multiple(options: [JNSegmentedCollectionItemOptions])
}
JNSegmented Collection Item Options:
The Segmented Control has the ability to configure each item, that has the following settings:
SelectedBadgeTextColor: Selected badge count text color.
JNSegmentedCollectionItemOptions(cornerRadius: 10.0,
backgroundColor: #colorLiteral(red: 0.456212461, green: 0.7545028329, blue: 0.8568375707, alpha: 1),
selectedBackgroundColor: #colorLiteral(red: 0.1984777451, green: 0.7956866622, blue: 1, alpha: 1),
badgeBackgroundColor: .white,
selectedBadgeBackgroundColor: .white,
badgeFont: UIFont.systemFont(ofSize: 16.0),
selectedBadgeFont: UIFont.systemFont(ofSize: 16.0),
badgeTextColor: .gray, selectedBadgeTextColor: .gray)
JNSegmented Collection Layout Type:
The Segmented Control has two types of layout for items:
Fixed: The width of each item will be fixed according to max visible Items.
enum JNSegmentedCollectionLayoutType {
case dynamic
case fixed(maxVisibleItems: Int)
}
JNSegmented Vertical Separator Options:
The Segmented Control has the ability to show separator line between items, that has the following settings:
Color: Separator view background color.
JNSegmentedCollectionItemVerticalSeparatorOptions (
heigthRatio: 0.3,
width: 1.0,
color: UIColor.blue
)
To run the example project, clone the repo, and run pod install
from the Example directory first.
Jayel Zaghmoutt, Mohammad Nabulsi & Mohammad Ihmouda
JNSegmentedControl is available under the MIT license. See the LICENSE file for more info.