iOS Segmented Control
We’ll rebuild this segmented control component that I also published as a public package (find it in the Insert Menu).
The segmented control (UISegmentedControl in developer speak) has been one of iOS’s built-in UI elements since the launch of the first iPhone. Its look changed in iOS 13, and this new version is the one we’re making.
Our component will look and feel the same as the real deal, and it’ll be a smart component, one that you can use inside other components or with overrides.
It can switch between Light Mode and Dark Mode, and you can set its selected segment by index number (as in the example below), but also by name (e.g., ‘Mango’ or ‘🥭’).
This control is a bit more complicated than a simple button or switch, so we’ll build it step by step.
We start with a basic version that simply displays the segments. We then make the segments tappable and add the moving selection indicator, the separators, etc.
You can start with Version 1 and completely rebuild the component, or just compare the different versions to get an understanding of the code changes.
- Version 1 — The starter version has property controls and displays the options as segments. It isn’t yet possible to select an option, though.
- Version 2 — Adding state: You can tap to select an option, which will be displayed in bold type.
- Version 3 — Using the property controls, you can set which option should initially be selected.
- Version 4 — We add the selection indicator that animates to the selected option.
- Version 5 — The segments will dynamically resize so that you can have less than five options and also change the component’s width.
- Version 6 — We add separators (thin gray lines) between the segments.
- Version 7 — Another animation: fading out the separators left and right of the selected segment.
- Version 8 — The component instantly updates on the canvas and in the preview when you change its selected segment or options.
- Version 9 — The component can share its currently selected option through an event callback property.
- Version 10 — We add TypeScript for better reusability and make the component respond to common frame properties.
- Example prototypes — Five examples of how to use this component in a prototype.