SegmentPageKit

SegmentPageKit is a powerful and flexible UI component for iOS applications, combining a segmented control with a page view controller. It allows developers to create a seamless and interactive tabbed interface with ease.

Demo

Demo.mp4

Features

Customizable segmented control with adjustable colors and titles
Smooth integration with UIPageViewController for easy page transitions
Automatic updating of segment and page view on selection
Highly configurable and easy to use

Installation

Swift Package Manager

To integrate SegmentPageKit into your project using Swift Package Manager:

File > Swift Packages > Add Package Dependency
Add https://github.com/vparjunmohan/SegmentPageKit.git

Usage

Here is a basic example of how to set up SegmentPageKit in your view controller:

import UIKit
import SegmentPageKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let titles = ["Home", "Profile", "Settings"]
        let homeVC = HomeViewController()
        let profileVC = ProfileViewController()
        let settingsVC = SettingnsViewController()
        

        let segmentedVC = SPViewController(titles: titles, viewControllers: [homeVC, profileVC, settingsVC])

        addChild(segmentedVC)
        view.addSubview(segmentedVC.view)
        segmentedVC.view.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            segmentedVC.view.topAnchor.constraint(equalTo: view.topAnchor),
            segmentedVC.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            segmentedVC.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            segmentedVC.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        segmentedVC.didMove(toParent: self)
    }
}

If segmented controllers are not required and if you want to use only the segmented tabs, the following initializer can be used:

import UIKit
import SegmentPageKit

class ViewController: UIViewController {
    
    private let segmentControl: SPSegment = {
        let titles = ["Action", "Drama", "Horror", "Romance", "Sci-fi", "Thriller", "Fantasy", "Crime", "Anime"]
        let control = SPSegment(frame: .zero, titles: titles)
        control.translatesAutoresizingMaskIntoConstraints = false
        return control
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(segmentControl)
        segmentControl.delegate = self
        
        NSLayoutConstraint.activate([
            segmentControl.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            segmentControl.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            segmentControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            segmentControl.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
}

//MARK: - SPSEGMENT DELEGATE
extension ViewController: SPSegmentDelegate {
    func didTapSegment(index: Int) {
        print("segment index \(index)")
    }
}

Customization

SegmentPageKit allows for extensive customization of the segmented control appearance and behavior:

Segmentor Properties

segmentColorNormal: The background color of the unselected segments.
segmentColorSelected: The background color of the selected segment.
titleColorNormal: The color of the unselected segment titles.
titleColorSelected: The color of the selected segment title.
indicatorColor: The color of the indicator.
indicatorHeight: The height of the indicator.
shouldHideIndicator: Hide/show the segment indicator.
segmentSpacing: The spacing between each segment.
selectedSegmentIndex: The index of segment which is selected by default.
segmentFont: The font of segment titles.

Example:

segmentedVC.segmentor.segmentColorNormal = .lightGray // default: UIColor.clear
segmentedVC.segmentor.segmentColorSelected = .blue // default: UIColor.clear
segmentedVC.segmentor.titleColorNormal = .black // default: UIColor.systemGray
segmentedVC.segmentor.titleColorSelected = .blue // default: UIColor.systemBlue
segmentedVC.segmentor.indicatorColor = .red // default: UIColor.clear
segmentedVC.segmentor.indicatorHeight = 5.0 // default: 2.0
segmentedVC.segmentor.shouldHideIndicator = true // default: false
segmentedVC.segmentor.segmentSpacing = 10 // default: CGFloat.zero
segmentedVC.segmentor.selectedSegmentIndex = 0 // default: 0
segmentedVC.segmentor.segmentFont = UIFont(name: "Poppins-Bold", size: 14) // default: UIFont.systemFont(ofSize: 14)

Contributing

Contributions are welcome! If you have any suggestions or improvements, feel free to open an issue or submit a pull request.

As a rule of thumb, if you're proposing an API-breaking change or a change to existing functionality, consider proposing it by opening an issue, rather than a pull request; we'll use the issue as a public forum for discussing whether the proposal makes sense or not. See CONTRIBUTING for more details.

License

SegmentPageKit is available under the MIT license. See LICENSE for details.

vparjunmohan/SegmentPageKit