Introducing KSSpinner (and KSToolkit)

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! ;)

Welcome, GitHub!

Recently I decided to move all of my code resources to GitHub. I think it’s a good idea since the version control is super-clear and super-easy to manage. And I can also commit updates to existing resources without notifying you on the blog. So here it is, my new, shiny GitHub profile with kashivcom-tuts repository. I will be posting new code samples of my tutorials over there. Relevant blog posts have been updated, so there is no sign of old (and not working, by the way) links.

PS: I am preparing something new for you, so stay tuned! :)

How to create a UITableViewCell with attributed text and make it highlightable

When I was creating my new app, iRachunek using iOS6 developer betas I wanted to make use of the new NSAttributedString class and create some cells using UILabel’s new attributedText property. As soon as I ran my project in Simulator I found out that when highlighting cells the attributed text doesn’t turn white. I asked on but nobody answered my question. So I decided to make it myself and ended in subclassing both UILabel and UITableViewCell. Here’s what I figured:

1. There can’t exist anything like highlightedAttributedTextColor

Since NSAttributedString is a string with many attributes, I can’t assign a ‘highlighted’ text color to it. What I have to do, is create a new NSAS property called highlightedAttributedText in my UILabel’s subclass. The next thing was making sure that I sore somewhere the original attributedText contents, so I’ve created a private NSAS iVar called attributedTextCopy. And then the method subclassing mayhem began.

The first method in the queue was -setAttributedText:, because I had to store the copy instance. The next, most important method, was, of course, -setHighlighted:. If you look into the code, you will se a strange BOOL: shouldChangeCopyInstance. What’s the point? Well, the point is, that when we change the attributedText property the attributedTextCopy mustn’t take the new value and I suppose you know why. The last method is the common -initWithFrame: to make sure that our BOOL is true on init.

So, we’ve successfully created an UILabel subclass. The next thing I’ve figured out was…

2. UITableViewCell labels must be instances of our new subclass

So, nothing difficult. Just to make sure you understand: I am using -setValue:ForKey: because both textLabel and detailTextLabel are readonly properties. I also can’t write simple _textLabel = ..., because this iVar is private*. After initialization, we set the highlightedColors to white for both labels.

* – this is not part of any private api, it’s a visibility aspect.

And we’re… done.

Now all you have to do is to import KSHighlightableAttributedCell.h and create the cells:

static NSString *cellID = @"Cell";
KSHighlightableAttributedCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if(cell == nil) cell = [[KSHighlightableAttributedCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellID];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
NSMutableAttributedString *textLabelStr = [[NSMutableAttributedString alloc] initWithString:@"Your email (required)"];
[textLabelStr setAttributes:@{NSForegroundColorAttributeName : [UIColor lightGrayColor], NSFontAttributeName : [UIFont systemFontOfSize:17]} range:NSMakeRange(11, 10)];
cell.textLabel.attributedText = textLabelStr;
NSMutableAttributedString *textLabelStrH = [[NSMutableAttributedString alloc] initWithString:@"Your email (required)" attributes:@{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName : [UIFont boldSystemFontOfSize:17]}];
[textLabelStrH setAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName : [UIFont systemFontOfSize:17]} range:NSMakeRange(11, 10)];
cell.textLabel.highlightedAttributedText = textLabelStrH;
cell.detailTextLabel.text = @"n/a";
Interface Builder compatibility
You may also use Storyboards and NIBs to initialize the cell.

I hope this tutorial was useful. If so, don’t forget to follow us on Twitter and/or like us on Facebook.

The full source code is available on GitHub.

AC:R Ottoman Crest (png, wallpaper, csh)

Every Assassin’s Creed: Revelations® player wanted to have this t-shirt. But, as you can see, there is none left. Why? Because of the Ottoman Crest. I was fascinated as well, so I decided to make my own logo using only photoshop vector paths. And here’s the result, which I’m giving it to you for free!

* size of the original shape, but it’s a vector – feel free to resize it!

There’s no license, you can use it for free, just remember that original concept was thought by Ubisoft® and these resources are provided by ;)

Create a Twitter-like UITabBar using UIAppearance proxy

iOS5 brings us many different methods to customize the appearance of our apps. Lots of apps use these fabulous features. Including one popular app: Twitter. I’ve seen many tutorials about using the UIAppearance proxy, but only a few of them were ‘here’s-the-result’-type. One of them is User Interface Customization in iOS 5 by Ray Wenderlich, which is brilliant example of clear tutorial with nasty result.

Today I want to teach you how to make a Twitter-like UITabBar which is very clean and good-looking interface element using only Photoshop and Xcode.

Read more »