Implement Custom Activity Indicator With The SwiftUI

As you may know, SwiftUI does not have too many elegant indicators as the UIKit itself. So I have decided to implement some of the popular indicators that are already exist for the UIKit, but natively in pure SwiftUI. So it can be used for the iOS 13 with the SwiftUI 1.0 alongside with the newly widgets that apple is introduced currently. Since you know

UIKit views wrapped in UIViewRepresentable will not work in WidgetKit. When the views are encoded from your extension to be displayed they will appear blank

— by Frameworks Engineer 

So I planned to implement this following these steps:

1. Find popular animations for the `ActivityIndicator`
2. Implement animations in the pure SwiftUI (compatible with v1.0)
3. Make it available as a simple view
4. Add a modifier for the style of the Activity Indicator

Find popular animations

After some research, I’ve found some popular animations and I decided to start with this:

Implement animations in the pure SwiftUI (compatible with v1.0)

We aim for making these attributes dynamic:

1. The count of the elements
2. The spacing between elements
3. The cornerRadius of each element
4. The range that we want each bar to be scaled
5. The range of opacity that we want each bar to be applied with
6. An animating state for controlling the animation

So we start with this:

Note that we have to implement the isAnimating variable as a @Binding because we want to control it from the outside of the view.

Also, make the count unsigned because negative counts doesn’t make any sense.

As an overview, we need some item to be repeated and create the whole indicator. To creating them, we need access to the index of the element along side geometry of the indicator, so we can calculate the position of that item:

Note that we want all items to be fitted inside the main view, and aspectRatio(contentMode: .fit) is here to help us with that.

For this specific animation, we need to apply horizontal offset to each element due to it’s index and apply proper scaling and and opacity to it:

There is 3 helpers here:

These two return correct bound of the corresponding range.

And this is just for the sake of compiling time. It returns the size of the element.

Make it available as a simple view

We need a simple initializer with some default values, so:

So far so good! Now we can use it like:

Note that how default modifiers like the foregroundColor are working as expected?

The demo view is already as simple as this UsageDemoView()

Add a modifier for the style of the Activity Indicator

For now we are passing style arguments at the initialization time of the indicator. But its not very ‘SwiftUI’ly. To have a modifier for that, we are going. to extend it with a function that takes style and returns a new view as default modifiers are doing this. This will be as symple as this:

Now we can modify the indicator like a native Apple designed API:

Full Project

You can see the full project expanded with. many more elegant Activity Indicators [Here In Github](https://github.com/MojtabaHs/iActivityIndicator).

MojtabaHs/iActivityIndicator