Skip to content

SwiftUI: Segmented Control Animation

Last updated on April 11, 2021

There isn’t a full segmented control view where you could scroll the entire view from one segment to another segment which is a bummer and that is totally fine because with SwiftUI, you can achieve almost anything.

Here, you will create a full segmented scrolling effect.

Stacks

  • Xcode 12.3
  • SwiftUI

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Setting up the Segment Control

You will create a state to keep the value of the selected segmented control.

You will embed everything within the VStack and you will use SegmentedPickerStyle for the picker style.

Each segment is assigned with its own tag which is the common practice.

And you will see a segmented control with 2 segments

Setting up the First Segment Control View

Within the same VStack, you will utilise the GeometryReader to help with animation transition from a segment to another segment.

On the first view of the segment control, you will at least see a Labelthat shows both image and text and also an Image.

Your first screen will look as followed with all the components you have added.

Setting up the Second Segment Control View

Within the same ZStack, you will create another VStack which belongs to the second segment control view.

It’s a pretty repetitive thing if you can compare the codes, and the only difference would be on the offset .

Segment Control Animation

And now, you have a full view of working segment control that has some animation transition.

Where to go From Here

SwiftUI has definitely bring the animation to a whole new level and also ease of use. I love SwiftUI! Check out more articles that I’ve wrote about SwiftUI.

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *