Tutorial: Drawing a Grid in a iPhone UITableView – Tabular Cell Data

UITableView is probably the most used view on the iPhone. It’s flexible and the UI is ideally suited to use on the iPhone. There are lots of examples on how to add multiple items to a UITableViewCell. However, I needed to present some data in a more traditional spreadsheet style grid. The results worked well and enabled me to pack a lot of information on the screen that was very hard to follow without the vertical grid. I’ll show a very simplified version here you can use to add vertical lines to your UITableView.
First we need to create a subclass of UITableViewCell. This is so we can override drawrect and draw our lines and to add an array to hold a list of positions where we’ll draw the lines.

@interface MyTableCell : UITableViewCell { NSMutableArray *columns; } - (void)addColumn:(CGFloat)position; @end

In this simplified example we’ll leave the positioning of the actual text in the cells in the UITableViewController and place it manually (full source code is attached at the end). We’re just providing a mechanism for drawing vertical lines to make a grid. Column locations are added by calling addColumn:

- (void)addColumn:(CGFloat)position { [columns addObject:[NSNumber numberWithFloat:position]]; }

Now lets override drawRect. In it we grab the current graphics context and set the line color and width. Then we iterate over our columns array drawing a line from the top of the cell row to the bottom at each position stored in the array.

- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); // Use the same color and width as the default cell separator for now CGContextSetRGBStrokeColor(ctx, 0.5, 0.5, 0.5, 1.0); CGContextSetLineWidth(ctx, 0.25); for (int i = 0; i < [columns count]; i++) { CGFloat f = [((NSNumber*) [columns objectAtIndex:i]) floatValue]; CGContextMoveToPoint(ctx, f, 0); CGContextAddLineToPoint(ctx, f, self.bounds.size.height); } CGContextStrokePath(ctx); [super drawRect:rect]; }

To add columns to the view just call

[cell addColumn:50];

when you’re building each cell.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *MyIdentifier = [NSString stringWithFormat:@"MyIdentifier %i", indexPath.row]; MyTableCell *cell = (MyTableCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier]; if (cell == nil) { cell = [[[MyTableCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease]; UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0.0, 0, 30.0, tableView.rowHeight)] autorelease]; [cell addColumn:50]; label.tag = LABEL_TAG; label.font = [UIFont systemFontOfSize:12.0]; label.text = [NSString stringWithFormat:@"%d", indexPath.row]; label.textAlignment = UITextAlignmentRight; label.textColor = [UIColor blueColor]; label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight; [cell.contentView addSubview:label]; label = [[[UILabel alloc] initWithFrame:CGRectMake(60.0, 0, 30.0, tableView.rowHeight)] autorelease]; [cell addColumn:120]; label.tag = VALUE_TAG; label.font = [UIFont systemFontOfSize:12.0]; // add some silly value label.text = [NSString stringWithFormat:@"%d", indexPath.row * 4]; label.textAlignment = UITextAlignmentRight; label.textColor = [UIColor blueColor]; label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight; [cell.contentView addSubview:label]; } return cell; }

That’s it. Being a bit dense I beat my head on my desk a few days before it become obvious how blindingly simple it really was. A lot was just learning ObjectiveC and how UIKit works in general. I’m now working on a GridTableView library that will add a good bit of functionality and ease of use. I’ll post it here.
Here’s the source code.

Objective C - Basic

Class Reference

• NSMutableArray Class Reference
• NSObject Class Reference 

Library

Introduction to Quartz 

MGSplitViewController for iPad 

Tutorial

• Objective-C Beginner's Guide

• The New Boston » Objective-C

• The Objective C Programming language

What is HSB/HSV Color Spaces?

The HSV (Hue, Saturation, Value) model, also called HSB (Hue, Saturation, Brightness), defines a color space in terms of three components:

• Hue

  In HSV, hue represents color. In this model, hue is an angle from 0 degrees to 360 degrees.

Angle	Color
0-60	Red
60-120	Yellow
120-180	Green
180-240	Cyan
240-300	Blue
300-360	Magenta

• Saturation

  Saturation indicates the range of grey in the color space. It ranges from 0 to 100%. Sometimes the value is calculated from 0 to 1. When the value is '0,' the color is grey and when the value is '1,' the color is a primary color. A faded color is due to a lower saturation level, which means the color contains more grey.

• Value

  Value is the brightness of the color and varies with color saturation. It ranges from 0 to 100%. When the value is '0' the color space will be totally black. With the increase in the value, the color space brightness

Applications of HSV

The HSV color space is widely used to generate high quality computer graphics. In simple terms, it is used to select various different colors needed for a particular picture. An HSV color wheel is used to select the desired color. A user can select the particular color needed for the picture from the color wheel. It gives the color according to human perception.

Some applications use also other kinds of this model. For instance, S and B/V with can vary from 0 up to 1, H may be normalized to 0-100%, or all three parameters can vary from 0 up to 255. Just Color Picker uses the [degree, percent, percent] notation.
It is sometimes preferable in working with art materials, digitized images, or other media, to use the HSV or HSL color model over alternative models such as RGB or CMYK, because of differences in the ways the models emulate how humans perceive color. RGB and CMYK are additive and subtractive models, respectively, modelling the way that primary color lights or pigments (respectively) combine to form new colors when mixed.

Graphical depiction of HSV. References: Wikipedia

HSV Representations

The HSV color wheel is used to pick the desired color. Hue is represented by the circle in the wheel. A separate triangle is used to represent saturation and value. The horizontal axis of the triangle indicates value and the vertical axis represents saturation. When you need a particular color for your picture, first you need to pick a color from the hue (the circular region), and then from the vertical angle of the triangle you can select the desired saturation. For brightness, you can select the desired value from the horizontal angle of the triangle.
Sometimes the HSV model is illustrated as a cylindrical or conical object. When it is represented as a conical object, hue is represented by the circular part of the cone. The cone is usually represented in the three-dimensional form. The saturation is calculated using the radius of the cone and value is the height of the cone. A hexagonal cone can also be used to represent the HSV model. The advantage of the conical model is that it is able to represent the HSV color space in a single object. Due to the two-dimensional nature of computer interfaces, the conical model of HSV is best suited for selecting colors for computer graphics.
The application of the cylindrical model of HSV color space is similar to the conical model. Calculations are done in a similar way. Theoretically, the cylindrical model is the most accurate form of HSV color space calculation. In practical use, it is not possible to distinguish between saturation and hue when the value is lowered. The cylindrical model has lost its relevance due to this and the cone shape is preferred over it.

Advantages of HSV

The HSV color space is quite similar to the way in which humans perceive color. The other models, except for HSL, define color in relation to the primary colors. The colors used in HSV can be clearly defined by human perception, which is not always the case with RGB or CMYK.

HSV Alernatives

RGB, CMYK and HSL are some f the alternative models of color space.