Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jndisrupter/jnsegmentedcontrol
Segment Control
https://github.com/jndisrupter/jnsegmentedcontrol
cocoapods collectionview horizontal-scrolling segment segmented-controls segmentedcontrol swift xcode
Last synced: 6 days ago
JSON representation
Segment Control
- Host: GitHub
- URL: https://github.com/jndisrupter/jnsegmentedcontrol
- Owner: JNDisrupter
- License: mit
- Created: 2018-12-18T15:07:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-06T00:14:18.000Z (9 months ago)
- Last Synced: 2024-10-10T04:18:13.038Z (about 1 month ago)
- Topics: cocoapods, collectionview, horizontal-scrolling, segment, segmented-controls, segmentedcontrol, swift, xcode
- Language: Swift
- Homepage:
- Size: 5.54 MB
- Stars: 7
- Watchers: 6
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JNSegmentedControl
[](https://travis-ci.org/JNDisrupter/JNSegmentedControl)
[](https://cocoapods.org/pods/JNSegmentedControl)
[](https://cocoapods.org/pods/JNSegmentedControl)
[](https://cocoapods.org/pods/JNSegmentedControl)
**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).
## Preview
## Requirements:
- Xcode 9
- iOS 9.0+
- Swift 4.2+
## Installation
JNSegmentedControl is available through [CocoaPods](https://cocoapods.org). To install
it, simply add the following line to your Podfile:
```swift
pod 'JNSegmentedControl'
```
## Usage:
- Import **JNSegmentedControl module**
```swift
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.
```swift
let segmentedControlView = JNSegmentedCollectionView()
self.view.addSubview(segmentedControlView)
```
- **Setup:**
- ***JNSegmentedControl Setup:***
```swift
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.
```swift
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:***
```swift
var items = [NSAttributedString]()
let item = NSAttributedString(string: “Default Item", attributes: [])
items.append(item)
```
- ***Selected Items:***
```swift
var items = [NSAttributedString]()
let item = NSAttributedString(string: “Selected Item", attributes: [])
items.append(item)
```
- **Handling callback:**
```swift
self.segmentedControlView.didSelectItem = { segment in
print("Selected item: ", segment)
}
```
- **Options Customization:**
- **backgroundColor**: Segmented control background color.
- **itemOptionType**: case value from **JNSegmentedCollectionItemOptionType** enumeration.
- **layoutType**: case value from **JNSegmentedCollectionLayoutType** enumeration.
- **verticalSeparatorOption**s: instance from **JNSegmentedCollectionItemVerticalSeparatorOptions** struct as vertical separator between segments.
- **scrollEnabled**: segmented control is scrolling enabled.
- **contentItemLayoutMargins**: Content item layout margins from Left and Right.
```swift
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:
- **single(option: JNSegmentedCollectionItemOptions):** Single option for all items.
- **multiple(options: [JNSegmentedCollectionItemOptions]):** Multiple option for all items.
```swift
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:
- **CornerRadius:** Corner radius for container view.
- **BackgroundColor:** Background color for container view.
- **SelectedBackgroundColor:** Selected background color for container view.
- **BadgeBackgroundColor:** Badge background color for badge count.
- **SelectedBadgeBackgroundColor:** Selected badge background color for badge count.
- **BadgeFont:** Badge count font.
- **SelectedBadgeFont:** Selected badge count font.
- **BadgeTextColor:** Badge count text color.
- **SelectedBadgeTextColor:** Selected badge count text color.
```swift
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:
- **Dynamic:** The width of each item will be according to its content.
- **Fixed:** The width of each item will be fixed according to max visible Items.
```swift
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:
- **HeigthRatio:** Separator view height Ratio accroding to collection view height, max value is 1 and min is 0.
- **Width:** Separator view width.
- **Color:** Separator view background color.
```swift
JNSegmentedCollectionItemVerticalSeparatorOptions (
heigthRatio: 0.3,
width: 1.0,
color: UIColor.blue
)
```
## Example
To run the example project, clone the repo, and run `pod install` from the Example directory first.
## Author
Jayel Zaghmoutt, Mohammad Nabulsi & Mohammad Ihmouda
## License
JNSegmentedControl is available under the MIT license. See the [LICENSE](https://github.com/JNDisrupter/JNSegmentedControl/blob/master/LICENSE) file for more info.