How to Recreate the Default iOS ActivityIndicator Using SwiftUI | by Nikhil Vinod | May, 2022

Leverage gradients and circles

Picture by Mike van den Bos on Unsplash

An UIActivityIndicatorView is a view that reveals {that a} process is in progress.
Immediately we are going to break down the default iOS exercise indicator in SwiftUI utilizing gradients and circles.

Word: I’m undecided the default iOS exercise indicator is constructed the identical approach.

A quick picture set of how we’re going to break down the exercise indicator view

We can have two circles. One internal circle and one outer circle.

The internal circle will probably be used to masks the cross diameter bars. The outer circle will probably be used to place an angular gradient masks and that circle will probably be rotated with an animation. The cross diameter bar is nothing however the Exercise Indicator bar. It’s going to at all times stay static.

Now you may how bought an outlook on how we’re going to obtain this Exercise Indicator.

We are going to begin with a Z-Stack. We are going to create a Z-Stack within the content material view. The Z-Stack will comprise an inner-circle, outer-circle, and cross diameter bars. This can begin from the Z-Stack middle.

We are going to setup the Z-Stack first after which we are going to create one other View and identify it CustomActivityIndicatorBar with a binding var enter let’s identify that enter as rotationAngle .

Right here the rotationAngle is used to attract the CustomActivityIndicatorBar at totally different positions. We are going to use that rotationAngle to set the rotationEffect angle. Be certain that the CustomActivityIndicatorBar ‘s rotationEffect anchor level must be centered .

Now our CustomActivityIndicatorBar is ready. We simply want to provide totally different angles and set totally different CustomActivityIndicatorBar for these totally different angles.

Now let’s create the OuterGradientCircle view. We simply need to create a Circle and fill it with an Angular Gradient with a gradient:

static let gradientColors = Gradient(colours: [Color(UIColor(white: 1, alpha: 0.3)), Color(UIColor(white: 1, alpha: 0.9)), Color(UIColor(white: 1, alpha: 0.3))])

Use the next gradient and use this gradient to fill the circle.

Now as soon as we’re accomplished creating the OuterGradientCircle and CustomActivityIndicatorBar we are going to transfer to our content material view and begin organising our core settings.

Right here we can have two State variables one isAnimating to inform the view that it must animate means the spinner outer circle will begin spinning. And the opposite one capsuleAngles which can maintain the totally different angle values for the CustomActivityIndicatorBar . This can place a number of CustomActivityIndicatorBar with respective angles for every with a middle rotational anchor.

Enter capsuleAngles with [0, 30, 60, 90, 120, 150] values.

Now we are going to create a number of CustomActivityIndicatorBar . For that, we are going to run a ForEach loop on capsuleAngles. And we are going to go the rotationAngle for the CustomActivityIndicatorBar with the capsuleAngle because the ForEach merchandise.

Additionally, we are going to set the frames for the internal circle and outer circle. The outer circle ought to have double the scale of the internal circle. We simply must set the animation and kaboom a working exercise indicator is up and prepared for us. The content material view may be referred to beneath:

More Posts