Creating a segmented progress bar in SwiftUI with Swift Playgrounds

Building custom controls in a declarative style is easy with SwiftUI — and you can do it all on an iPad if you like

Apple’s declarative visual design framework SwiftUI, introduced in 2019, ushered in a very different way of thinking for those of us used to building user interfaces in Xcode’s Interface Builder.

While those differences can take a while to get used to, experience in building web components with a framework like ReactJS can be hugely beneficial to understanding how SwiftUI components composite together to create larger views.

For a project I’m currently working on, I wanted a view that showed how far along in a series of steps a particular project has got. Each project progresses through a fixed number of stages, but the amount of time they take within each isn’t fixed. That means that expressing step 3 of 7 as, say, 42% wouldn’t necessarily be meaningful or accurate.

Instead, I want an indicator that shows progress as a number of steps, with the completed ones showing clearly. Something like this:

SwiftUI makes it super easy to create custom views, and Xcode’s ability to show live previews alongside your code as you design is brilliant…