What is PrettyKit?
We’ve lately been seeing an interesting change on the interfaces of many iOS apps. The glossy effects and gray striped backgrounds nowadays look boring and démodé, and the tendency points to the use of gradients and patterns.
The latest apps introduced by Apple, such as Reminders, Game Center or Find My Friends use patterned backgrounds or leather-like navigation bars, for example. What’s more, a new API to allow more appearance customization has been introduced in the iOS SDK. Although it is an interesting step, it is not big enough, as this API is only compatible with iOS 5 or higher and, in some cases, the new appearance’s properties might be not enough.
And here’s where PrettyKit comes.
PrettyKit is a library composed by a set of new widgets and UIKit subclasses that gives you more control to customize your interfaces. You will be able to easily change backgrounds, draw gradients, drop shadows and more. This library will help you to beautify your iOS apps and give them a modern look. Besides, it is fully compatible with iOS 4.0.
Besides, if you need even more control, you can subclass any Pretty class, which will give you even more possibilities. Or, if you’re feeling brave, fork the code, it’s open source ;)
Check this video to see what you can do with PrettyKit:
You might say:
Until now you’ve only said that PrettyKit is cool and blah blah, but I want to see if it’s actually that cool.
Let’s say the interface of your application has been built with Interface Builder and it looks like this:
We’ll now apply some PrettyKit customization, take a look:
Go to the Interface Builder file, and change the classes of the navigation bar and tab bar to PrettyNavigationBar and PrettyTabBar.
Let’s change now the cells’ appearance. First,
#import "PrettyKit.h". In your
tableView:cellForRowAtIndexPath:, change all references to
PrettyTableViewCell. And for each cell you work with, add this line
[cell prepareForTableView:tableView indexPath:indexPath];. And in your
[PrettyTableViewCell tableView:tableView neededHeightForIndexPath:indexPath]to your desired height. Nice, huh?
The final touches. First of all, the background is still stripped, so we’ll create a new one and we’ll set it. Then, let’s make the cells even nicer, less rounded. To change the cell’s corner radius, just do this when initializing them:
cell.cornerRadius = 5;.
This is the final code to generate the cells. Lines 5 and 7 have changed the
UITableViewCell reference to
PrettyTableViewCell. Lines 8 and 11 are new. And
heightForRow now has a sum. That’s all. That simple.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 2 3
Not convinced yet?
OK. Have you seen those several-button cells in the video?
They are part of PrettyKit. And using them is really easy, look at this code:
1 2 3 4 5 6 7
Or this line, if you’re using the segmented control row:
And they use blocks, so it’s easy to add a callback when any button is pressed:
1 2 3 4
Take a look at this Twitter article about smooth animation. As they state, jerky scrolling ruins the user experience. PrettyKit is entirely drawn with CoreGraphics. That means it’s really fast, and the scrolling, which usually causes headaches when customizing cells, is very smooth.
PrettyKit has a very nice documentation, that might help you more than once. It is written with appledoc syntax, so it will integrate very well with the rest of your project when generating the docs.