How many of you wanted to have your own activity indicator in your beautiful apps? How many of you wanted to replicate the YouTube spinner? How many of you wanted UIActivityIndicatorView to be fully customizable? I believe, many.
So today, I’m glad to introduce you our new (after KSAvatarCell) resource, called
KSSpinner. It is simple, yet powerful, re-invented UIActivityIndicatorView that uses subviews as segments and assigns opacity to them. Let’s take a look at the advantages:
- Fully customizable – you can customize everything in your ksspinner, beginning with number of segments and finishing with the speed.
- Built for UIAppearance proxy – your spinners can be customized globally, once and for all, using UIAppearance proxy (e.g. in your app delegate)
- It calculates its size itself – the
-estimatedSpinnerSize method returns you the size of your spinner, so you can use these values in your frame.
- Everything is licensed under the MIT License. No attribution is required (but it would be nice if you wrote somewhere about the spinner :))
Let’s begin the (very) short tutorial.
There are no dependencies, no linker flags, no external libraries required to run KSSpinner. Everything you have to do is import the QuartzCore.framework. Let’s create a simple spinner which is identical to the UIActivityIndicatorView. (Note: KSSpinner, by default is like black, UIActivityIndicatorStyleWhiteLarge. You don’t have to set these values to your spinner if you want it to be like the built-in one – this is just to show you, what is it all about).
KSSpinner *spinner [[KSSpinner alloc] init];
spinner.tintColor = [UIColor blackColor]; // the color
spinner.numberOfSegments = 12; // number of lines
spinner.segmentLength = 8.0; // length (see docs for more info)
spinner.segmentWidth = 3.0; // width (also see docs for more info)
spinner.radius = 7.0; // the radius
spinner.trailLength = 0.6; // the trial length (0.6 = 60% of the time of one round)
spinner.maximumOpacity = 1.0; // the opacity of the leading line
spinner.minimumOpacity = 0.2; // the opacity of the last line
spinner.speed = 1.0; // speed is measured in rounds per second
spinner.frame = CGRectMake(10, 10, spinner.estimatedSpinnerSize.width, spinner.estimatedSpinnerSize.height);
// the above code is equivalent to
UIActivityIndicatorView *uiaiv = [[UIActivityIndicatorView alloc] initWithStyle:UIActivityIndicatorStyleWhiteLarge];
uiaiv.color = [UIColor blackColor];
uiaiv.frame = CGRectMake(10, 10, 37, 37); // the 37x37 is built-in, can't change (instead of our spinner)
What did we just do? We created the spinner using all 9 available properties. Believe me, you can create almost every shape for your spinner using these. You can create a YouTube-like frustrating buffering spinner as well as sci-fi like spinner with 3 circles. You can see the ‘demo’ in the post’s featured image. Everything below the ‘KSSpinner’ text is drawn by an iPad using random parameters of KSSpinner!
The KSSpinner source files and demo project are available, as we announced yesterday, on our GitHub repository. The full documentation is available in the repository wiki.
By the way…
The KSSpinner class is part of our new resource pack for iOS (and OSX, soon) developers, called KSToolkit. All incoming resources (there are lots of them, really) will be posted in the brand new KSToolkit repository. We will notify you on the blog (and soon with subscriptions) about the updates.
So here it is, our UIActivityIndicatorView replacement. Use it with imagination! ;)