iOS app design blog: Customizing table view layout

When it comes to iOS app design, there have been quite some posts on good graphics. Importance of great UX can never be overstated. But fewer times there is open discussion on basic methods in making UI attractive. There are principles out there, taught seamlessly by design schools. But they are implemented using non-standardized techniques, often enforced by UX people who barely know the underlying implementation details of each platform.

Table View: Most important iOS app design element

Table view is most often used element in all iOS app design. It’s quite uncommon to see its enormous benefits when it can be customized by applying simple design principles. In this article, we will discuss one such techniques.

Visual appeal comes from relative lighting and exposure. Every UX designer knows this by heart. Let us emphasize this principle from a programmer’s perspective, with a simple example.

How about creating a UITableView with alternate color scheme? It is quite easy to design such a table view:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
BOOL bOdd = (indexPath.row % 2) ? YES:NO;
NSString * cellID = @"cellID";

UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellID];

if (!cell)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
}

cell.textLabel.text = @"blablabla"
if (bOdd)
{
cell.backgroundColor = [UIColor brownColor];
}
else
{
cell.backgroundColor = [UIColor blueColor];
}

return cell;
}

The result will be something like:

UITableView Alternate coloring

UITableView Alternate coloring

But this code fails to exploit UITableView’s most interesting layout strategy: UITableViewCell layout caching. Reason? we use different layout for same cell ID. What this essentially means is, using the same key, UITableView has to draw different layout each time. It’s a performance hit, because each time redraw must happen.

Solution is to use two different cellIDs for each color.

BOOL bOdd = (indexPath.row % 2) ? YES:NO;
NSString * cellID = (bOdd) ? cellIDOdd : cellIDEven;

UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellID];

if (!cell)
{
     cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault      reuseIdentifier:cellID];
}

cell.textLabel.text = @"blablabla"
if (bOdd)
{
     cell.backgroundColor = [UIColor brownColor];
}
else
{
     cell.backgroundColor = [UIColor blueColor];
}

return cell;

Now upon each call to dequeue statement, UITableView fetches the correctly colored cell. And cell.backgroundColor statement is effectively a no-op because same color is passed to the setter as the existing color. Because of UIColor’s own caching scheme, this is quite an efficient operation.

Finally, some consideration on visual appeal. The above layout convey’s programmer’s iOS acumen. But is it really appealing? Not quite.

For better visual appeal, it is recommended to use colors that are not too bright. Also it is recommended that things arranged in similar manner do not contrast each other too much. Something like below colors:

    UIColor * offWhite = [UIColor colorWithRed:247/255.0f green:241/255.0f blue:234/255.0f alpha:1.0];
    UIColor * lightGray = [UIColor colorWithRed:175/255.0f green:184.0/255.0f blue:183.0/255.0f alpha:1.0];
Alternate coloring

Alternate coloring

Looks appealing? Definitely, not the best, but lot better.

Better yet, one could make a preloaded array of colors, and fetch each color based on cell index. Something like:

    cell.backgroundColor = [self.cellColorArray objectAtIndex:(indexPath.row%(2))];

As you can see,

self.cellColorArray

is an array preloaded in viewDidLoad

or

viewWillAppear

, having both colors offWhite and lightGray as its elements. Also, modulo by 2 operation always yields 0 or 1, depending upon whether the row is odd or even. Note that if we want 3 alternate colors instead of 2, we can simply do modulo by 3 instead of modulo by 2 operation and get desired colors from alternate color scheme.

Main advantage of this approach is that you can have all your color values in one place, callable from

viewDidLoad

or

viewWillAppear

. You do not have to make calls to UIColor in each

cellForRowAtIndexPath

call.

Conclusion:

Never be afraid to experiment. iOS app design is not a foray only for UI and UX designers. If learned well by programmers, it can do wonders. There is never a limit how much device capabilities can be exploited to render attractive graphics and provide seamless user experience.

Tagged with: