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

$ gem install cocoapods

To integrate CustomizableSegmentedControl into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '14.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'CustomizableSegmentedControl'
end

Then, run the following command:

$ pod install

Manually

Just copy from CustomizableSegmentedControl.swift file and paste it to your project.

Usage

Just setup CustomizableSegmentedControl view with parameters:

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
• LinkedIn
• Other social networks

License

CustomizableSegmentedControl is available under the MIT license. See the LICENSE file for more info.