Segmented Progress Bar on iOS with UIKit

Step-by-step guide on implementing a segmented progress bar on iOS with UIKit

Design by Salman Rahman (Behance)

Introduction

In this tutorial, we will walk you through the step-by-step process of creating a segmented progress bar using UIKit. This segmented bar can be used to display progress or indicate steps in a process, enhancing the user experience in your iOS applications.

Step 1: Create a New UIView Subclass

First, create a new UIView subclass named SegmentBarView. This will be the main component for our segmented progress bar.

import UIKit

final class SegmentBarView: UIView {

}

Step 2: Define the Model

Define a Model struct inside the SegmentBarView to hold the configuration for the segmented bar. This struct will include an array of colors and a spacing value.

import UIKit

final class SegmentBarView: UIView {

    // MARK: - Model

    struct Model {
        let colors: [UIColor]
        let spacing: CGFloat
    }

    private var model: Model?
}

Step 3: Add a Method to Set the Model