Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inxel/customizablesegmentedcontrol
Customizable segmented control in SwiftUI
https://github.com/inxel/customizablesegmentedcontrol
ios ios-ui swift swiftui swiftui-animations swiftui-components
Last synced: about 2 months ago
JSON representation
Customizable segmented control in SwiftUI
- Host: GitHub
- URL: https://github.com/inxel/customizablesegmentedcontrol
- Owner: Inxel
- License: mit
- Created: 2023-04-21T14:30:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-22T17:36:08.000Z (10 months ago)
- Last Synced: 2024-11-14T02:36:26.776Z (about 2 months ago)
- Topics: ios, ios-ui, swift, swiftui, swiftui-animations, swiftui-components
- Language: Swift
- Homepage:
- Size: 53.7 KB
- Stars: 57
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CustomizableSegmentedControl
If you're bored with standard segmented control, this framework is for you! `CustomizableSegmentedControl` is a customizable segmented control written in SwiftUI 2.0.
# Features
- Supports any views
- Works with blend modes
- Works with right-to-left languages
- Easy to use
# Requirements
- iOS 14.0+
- Swift 5+
# Installation
### SPM
Add `https://github.com/Inxel/CustomizableSegmentedControl` using Package Dependecies.
### [CocoaPods](https://cocoapods.org/)
```bash
$ gem install cocoapods
```
To integrate `CustomizableSegmentedControl` into your Xcode project using CocoaPods, specify it in your `Podfile`:
```ruby
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '14.0'
use_frameworks!
target '' do
pod 'CustomizableSegmentedControl'
end
```
Then, run the following command:
```bash
$ pod install
```
### Manually
Just copy from `CustomizableSegmentedControl.swift` file and paste it to your project.
# Usage
Just setup `CustomizableSegmentedControl` view with parameters:
```swift
CustomizableSegmentedControl(
selection: $selection,
options: [.one, .two, .three],
selectionView: {
Color.white
.clipShape(RoundedRectangle(cornerRadius: 10))
},
segmentContent: { option, isPressed in
HStack(spacing: 4) {
Text(option.title)
.font(.system(size: 16, weight: .semibold, design: .rounded))
option.imageName.map(Image.init(systemName:))
}
.foregroundColor(.white.opacity(isPressed ? 0.7 : 1))
.lineLimit(1)
.padding(.vertical, 10)
.padding(.horizontal, 12)
.frame(maxWidth: .infinity)
}
)
.insets(.all, 4)
.segmentedControlContentStyle(.blendMode())
.segmentedControl(interSegmentSpacing: 2)
.segmentedControlSlidingAnimation(.bouncy)
.background(Color.blue)
.clipShape(RoundedRectangle(cornerRadius: 14))
```
Includes a small demo project showing how to use and customize it. Just clone the repo and build the Example project.
# Accessibility
Every segment of control supports voiceover. By default, there is a text like "Selected, first option, one of three, button".
You can change accessibility value (in example it's "one of three") with CustomizableSegmentedControl extension `segmentAccessibilityValue` which contains completion with index of current segment and total number of options.
# Contribution
Feel free to submit Pull Requests or send me your feedback and suggestions!
# Author
Artyom Zagoskin
- [GitHub](https://github.com/inxel)
- [LinkedIn](https://www.linkedin.com/in/artyomzagoskin/)
- [Other social networks](http://inxel.github.io/MyLinks/)
# License
`CustomizableSegmentedControl` is available under the MIT license. See the LICENSE file for more info.