Iphone - The WOW factor

About a few weeks ago our little project got lucky, and received some designer time! Our design hero put together some screen shots at first, and then sent us the images and specifications that we would need. It was amazing how polished our application started to look as soon as we started to add in the changes! We were completely WOWED with the end result! See for yourself:

Images of Main Screen Before.





Images of Main Screen After.





Now a few discoveries about adding background images, specifying table and cell backgrounds, separators and text formatting.

1. Image as background

You can use an image as the background for a UIView by adding the following code in the view controller's viewDidLoad:

self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:@"imgname.png"]];

colorWithPatternImage is a really powerful method and can be used to set images as colors for tables, cells, labels etc.

2. Specify a color not available in the interface builder

The interface builder comes with a small selection of colors (you can add more libraries though), if you don't find the color you want, you can specify any color pro-grammatically using the UIColor class. The following example uses the color #DB3F61, and calls colorWithRed, which takes in the Red, Green, Blue and alpha values. The RGB values for #DB3F61 are RGB(219,63,97), each value is divided by 255 in order to use colorWithRed:

[UIColor colorWithRed:219.0f/255.0f green:63.0f/255.0f blue:97.0f/255.0f alpha:1.0f];

You can assign this UIColor to backgrounds, and separators etc. In the following code I've applied it to the separator line defined for tables.

self.table.separatorColor = [UIColor colorWithRed:219.0f/255.0f green:63.0f/255.0f blue:97.0f/255.0f alpha:1.0f];

3. Programmatic formatting of text

If you are creating textual elements on the fly and need the text to be formatted like the rest of the application, you can do it! Below is the example of a label, with text color, shadow size and font specified. Notice that the background color for the label is set to clearColor, this is a predefined color in the UIColor class. The shadow of the text is set to whiteColor. Other defined colors are red, orange, brown etc. The color of the label text is set to color #663300 (RGB(102,51,0)), using the colorWithRed method.

CGRect frame = CGRectMake(0, 0, 400, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:20.0];
label.text = @"This is a label";
label.shadowColor = [UIColor whiteColor];
label.textAlignment = UITextAlignmentCenter;
label.shadowOffset = CGSizeMake(0,1);
label.textColor = [UIColor colorWithRed:102.0f/255.0f green:51.0f/255.0f blue:0.0f/255.0f alpha:1.0f];

4. Grouped tables, selected row issue

When using a UITableView, and setting the style to Grouped. You'll notice that when the top or bottom cell is selected, the grey or blue is outside of the rounded corners. Also the separators disappear for any selected cell. The workaround
for this issue is to always set the cell's background color for selected and unselected. In the view controller make sure you have a reference to the cell and in the viewDidLoad add the following code:

self.myCell.backgroundColor = [UIColor colorWithRed:219.0f/255.0f green:63.0f/255.0f blue:97.0f/255.0f alpha:1.0f];

This will set the cell's regular color. Now for selected cell color use the table's didSelectRowAtIndexPath, and for the selected row set the cell's background to a different color using the same code as above. Remember to set all the other cells back to regular cell color, and for each cell in the interface builder set the Selection property to none.