This is a repost of my original article which I posted on my own website. But since it is related to iOS development, I thought it might be interesting for the Cocoaheads Belgium folks as well.

Colors Everywhere

Well, after my previous post I continued doing some more work on my UI and trying to create my own Style for UITableViews and UITableViewCells. I ended up using the same colors over and over again in all different places in my application. In the end I had code in my UITTableViewController which set the Color for the Background and the navigation bar :

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar
    // for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
    [[self navigationController] navigationBar].tintColor = [UIColor brownColor];
    UIImage *img = [UIImage imageNamed:@"BG_Pink"];
    [[self tableView] setBackgroundColor:[UIColor colorWithPatternImage:img]];
}

This was all working out quite nicely …

Using the same color scheme in other Views

Data Entry View with ColorScheme

Of course, my application consits of a few different UITableViews and I even added a data entry View and a detail view. As you can see, the data entry view is using the same background color for the UITableView and the UITableViewCells are using the same color as my other UITableView as well.

At some point, I wanted to change the color scheme I was using (it was more pinkish at the start), and use something more Orange or brown like. Sadly this required me to change the color in every spot where I was using it. When I tested it on my phone, it looked horrible, since I forgot to change a few colors.

Since I’m still developing some basic ideas for the app, and the color scheme might change a few times during the Development cycle, I started thinking. There surely must be an easier way to handle this, which wouldn’t require me to change the colors in 10 different places.

Of course, I could subclass UIColor and add my own colors to it, but I wanted to try a different approach

The Categories Approach

During the iOS bootcamp I took at Big Nerd Ranch Europe a while back, we touched on the subject of Categories. Categories allow you to extend a class without the need to Subclass it. Using Categories I could quickly add a few methods to UIColor whithout the need to create a new Subclass.

Creating a Category in UIColor

Creating a new category is actually quite easy. In my case, I wanted a category on UIColor so I could extend it. I created a new Header and Implementation file and called it UIColor+MyApp.h and UIColor+MyApp.c

The Header File

In the Header file UIColor+MyApp.h I added the following code :

//
//  UIColor+MyApp.h
//
//  Created by Stefaan Lesage on 11/11/10.
//  Copyright 2010 Devia. All rights reserved.
//

#import 

@interface UIColor (MyApp) 

+ (UIColor *)myTableViewBackgroundColor;
+ (UIColor *)myTableCellBackgroundColor;

@end

This simply declares a category MyApp on UIColor, and defines 2 new methods on it. myTableViewBackgroundColor which will return the Default color which should be used as the background for my UITableViews, and myTableCellBackgroundColor which defines the default color which should be used as the background for my UITableViewCells (and in some other places in my app).

The Implementation

In the Implementation file UIColor+MyApp.m I added the following code :

//
//  UIColor+MyApp.m
//  Phocation
//
//  Created by Stefaan Lesage on 11/11/10.
//  Copyright 2010 Devia. All rights reserved.
//

#import "UIColor+MyApp.h"

@implementation UIColor (MyApp)

+ (UIColor *)myTableViewBackgroundColor
{
    UIImage *img = [UIImage imageNamed:@"BG_Pink"];
    return [UIColor colorWithPatternImage:img];
}

+ (UIColor *)myTableCellBackgroundColor
{
    return [UIColor colorWithRed:255/255.0 green:240/255.0 blue:255/255.0 alpha:100];
}

@end

Well the implementation is pretty straightforward. For the myTableViewBackgroundColor, I simply return a UIColor based on the pattern in my previous post. The myTableCellBackgroundColor then returns the light pink / purple color which gets used as the background for my UITableViewCells.

Using the Category

Using the Category is now pretty Straight Forward. In my Detail View for example, I have a reference to a UITextField called nameTextField and to the tableView beneath it. So in my viewDidLoad I have the following code :

- (void)viewDidLoad
{
    [super viewDidLoad];

    /* Load our HeaderView if Necessary */
    [[self view] setBackgroundColor:[UIColor myTableViewBackgroundColor]];
    [[self tableView] setBackgroundColor:[UIColor myTableViewBackgroundColor]];
    [nameTextField setBackgroundColor:[UIColor myTableCellBackgroundColor]];
}

Quite simple, isn’t it ?

But what are the advantages ?

For me, it makes my code a little more readable (that is of course a more personal opinion), but what’s even better is that my code is a lot easier to maintain. If for some reason I want to change my color scheme to use another pattern or another color for the UITableViewCells, I only need to update the code in one sport. Simply modify the Implementation found in UIColor+MyApp.c, build and it’s done !

Once I found the advantages of this approach, I even added more methods to my UIColor+MyApp category. It now also contains methods which return the color I will be using for the UINavigationBar tine, colors I will be using for different texts in my application, …

Feedback

As with my previous post, there might be better ways to achieve the same thing. If you have a more appropriate approach or solution, feel free to let me know … I’m eager to learn

This is a repost of my original article which I posted on my own website. But since it is related to iOS development, I thought it might be interesting for the Cocoaheads Belgium folks as well.

The default grouped UITableView

The default Grouped UITableView looks nice but …

Well, you can use the UITableView in it’s Plain mode, but also in a Grouped mode. The Grouped mode uses some kind of pattern as the background for the UITableView. It looks quite nice and is made up of alternating light and darker blue-grayish lines.

I wanted someting a little more ‘Special’ …

Although the default look isn’t all that bad … I wanted to have something ‘special’ for my application. So I was wondering if there was some way to change the color used in that pattern. Since I didn’t know the answer myself, I sent out a tweet. I was hoping someone would pick it up and maybe let me know where I could find some more information on this topic.

The feedback I got

I did receive some feedback to my tweet: ‘Is there an easy way to create your own UIColor which looks like the ‘Group Table View Color’ but with another color scheme ? #iphonedev. One of the answers was from Amar Kulo who suggested to supply me with some Photoshop files I could modify.

A few moments later, Amar Kulo even provided me with a complete answer and wrote a blog post about it to help me out. It is actually pretty easy, so I thought i would share it with the world as well.

The Trick

It is actually quite easy to get your own custom background. You simply have to use a custom background image. Amar provides a few samples in his blogpost. The only thing you need to do is open up your favorite Image Editor (in my case Pixelmator), change the colors to you liking and create the necessary versions for your application.

The Code

Once you added the resources to your project, you can simply start using them as the background for your Grouped UITableView. In my case, it was simple a matter of setting the background color in the ViewDidLoad of my UITableViewController :

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation
    // bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
	UIImage *img = [UIImage imageNamed:@"BG_Pink"];
	[[self tableView] setBackgroundColor:[UIColor colorWithPatternImage:img]];
}

Feedback

I ended up with this Bakcground and Color Scheme

Well … This might not be the best way to do it, so if you have any suggestions, feel free to let me know.

Personally, I had to experiment a bit with quite a few different colors before I got something which did looked OK to me, so feel free to experiment as well, and let me know what you come up with

Next time I’ll be delving a little deeper into some more things I did with my UITableView and UITableViewCell … but for now … feel free to post a comment and have a look at the result :

Please go to http://github.com/cgodefroy/CLang-static-Analyzer-cases for the source code of demos. I tried to add comments to explain a few things. If you have more code examples, fork it and send me a pull request (never tried it might be fun).

If you want more information on my iPhone app 321Run, please have a look at the 321Run website. Feel free to play around with the application and show it to your friends (there is a free and apaid versions). Getting feedback from Belgian users would be great, so please go ahead, download the app and give it a spin. It is a nice app for beginners and regular runners.

I am working on version 2.0 and am looking for some testers who would commit to run at least once a week for one month;-) Of course while using 321Run.

What else? Hopefully Stefaan will be able to put online the video he succeeded to record.

Some generous folks are providing icons free of charge, so I decided I would start with 2 free Icons sets

Glyphish : 120 great icons for great apps

My initial search drove me to the Icons for your iPhone apps project on Kickstarter. The icons by Joseph Wain looked awesome, so I decided to back the project. If he could raise $500 in donations the icons would be released for use in any application !

Meanwhile his set of 120 beautifully designed iconst for iPhone applications is available on the Glyphish website. The Icons are designed and optimised for use on toolbars and tab bars, but they can also be used in other applications, websitesa and lots more.

What’s even better is that the icons by Joseph Wain are shared under the Creative Commons Attribution License.

Glyphish Icon Set

If you use his icons in your next kille iPhone application, make sure to send him a message about it. Some of the applications which use his icons are :

• Groceries 2.0 by Syphiestication
• Birdbrain
• Harvest by Sean Murphy
• iGrarageSale by Performant Design
• and lots more …

PixelPress : Free iPhone Toolbar Icons

Another great iPhone Icons set is the one created by the folks at PixelPress. Again a comprehensive set of 50 icons which can be used in your Toolbars and NavBars. The set is available for anyone to use in any kind of iPhone applications (free or commercial) and are released under the Creative Commons Attribution 2.5 Canada license.

PixelPress Free iPhone Toolbar Icons

If you use these icons, make sure you send a note to the folks at PixelPress as well.

Paid

There are also a few great Icons sets which aren’t free, but still quite cheap ! I can’t imagine I would be able to create a similar set of icons for that price !

PixelPress : Whitespace Stock Icons for iPhone Developers

Back in July PixelPress released a Big set of icons which are available in the most popular iPhone toolbar and tab bar sizes : 30×30 and 20×30 pixels. The Icon collection is also avaiable in vector Photoshop PSD format for scaling and sizing to y our own needs.

PixelPress WhiteSpace Stock Icons

Both collections include the icons in two tones: black and white both with alpha channel. The Icon set includes all of the basic icons you need, and many icons for niches like finance, GPS, multimedia and even gaming

The Icons set is priced at $69 for the Pixel collection and $175 for the Vector collection. What’s even better is that it includes updates made to the Icon set ! Back in August a new set of 25 icons was added to the collecting, and apparently a new update will be made this month !

If you ask me, $69 for a collection of 277 well designed icons is … well almost Free !

Eddit : Shop / iPhone UI Icon Set

Another set of icons is available on the Eddit website. Their iPhone UI Icon Set consists of 160 PNG icons in 2 sizes, plus 4 free ibkube servuce icons for a total price of $69

eddit : iPhone UI Icon Set

Closing Words

This is by no means a complete list of all Free and Paid icons available on the internet, but just a few of the Icons sets I found while looking for a few good icons. If you know of any other Icons sets which are worth mentioning, please add a comment to this post, and we will make sure they get included in the article.