Since I started to work on my Computer Science Thesis here at Trabe Soluciones, I’ve written some iOS open source libraries. Probably the biggest one is PrettyKit. You can find it at Github.

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:

PrettyKit possibilities

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.

Challenge accepted!

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:

1. Go to the Interface Builder file, and change the classes of the navigation bar and tab bar to PrettyNavigationBar and PrettyTabBar.

2. Let’s change now the cells’ appearance. First, #import "PrettyKit.h". In your tableView:cellForRowAtIndexPath:, change all references to UITableViewCell to PrettyTableViewCell. And for each cell you work with, add this line [cell prepareForTableView:tableView indexPath:indexPath];. And in your tableView:heightForRowAtIndexPath: add [PrettyTableViewCell tableView:tableView neededHeightForIndexPath:indexPath] to your desired height. Nice, huh?

3. 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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    PrettyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[PrettyTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.cornerRadius = 5;
    }

    [cell prepareForTableView:tableView indexPath:indexPath];
    cell.textLabel.text = [NSString stringWithFormat:@"Text %d",indexPath.row];

    return cell;
}

1
2
3

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return tableView.rowHeight + [PrettyTableViewCell tableView:tableView neededHeightForIndexPath:indexPath];
}

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

gridCell.numberOfElements = 3;
[gridCell setText:@"One" atIndex:0];
[gridCell setDetailText:@"Detail Text" atIndex:0];
[gridCell setText:@"Two" atIndex:1];
[gridCell setDetailText:@"Detail Text" atIndex:1];
[gridCell setText:@"Three" atIndex:2];
[gridCell setDetailText:@"Detail Text" atIndex:2];

Or this line, if you’re using the segmented control row:

1

segmentedCell.titles = [NSArray arrayWithObjects:@"1", @"2", @"3", @"4", nil];

And they use blocks, so it’s easy to add a callback when any button is pressed:

1
2
3
4

gridCell.actionBlock = ^(NSIndexPath *indexPath, int selectedIndex) {
  // whatever you want to do
};

Performance

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.

Documentation

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.

That’s all folks. If you’ve got any doubt or opinion to share, comment here, tweet me at @vicpenap or visit the project’s page at github.