Close Menu

resegmentedcontrol

ReSegmentedControl

ReSegmentedControl is a customizable replacement for the default UISegmentedControl in iOS apps. It provides additional features and a more modern design approach. With ReSegmentedControl, you can create segmented controls that match your app’s theme and improve the user experience.

Features

  • Highly customizable appearance
  • Supports both text and image segments
  • Intuitive API for easy integration
  • Rich styling options: background colors, text colors, corner radius, etc.
  • Allows selection indicator customization
  • Supports both horizontal and vertical layouts
  • Built-in support for dark and light mode
  • Smooth animations and transitions

Installation

To integrate ReSegmentedControl into your project, follow these steps:

CocoaPods

1. Install CocoaPods by running the following command in Terminal:

$ sudo gem install cocoapods

2. Create a Podfile in your project directory:

$ cd /path/to/your/project
$ pod init

3. Add ReSegmentedControl to your Podfile:

platform :ios, '10.0'
target 'YourProject' do
  use_frameworks!
  pod 'ReSegmentedControl'
end

4. Install the pod by running the following command:

$ pod install

5. Open the newly created xcworkspace file.

Carthage

1. Install Carthage by running the following command in Terminal:

$ brew update
$ brew install carthage

2. Create a Cartfile in your project directory:

$ cd /path/to/your/project
$ touch Cartfile

3. Add this line to your Cartfile:

github "resegmentedcontrol/ReSegmentedControl"

4. Install the dependencies by running the following command:

$ carthage update

5. Drag the built .framework files from the Carthage directory into your Xcode project.

Usage

1. Import the ReSegmentedControl module:

import ReSegmentedControl

2. Create an instance of ReSegmentedControl:

let segmentedControl = ReSegmentedControl()

3. Customize the appearance and behavior:

// Set the segments
segmentedControl.segments = ["Segment 1", "Segment 2", "Segment 3"]

// Customize the appearance
segmentedControl.backgroundColor = .white
segmentedControl.selectedBackgroundColor = .blue
segmentedControl.segmentTextColor = .black
segmentedControl.selectedSegmentTextColor = .white

// Set the selection indicator style
segmentedControl.selectionIndicatorStyle = .box

// Add target for value changed event
segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)

// Add as a subview
view.addSubview(segmentedControl)

Customization

ReSegmentedControl offers a wide range of customization options to match your app’s style and requirements. You can customize the following properties:

General

  • backgroundColor: The background color of the segmented control.
  • selectedBackgroundColor: The background color of the selected segment.
  • cornerRadius: The corner radius of the segmented control.

Text

  • segmentTextColor: The text color of the segments.
  • selectedSegmentTextColor: The text color of the selected segment.
  • segmentFont: The font of the segments.

Images

  • segmentImages: Custom images for the segments.
  • selectedSegmentImages: Custom images for the selected segments.

Selection Indicator

The selection indicator is the visual indication of the currently selected segment. You can customize the style and appearance of the selection indicator using the following properties:

  • selectionIndicatorStyle: The style of the selection indicator (box or underline).
  • selectionIndicatorColor: The color of the selection indicator.
  • selectionIndicatorHeight: The height of the selection indicator.
  • selectionIndicatorCornerRadius: The corner radius of the selection indicator (for the box style).

Delegate

ReSegmentedControl provides a delegate protocol called ReSegmentedControlDelegate. You can use this delegate to receive callbacks and handle events. Some of the available delegate methods include:

  • func segmentedControl(_ segmentedControl: ReSegmentedControl, didSelectSegmentAt index: Int): Called when a segment is selected.
  • func segmentedControl(_ segmentedControl: ReSegmentedControl, didDeselectSegmentAt index: Int): Called when a segment is deselected.

Examples

Here are some examples showcasing different use cases:

Example 1: Basic Usage

In this example, we’ll create a simple ReSegmentedControl with three segments:

import UIKit
import ReSegmentedControl

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let segmentedControl = ReSegmentedControl()
        segmentedControl.segments = ["Segment 1", "Segment 2", "Segment 3"]
        segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)
        view.addSubview(segmentedControl)
    }
    
    @objc func segmentedControlValueChanged(_ segmentedControl: ReSegmentedControl) {
        let selectedSegmentIndex = segmentedControl.selectedSegmentIndex
        // Handle the selected segment change
    }
}

Example 2: Customization

In this example, we’ll customize the appearance of the ReSegmentedControl:

// Customize the appearance
segmentedControl.backgroundColor = #colorLiteral(red: 0.965, green: 0.965, blue: 0.965, alpha: 1.0)
segmentedControl.selectedBackgroundColor = #colorLiteral(red: 0.129, green: 0.588, blue: 0.953, alpha: 1.0)
segmentedControl.segmentTextColor = .black
segmentedControl.selectedSegmentTextColor = .white
segmentedControl.selectionIndicatorStyle = .underline
segmentedControl.selectionIndicatorColor = .red
segmentedControl.selectionIndicatorHeight = 2.0
segmentedControl.segmentFont = UIFont.boldSystemFont(ofSize: 14)

Example 3: Delegate

In this example, we’ll use the delegate methods of ReSegmentedControl:

class ViewController: UIViewController, ReSegmentedControlDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let segmentedControl = ReSegmentedControl()
        segmentedControl.segments = ["Segment 1", "Segment 2"]
        segmentedControl.delegate = self
        view.addSubview(segmentedControl)
    }
    
    func segmentedControl(_ segmentedControl: ReSegmentedControl, didSelectSegmentAt index: Int) {
        // Handle segment selection
        print("Selected segment at index \(index)")
    }
    
    func segmentedControl(_ segmentedControl: ReSegmentedControl, didDeselectSegmentAt index: Int) {
        // Handle segment deselection
        print("Deselected segment at index \(index)")
    }
}

Support

If you have any questions, issues, or suggestions, please feel free to reach out to us:

Email: support@resegmentedcontrol.com

GitHub: https://github.com/resegmentedcontrol/ReSegmentedControl